Home > Web Front-end > HTML Tutorial > Html + Css3 制作酷炫的导航栏_html/css_WEB-ITnose

Html + Css3 制作酷炫的导航栏_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:36:29
Original
1476 people have browsed it

主要亮点:

  1 ul 水平显示

  2 li 去掉圆点

  3 li中字体水平、竖直居中

  4 li控制边框样式

  5 使用html + css3 渐变画图 制作背景图片

  6 更改颜色透明度

  7 DIV制作边框阴影

先看效果图:









实现代码:

   <meta charset="UTF-8"> <!----编码----->  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="黄涛">  <meta name="Keywords" content="关键字,搜索引擎">  <meta name="Description" content="描述语言">  <title>案例</title>	<style type="text/css">		*{ margin:0;padding:0; }		body{background:url("images/bg_title.jpg") repeat-x,url("images/bg.jpg");}				#Logo{			width:895px;height:45px;			/*margin:上下 左右*/			margin:50px auto;			border-radius:10px;			/*html + css3 渐变画图 */		        background-image:-webkit-linear-gradient(rgba(41,41,41,0.75) 0% ,rgba(54,54,54,0.72) 50%,rgba(24,23,23,0.94) 51%);			box-shadow:1px 1px 33px #fff;/*设计阴影的*/		}		#Logo ul li		{			width:127px; height:45px;			list-style:none;/*去掉圆点*/			float:left;/*水平显示*/			color:white;/* #fff */			font-size:18px;			font-family:"微软雅黑";			text-align:center;			line-height:45px;/* 行高跟 高度一致时,竖直居中*/			border-right:1px solid #000;/*右边框*/		}				#Logo ul li a		{			color:white;/* #fff */			font-size:18px;			font-family:"微软雅黑";			text-decoration:none;		}				#Logo ul li:hover		{			background:rgba(10,5,5,0.45);		}				#Logo ul li.first:hover		{			border-radius:10px 0px 0px 10px;/*左上 左下 圆弧显示 */		}				#Logo ul li.last:hover		{			border-radius:0px 10px 10px 0px;/*右上 右下 圆弧显示 */		}		#Logo ul li ul li 		{			border:none;			border-top:1px solid #989898;			background:rgba(10,5,5,0.45);/*颜色透明度 */			border-radius:10px;					}		#Logo ul li ul		{			display:none;/*不显示*/		}		#Logo ul li ul li:hover		{			background:rgba(10,5,5,0.8);/*颜色透明度 */			border-radius:10px;		}				#Logo ul li:hover ul		{			display:block;			-webkit-animation:roll 1s ease;/*roll 旋转名称,1s旋转效果 */		}				@-webkit-keyframes roll /*roll旋转名称与上面一致*/		{			0% {-webkit-transform:rotate(0deg);}			100% {-webkit-transform:rotate(360deg);}		}			</style>  	<div id="Logo">		<ul>			<li class="first"> 				<a href="#">网址</a><a>								<ul>					<li>						<a href="http://www.baidu.com">百度</a>					</li>					<li>						<a href="http://www.sina.com">新浪</a>					</li>				</ul>			</a>
</li>			<li> 				<a href="#">新闻</a><a>			</a>
</li>			<li> 				<a href="#">视频</a><a>			</a>
</li>			<li> 				<a href="#">音乐</a><a>			</a>
</li>			<li> 				<a href="#">地图</a><a>			</a>
</li>			<li> 				<a href="#">问问</a><a>			</a>
</li>			<li class="last" style="border:none;"> 				<a href="#">关于</a><a>			</a>
</li>		</ul>	</div>    
Copy after login




版权声明:本文为博主原创文章,未经博主允许不得转载。

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template