2058次阅读
动态效果
先来看下欣欣说得上一个笔记的坏味道，看看ul和li怎么重写九个盒子的例子：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>动态效果</title>
<style>
.outUl {
width : 360px;
height : 360px;
background-color : pink;
padding : 0px;
}
.innerLi {
width : 100px;
height : 100px;
margin : 10px;
float : left;
background-color : blue;
list-style-type : none;
}
</style>
</head>
<body>
<ul class="outUl">
<li class="innerLi">内部文字</li>
<li class="innerLi">内部文字</li>
<li class="innerLi">内部文字</li>
<li class="innerLi">内部文字</li>
<li class="innerLi">内部文字</li>
<li class="innerLi">内部文字</li>
<li class="innerLi">内部文字</li>
<li class="innerLi">内部文字</li>
<li class="innerLi">内部文字</li>
</ul>
</body>
check the result
果然很简单，样式上只改动两点：1、设置li的list-style-type为none，去掉前面的小圆点；2、设置ul的padding为0px，去掉ul的内边距。
迫不及待想试试导航栏效果，看看例子：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>动态效果</title>
<style>
ul {
width : 1085px;
margin : 0px auto;
padding : 0px;
}
li {
list-style-type : none;
text-align : center;
float : left;
}
a {
display : block;
width : 155px;
height : 55px;
line-height : 55px;
color : #777777;
font-size : 25px;
text-decoration : none;
}
a:hover {
background-color : pink;
text-decoration : underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">ServerSide</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">WebService</a></li>
<li><a href="#">WebBuilding</a></li>
</ul>
</body>
check the result
这个例子稍微和W3School的不一样，不过原理是一样的，主要有以下几点：1、想让li中的文字水平居中，可设置text-align为center；2、想让a标签中的文字垂直居中，可设置line-height等于height；3、a标签是行内元素，不是块元素，想要使它的width和height生效，要设置display为block，指定以块元素来显示，li默认是块元素，所以我们不用设置；4、可以通过color设置字体颜色，通过font-size设置字体大小；5、可以通过text-decoration来设定a标签的下划线是否显示；6、最最重要的a:hover，可以设置鼠标划过时，a标签的样式。
话说其他元素也能用hover呢，再来看个例子：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>动态效果</title>
<style>
ul {
width : 480px;
height : 300px;
margin : 0px auto;
padding : 0px;
}
.greenLi {
width : 98px;
height : 298px;
float : left;
list-style-type : none;
border : 1px solid green;
margin : 0px 10px;
}
.greenLi:hover {
background-color : green;
}
.yellowLi {
width : 98px;
height : 298px;
float : left;
list-style-type : none;
border : 1px solid yellow;
margin : 0px 10px;
}
.yellowLi:hover {
background-color : yellow;
}
.grayLi {
width : 98px;
height : 298px;
float : left;
list-style-type : none;
border : 1px solid gray;
margin : 0px 10px;
}
.grayLi:hover {
background-color : gray;
}
.pinkLi {
width : 98px;
height : 298px;
float : left;
list-style-type : none;
border : 1px solid pink;
margin : 0px 10px;
}
.pinkLi:hover {
background-color : pink;
}
</style>
</head>
<body>
<ul>
<li class="greenLi"></li>
<li class="yellowLi"></li>
<li class="grayLi"></li>
<li class="pinkLi"></li>
</ul>
</body>
check the result
这个例子应该是很好懂的，需要注意的就是.xxxLi:hover，其实类选择器也是可以使用hover的，好了，有了hover这样的法器，我的页面又能增色不少了。
如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点赞助
，不要超过100元哦！
，不要超过100元哦！
评论请先登录