CSS学习笔记-04 a标签-导航练习

个人练习，各位大神勿笑。。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}ul{width: 810px;height: 50px;background-color:green;margin: 100px auto;list-style: none;}ul li{float: left;width: 90px;height: 50px;text-align: center;line-height: 50px;margin-left: 10px;}ul li a{text-decoration: none;display: inline-block;width: 90px;height: 50px;}ul li a:visited{color:blue;}ul li a:hover{color: white;background-color:pink;}</style>
</head>
<body><ul><li><a href="#">我是导航</a></li><li><a href="#">我是导航</a></li><li><a href="#">我是导航</a></li><li><a href="#">我是导航</a></li><li><a href="#">我是导航</a></li><li><a href="#">我是导航</a></li><li><a href="#">我是导航</a></li><li><a href="#">我是导航</a></li></ul>
</body>
</html>

 <!DOCTYPE html > 
 < html lang= "en" > 
 < head > 
 < meta charset= "UTF-8" > 
 < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > 
 < meta http-equiv= "X-UA-Compatible" content= "ie=edge" > 
 < title >Document </ title > 
 < style > 
 *{ 
 margin: 0; 
 padding: 0; 
} 
 ul{ 
 width: 810px; 
 height: 50px; 
 background-color: green; 
 margin: 100px auto; 
 list-style: none; 
} 

 ul li{ 
 float: left; 
 width: 90px; 
 height: 50px; 
 text-align: center; 
 line-height: 50px; 
 margin-left: 10px; 
} 

 ul li a{ 
 text-decoration: none; 
 display: inline-block; 
 width: 90px; 
 height: 50px; 
} 

 ul li a:visited{ 
 color: blue; 
} 

 ul li a:hover{ 
 color: white; 
 background-color: pink; 
} 

 < / style > 
 </ head > 
 < body > 
 < ul > 
 < li >< a href= "#" >我是导航 </ a ></ li > 
 < li >< a href= "#" >我是导航 </ a ></ li > 
 < li >< a href= "#" >我是导航 </ a ></ li > 
 < li >< a href= "#" >我是导航 </ a ></ li > 
 < li >< a href= "#" >我是导航 </ a ></ li > 
 < li >< a href= "#" >我是导航 </ a ></ li > 
 < li >< a href= "#" >我是导航 </ a ></ li > 
 < li >< a href= "#" >我是导航 </ a ></ li > 
 </ ul > 
 </ body > 
 </ html > 