<style>
*{
padding:0;
margin:0;
}
ul{
width:1200px;
height:48px;
margin:100px auto;
}
ul li{
float: left;
background-color:lightgray;
/* 设置垂直居中和行高 */
line-height:48px;
display:block;
/* 此处设置了间隔 */
padding:0 5%
}
ul li a{
/* 文字不能被选中 */
user-select: none;
display:block;
text-decoration: none;
color:gray;
font-size: 20px;
}
ul li:hover{
background-color:antiquewhite;
}
</style>
<body>
<div class="bar">
<ul>
<li><a>苹果</a></li>
<li><a>小米</a></li>
<li><a>华为</a></li>
<li><a>微软</a></li>
<li><a>Oppo</a></li>
<li><a>宜家</a></li>
<li><a>关于我们</a></li>
</ul>
</div>
</body>
【CSS小练习1】导航条
最新推荐文章于 2024-08-02 12:09:11 发布