<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 在线 外部式 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<!--
下载后 外部式
<link rel="stylesheet" href="awesome/css/font-awesome.css">
-->
<style>
*{
font:16px 华文细黑,宋体;
/*
一般给所有的内边距和外边距设置为0
谁需要边距在单加
*/
/* 外边距 */
margin:0px;
/* 内边距 */
padding:0px;
}
#nav{
width:200px;
border:1px solid #e9e9e9;
/* border-collapse:collapse; */
}
#nav h3{
color:green;
font-weight: bold;
background-color: #cbcbcb;
height:40px;
/*
实现单行文本垂直居中
单行文本居中,可以设置一下line-height */
line-height:40px;
}
#nav li{
color:#333;
font-size:14px;
line-height:40px;
/* list-style-position: inside; */
list-style-type:none;
}
#nav li:nth-child(even){
background-color:#ebebeb;
}
#nav li:hover{
background-color: darkorange;
/* 移动到此时,鼠标变手型 */
cursor: pointer;
}
#nav a{
color:#333;
/* 删除下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<div id="nav">
<h3><i class="fa fa-bars"></i>全部教程</h3>
<ul>
<!-- 超链接字体为蓝色，应另为a标签设置颜色，删除下划线 -->
<li><i class="fa fa-external-link"></i> <a href="">html</a></li>
<li><i class="fa fa-external-link"></i>CSS</li>
<li><i class="fa fa-external-link"></i>JavaScript</li>
<li><i class="fa fa-external-link"></i>JQuery</li>
<li><i class="fa fa-external-link"></i>Ajax</li>
<li><i class="fa fa-external-link"></i>移动端</li>
</ul>
</div>
</body>
</html>
