Home > Article > Web Front-end > 一个导航菜单_html/css_WEB-ITnose
一个导航菜单_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:13830browse
<!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; /*制作导航圆角*/ border-radius: 8px; /*制作导航立体效果*/ box-shadow: 0 7px 0 #ba4a45; } .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::before, .nav li::after{ content:""; position:absolute; top:14px; height: 25px; width: 1px; } .nav li::after{ right: 0; background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); } .nav li::before{ left: 0; background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a); } /*删除导航第一个导航项左边的分隔线*/ .nav li:first-child::before{ background: none; } /*删除导航最后一个导航右边的分隔线*/ .nav li:last-child::after{ background: none; } .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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：胡博君谈CSS3中的边框的各种效果_html/css_WEB-ITnoseNext article：css浏览器兼容问题集锦_html/css_WEB-ITnose