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>
    
  • 相关阅读:
    MySQL重置密码
    linux下自动备份脚本并上传到ftp服务器
    nginx配置
    WIFI防蹭网
    无线路由知识
    009汇编环境搭建
    008 计算机不会加法
    007计算机不会做加法
    006源码反码补码
    005有符号数和无符号数
  • 原文地址:https://www.cnblogs.com/uduemc/p/4204344.html
Copyright © 2011-2022 走看看