您的位置：首页 > 其它

伪类学习-first-child在案例中的应用

2018-03-22 17:16 489 查看

<!DOCTYPE html>
<html>
<head>
<title>First-child在实际案例中的应用</title>
<style type="text/css">
ul{
width: 904px;
height: 46px;
background-color: #1d3b5e;
padding: 0 20px;/*上下0 左右20px*/
border-radius: 3px 3px 0 0;/*从左上角开始按顺时针顺序*/
}
ul li{
list-style: none;/*去掉导航页的小点*/
width: 144px;
height: 46px;
text-align: center;/*文字居中*/
line-height: 46px;
color:#fff;
float: left;/*由竖排变成横排*/
border-left: 1px solid #445160;/*给每一个li标签加一个左边框solid是实线的意思*/

}
ul li:first-child{/*重点用到first-child标签*/
border: none;/*取消第一个li标签的左边框*/
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>新闻中心</li>
<li>行业动态</li>
<li>客户案例</li>
<li>服务支持</li>
<li>关于我们</li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： first-child

相关文章推荐

新的分享

章节导航