zoukankan      html  css  js  c++  java
  • 一个导航菜单

    <!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{
    			  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;
    			   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>
    
  • 相关阅读:
    Openstack API 开发 快速入门
    virtualBox虚拟机到vmware虚拟机转换
    使用Blogilo 发布博客到cnblogs
    Openstack Troubleshooting
    hdoj 1051 Wooden Sticks(上升子序列个数问题)
    sdut 2430 pillars (dp)
    hdoj 1058 Humble Numbers(dp)
    uva 10815 Andy's First Dictionary(快排、字符串)
    sdut 2317 Homogeneous squares
    hdoj 1025 Constructing Roads In JGShining's Kingdom(最长上升子序列+二分)
  • 原文地址:https://www.cnblogs.com/uduemc/p/4204344.html
Copyright © 2011-2022 走看看