您的位置：首页 > 其它

接上一篇的改进版，加入一个三角形。增加了多个伪元素的一块调用的方法

2018-03-23 16:17 525 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<style>
/*body样式的作用就是将默认的样式个清除掉*/
body{
padding: 0;
margin: 0 auto;
font-size: 12px;
}
.bj{
width: 100%;
height: 40px;
background-color: #ffd200;
}
.nav{
width: 560px;
height: 40px;
margin: 15px auto;/*上下左右居中*/
padding: 0;/*将默认的自带样式去掉*/
}
.nav li{
list-style: none;/*去掉前面的装饰*/
width: 70px;
height: 40px;
float: left;
text-align: center;/*文体水平居中对齐*/
line-height: 40px;/*相当于上下对齐*/
position: relative;
z-index: 99;
}
.nav li::before {
content:"";
width: 68px;
height: 28px;
background-color: #edaf1a;
border-radius: 14px;/*28/2高度除以2*/
position: absolute;
top: 6px;
left: 1px;
z-index: -9;/*这里必须用负值因为有三层1、背景色，2、字体3、伪元素层*/
display: none;/*不显示*/
}
.nav li:first-child::after{/*第一个有其他的没有，first-child只定义了第一个*/
content: url(image/saojiao.png);
position: absolute;
top: -24px;
left: 30px;
display: none;/*display是显示方式的样子包含block,inline, none三种方式*/
}
/*同时控制两个元素*/
.nav li:hover::before,.nav li:hover::after{/*意思是我们鼠标移入时我们的before伪元素是一个什么状态*/
display: block;/*以块状元素显示*/
}
.nav li:hover{
color: #fff;
cursor: pointer; /*指针变成小手形势*/
}
</style>
</head>
<body>
<div class="bj">
<ul class="nav">
<li>软件入门</li>
<li>字体设计</li>
<li>海报设计</li>
<li>C4D教程</li>
<li>图像合成</li>
<li>综合设计</li>
<li>产品精修</li>
<li>系列课</li>
</ul>
</div>
</body>
</html>

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

标签： first-child ::after

相关文章推荐

新的分享

章节导航