偽類元素建立一個導航的案例：::before :hover::before的用法為重點
阿新 • • 發佈：2019-01-30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導航</title>
<style>
body{
padding: 0;
margin: 0 auto;
font-size: 12px;
}/*對整體進行控制一下*/
.bj{
width: 100%;
height: 40px;
background-color: #ffd200;
}
.nav{
width: 560px;
height: 40px;
margin: 0 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:hover::before{/*意思是我們滑鼠移入時我們的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>
<html>
<head>
<meta charset="utf-8">
<title>導航</title>
<style>
body{
padding: 0;
margin: 0 auto;
font-size: 12px;
}/*對整體進行控制一下*/
.bj{
width: 100%;
height: 40px;
background-color: #ffd200;
}
.nav{
width: 560px;
height: 40px;
margin: 0 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:hover::before{/*意思是我們滑鼠移入時我們的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>