Html + Css3 制作酷炫的导航栏

主要亮点:

1 ul 水平显示

2 li 去掉圆点

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

4 li控制边框样式

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

6 更改颜色透明度

7 DIV制作边框阴影

先看效果图:

实现代码:

<!doctype html>
<html lang="en">
 <head>
  <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>

 </head>

 <body>

	<div id="Logo">
		<ul>
			<li class="first">
				<a href="#">网址<a>

				<ul>
					<li>
						<a href="http://www.baidu.com">百度</a>
					</li>

					<li>
						<a href="http://www.sina.com">新浪</a>
					</li>

				</ul>
			</li>

			<li>
				<a href="#">新闻<a>
			</li>

			<li>
				<a href="#">视频<a>
			</li>

			<li>
				<a href="#">音乐<a>
			</li>

			<li>
				<a href="#">地图<a>
			</li>

			<li>
				<a href="#">问问<a>
			</li>

			<li class="last" style="border:none;">
				<a href="#">关于<a>
			</li>
		</ul>

	</div>

 </body>
</html>

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

时间: 2024-10-13 00:24:36

Html + Css3 制作酷炫的导航栏的相关文章

使用CSS3制作酷炫仿苹果複選框

1.CSS3 兄弟选择符(E~F) 2.CSS :after 选择器 3.神奇的css属性pointer-events 课程链接: http://www.gbtags.com/gb/gbliblist/136.htm

使用CSS3制作酷炫防苹果复选框 自行测试!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background:#eee; } .lbl{ /*复选框背景色*/ height:20px; width:50px; display:block;/*元素将显示为块级元素*/ ba

css3开发酷炫滑动导航

Android 实现酷炫的顶部栏

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,它是为了Material Design设计的App Bar,支持手势滑动操作的,不过经常与Toolbar.CoordinatorLayout以及CollapsingToolbarLayout等一起配合使用,在说到AppBarLayout之前,我们先简单学习一下Toolbar.和往常一样,主要还是想总结一下我在学习过程中的一些笔记以及一些需要注意的地方. 一.Toolbar Toolbar是在 Androi

玩转AppBarLayout,更酷炫的顶部栏

我的简书同步发布:玩转AppBarLayout,更酷炫的顶部栏 上一篇文章<CoordinateLayout的使用如此简单 >对CoordinateLayout的使用做了讲解,今天我们再讲解常常与其一起使用的几个View:AppBarLayout.CollapsingToolbarLayout以及Toolbar.一下子出现3个陌生的View,是不是觉得很慌张~,很多人都写了这几个布局的使用,但是他们却没有有针对性的单独讲解每个View的作用以及如何使用,我看的很多文章都是一上来就把AppBar

巧妙使用checkbox制作纯css动态导航栏

前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked 属性.巧妙地制作导航栏 结果: 我们主要制作成这样这样的的导航栏: 首先.我们写出相对的html  由于时间问题.svg没有处理到类中.所以这里给出svg的空标签.大家如果想看效果.可以到我的git里面fork一份 <div class="nav-child"> <in

css3实现酷炫的3D盒子翻转效果

简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒子,代码如下: //左面 .pic2{ transform:rotateY(90deg); //沿y轴翻转90度 transform-origin:right; //以右边为轴 } //前面 .pic6{ transform:translateZ(100%); //垂直屏幕向外移动立方体的长度 }

tree.js 制作酷炫照片墙

原创hangGe0111 最后发布于2019-03-28 16:10:35 阅读数 561 收藏展开1.tree.js 是一个用来 制作流畅效果,如果学习的比较深入的话,用来做 游戏 或者 动画片 都是可以的,是一个很不错的js插件: 2.使用教程参考 2.1  http://www.hewebgl.com/article/articledir/1  (比较推荐) 这是一个中文网站,资料也比较齐全 2.2  https://techbrood.com/threejs/docs/#%E4%BD%B

小试牛刀1:制作一个简单的导航栏页面

页面效果大概目标:http://www.daxues.cn/forum.php 一.布局 从页面来看,可以分为三个部分,第一部分是导航栏,第二部分是有“大学生论坛”字样的蓝色部分,余下的是第三部分也可以分为二部分:搜索栏和主要内容区域:而主要内容区域又可分为:导航栏.主体.底部. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT