伪元素写导航栏分隔符

来源：互联网发布：大家的日语知乎编辑：程序博客网时间：2024/05/05 07:24
<!doctype html><html lang="en"><head>    <meta charset="UTF-8"><title>CSS制作立体导航</title><link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css"><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;       <span style="color:#ff0000;">  background:linear-gradient(to top,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;</span>}/*使用伪元素制作导航列表项分隔线*/<span style="color:#ff0000;">.nav li:last-child{     background:none;</span>   }          /*：before :last 都是伪元素 ：hover之类的是伪类        /*删除第一项和最后一项导航分隔线*/.nav a,.nav a:hover{  color:#fff;  text-decoration: none;}</style></head><body><ul class="nav">    <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>
0 0