水平導航，這時候為什么不用float:left了？
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>CSS制作立體導航</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;
? ? ? ? ? /*制作導航立體風格*/
? ? ? ? ? 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;
}
? ? ? ? /*使用偽元素制作導航列表項分隔線*/
? ? ? ? .nav li:after{
? ? ? ? ?content:"|";
? ? ? ? ?position:absolute;
? ? ? ? ?right:0;
? ? ? ? ?top:0px;
? ? ? ? ?background:linear-gradient(to bottom #f82f87,#B0363F,#f82f87);
? ? ? ? }
? ? ? ? /*刪除第一項和最后一項導航分隔線*/
? ? ? ? .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屬性的意思是：將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。(準確地說，應用此特性的元素呈現為內聯對象，周圍元素保持在同一行，但可以設置寬度和高度地塊元素的屬性)
所以就不用float:left了