分享程序员开发的那些事...
更新时间：2022-09-07 23:18:38
开发者学堂课程【CSS 快速掌握：display 属性的综合案例】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9199
内容介绍
一、display 属性的综合案例
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:ur1(./images/dibanzhuan.jpg)
}
ul{
list-style: none;
}
.nav{
width: 960px ;
height : 40px ;
margin: 100px auto;
}
.nav ul li{
float: left;
width: 120px;
height: 40px ;
line-height: 40px;
text-align: center;
background:ur1(./images/bg2.png) repeat-x;
}
.navullia
width: 120px;
height: 40px ;
/*将行内元素转换为块级元素*/
display: block;
}
.nav ul li a:link, .nav ul li a:visited{
text - decoration: none ;
color: white;
}
.nav ul li a :hover{
background-image:ur1(./images/bg3. png);
}
</style>
<body>
<div class="nav">
<ul>
<li><ahref="#">网站栏目</a></li>
<li><ahref="#">网站栏目</a></li>
<li><ahref="#">网站栏目</a></li>
<li><ahref="#">网站栏目</a></li>
<li><ahref="#">网站栏目</a></li>
<li><ahref="#">网站栏目</a></li>
<li><ahref="#">网站栏目</a></li>
</ul>
</div>
</body>
</html>