為什么這里的“|”要加入position：absolute；不加入時(shí)，為什么頁(yè)面找不到 “ |”
css3背景制作菜單綜合練習(xí)題
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>CSS制作立體導(dǎo)航</title>
<link rel="stylesheet" >
<style>
body{
?background: #ebebeb;
}
.nav{
?width:560px;
?height: 50px;
?font:bold 0/50px Arial;
?text-align:center;
?margin:40px auto 0;
? ? ?background: #f65f57;
?/*制作圓*/
?border-radius:4px;
? ? ? ? ? /*制作導(dǎo)航立體風(fēng)格*/
? ? ? ? ? box-shadow:0 2px 1px #f65fef;
}
.nav a{
?display: inline-block;
?-webkit-transition: all 0.2s ease-in;
?-moz-transition: all 0.2s ease-in;
?-o-transition: all 0.2s ease-in;
?-ms-transition: all 0.2s ease-in;
?transition: all 0.2s ease-in;
}
.nav a:hover{
?-webkit-transform:rotate(10deg);
?-moz-transform:rotate(10deg);
?-o-transform:rotate(10deg);
?-ms-transform:rotate(10deg);
?transform:rotate(10deg);
}
.nav li{
?position:relative;
?display:inline-block;
?padding:0 16px;
?font-size: 13px;
?text-shadow:1px 2px 4px rgba(0,0,0,.5);
?list-style: none outside none;
}
/*使用偽元素制作導(dǎo)航列表項(xiàng)分隔線*/
.nav li:after{
? ?content:"";
? ?width:1px;
? ?height:10px;
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? top:20px;
? ? ? ? ? ? right:2px;
? ? ? ? ? ? background:linear-gradient(to bottom,black,yellow);
}
? ? ? ? /*刪除第一項(xiàng)和最后一項(xiàng)導(dǎo)航分隔線*/
.nav li:last-child:after{
? ? ? ? ?width:0px;
? ? ? ? ? ? height:0px;
}
</style>
</head>
<body>
<ul>
? ? ?<li><a href="">Home</a></li>
? ? ?<li><a href="">About Me</a></li>
? ? ?<li><a href="">Portfolio</a></li>
? ? ?<li><a href="">Blog</a></li>
? ? ?<li><a href="">Resources</a></li>
? ? ?<li><a href="">Contact Me</a></li>
</ul>
</body>
</html>
2017-03-18
代碼太長(zhǎng)，沒(méi)仔細(xì)看，要是說(shuō)錯(cuò)了，歡迎糾錯(cuò)，
我的理解是after是在元素內(nèi)容之后插入元素，如果使用了position:absolute
插入內(nèi)容就是相對(duì)于之前的已經(jīng)使用了position:relative的li標(biāo)簽進(jìn)行定位