水平導(dǎo)航，這時候?yàn)槭裁床挥胒loat:left了？
<!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:10px;
? ? ? ? ? /*制作導(dǎo)航立體風(fēng)格*/
? ? ? ? ? box-shadow:1px 5px ?#f63f50;
}
.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:"|";
? ? ? ? ?position:absolute;
? ? ? ? ?right:0;
? ? ? ? ?top:0px;
? ? ? ? ?background:linear-gradient(to bottom #f82f87,#B0363F,#f82f87);
? ? ? ? }
? ? ? ? /*刪除第一項(xiàng)和最后一項(xiàng)導(dǎo)航分隔線*/
? ? ? ? .nav li:last-child:after{
? ? ? ? ?content:'';
? ? ? ? }
? ? ? ??
.nav a,
.nav a:hover{
?color:#fff;
?text-decoration: none;
}
</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>
2016-03-26
.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;
}
這里給li，?display:inline-block
inline-block屬性的意思是：將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi)，允許空格。(準(zhǔn)確地說，應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對象，周圍元素保持在同一行，但可以設(shè)置寬度和高度地塊元素的屬性)
所以就不用float:left了