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>
    
  • 相关阅读:
    [Linux] 设置系统时区
    [Python] 当猎头遇上 Guido van Rossum
    [Ubuntu] LightDM 轻量级桌面显示管理器
    [Java] Apache Ant 构建基础教程
    [Python] pip 简明指南
    .NET Core下的Spring Cloud——前言和概述
    福州首届.NET开源社区技术交流会圆满成功
    【福州活动】| "福州首届.NET开源社区线下技术交流会"(2018.11.10)
    使用CoreRT将.NET Core发布为Native应用程序
    使用.NET Core快速开发一个较正规的命令行应用程序
  • 原文地址:https://www.cnblogs.com/uduemc/p/4204344.html
Copyright © 2011-2022 走看看