求教十天精通CSS3 5-5練習題 導航分割線做法？
地址http://www.xianlaiwan.cn/code/1881
試過幾種做法始終沒有跟參考圖片一模一樣的，請教誰能做的一樣好。像是圓角一樣
EastEgg
2016-08-16
2 回答
舉報
0/150
提交
取消
2016-12-12
為什么
/*使用偽元素制作導航列表項分隔線*/
? ? ? ? .nav li:after{
? ? ? ? ? ? content:"";
? ? ? ? ? ? ?position:absolute;
? ? ? ? ? ? ?right:0px;
? ? ? ? ? ? ?top:20px;
? ? ? ? ? ? ?height:15px;
? ? ? ? ? ? ?width:1px;
? ? ? ? ? ? ?background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87);
? ? ?}
top:20px;這個是根據什么的出來的值？
2016-08-17
<!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 li:after{
? ? ? ? ? ? content:"";
? ? ? ? ? ? ?position:absolute;
? ? ? ? ? ? ?right:0px;
? ? ? ? ? ? ?top:20px;
? ? ? ? ? ? ?height:15px;
? ? ? ? ? ? ?width:1px;
? ? ? ? ? ? ?background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87);
? ? ?}
? ? ? ? /*刪除第一項和最后一項導航分隔線*/
? ? ? ? .nav li:first-child:after{width:0;
? ? ? ? height:0;}
? ? ? ? .nav li:last-child:after{
? ? ? ? ? ? width:0;
? ? ? ? ? ??
? ? ? ? }
.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>