主要知识点：
2、知道块级元素能够设置宽高，行内元素不可设置宽高（替换元素可以）。
3、掌握display属性的使用。
4、掌握css伪类选择器的使用。
扩展：
1、nth-child()选择器
选择其父元素的第n个子元素。
效果图：
参考：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Course</a></li>
<li><a href="#">Aticle</a></li>
<li><a href="#">Plan</a></li>
<li><a href="#">contacts</a></li>
<li><a href="#">Notes</a></li>
</ul>
</nav>
CSS代码：
nav ul li{float: left; list-style: none;margin-right: 5px; }
nav ul li a{width: 100px; height: 80px; text-align: center; line-height: 80px; display: block; text-decoration: none; color: white; font-size: 22px; }
nav ul li:nth-child(1) a{background-color: blueviolet;}
nav ul li:nth-child(2) a{background-color: cornflowerblue;}
nav ul li:nth-child(3) a{background-color: forestgreen;}
nav ul li:nth-child(4) a{background-color: gold;}
nav ul li:nth-child(5) a{background-color: darkorange;}
nav ul li:nth-child(6) a{background-color: #FF0000;}
nav ul li a:hover{height: 90px; color: #000000;}
本文来自投稿，不代表125jz立场，如若转载，请注明出处：http://www.125jz.com/5526.html
微信扫一扫 
支付宝扫一扫 