<!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;
?/*制作圓*/
??????????/*制作導航立體風格*/
??????????
}
.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?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>我的意思是，放到瀏覽器中觀察，刪除li，其他子欄目往中間聚集，自己寫一個，就不是這樣自適應的。。。怎么實現的。
慕課網這導航案例怎么可以讓他li以中間為標準，往兩邊填充的呀
abc123456789def
2017-04-15 10:45:54
