用定位做的优酷顶部导航案例 - html/css

Home > List of blog posts > 用定位做的优酷顶部导航案例

Blogger Information

Blog 13

fans 0

comment 0

visits 11119

Special Recommendation

More>

Related recommendations

总结

定位 relative=相对定位 absolute=绝对定位 fixed=固定不受浏览器滚动影响。一般来说子绝父相 absolute 以父级定位标签为参照点，若没有找到就用浏览器做绝对定位脱离文档流；z-index 表示层级，值越大越高；relative 相对于自身位置的定位没有脱离文档流。另外还知道如何将字库拿来使用以及做下拉框的原理；

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>优酷-这世界很酷！</title>
	<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">

	<style type="text/css" media="screen">
		*{
			margin: 0px;
			padding: 0px;
		}
		a {color:#000;text-decoration: none;}
		li {list-style: none; float: left;}    /*取消li列表样式  并且向左浮动 浮动后自带区块属性*/
		li img:hover {box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);}   /*伪类鼠标移到图片的阴影效果 X y 模糊度 外延值 颜色*/ 
		.hot_tv img:hover {box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2);} 
		small {color: #B5B5B5;}  /*设置文字颜色*/
		.hotMenu li a:hover {text-decoration: none;color:#2692FF;}   /*设置鼠标移上去的颜色，没有下划线*/
		.hotMenu li a:hover:after {content: "";background:#2692FF;border-radius: 10px;display: block;width: 20px;height: 3px;margin: 0px auto; }   
		/* 这种并列写法需要一个:hover来激活， 单独用E:after 时不需要激活 在……之后加上content内容（content参数必须要的） 画圆角   转换成区块   使他能用宽高参数，然后居中显示*/
		.mr {margin-right:10px;}
		.mrt{margin-top: 10px;}
		.clear {clear:both;}  /*清楚两边的浮动*/
		.l {float: left;}  /* 向左浮动*/

		.contents {
			width: 1740px;
			margin: 10px auto 0px;   /*上下 左右  /  上下左右  / 上 左右 下/*/
		}
		.content {width: 100%;margin-top:10px;}
		.content_hot img {width: 235px;height: 360px;}
		.contenMenu h2 {
			height: 70px;
			line-height: 70px;
		}
		.hotMenu li {height: 20px;line-height: 20px;margin-left: 20px;margin-top:28px;}
/*		.hotMenu {background: red; display: block;width: 400px;height: 70px;}*/
		.tv_show {}
		.hot_tv >a > img {width:583px;height: 334px; }

		.hot_tv_UL img{ width: 270px;height: 139px; }
/*		.more {
			width: 82px;
			height: 139px;
			background: red;
			line-height: 139px;
			text-align: center;

		}*/
/*		头背部背景部分*/
		.headers {
			background: #A1735C;
			width: 100%;
			position: relative;

		}
		/*导航部分*/
/*		定位 relative=相对定位  absolute=绝对定位 fixed=固定 不受浏览器滚动影响。 一般来说 子绝父相   absolute 以父级定位标签为参照点，
		若没有找到就用浏览器做绝对定位 脱离文档流；z-index 表示层级，值越大越高；
		relative 相对于自身位置的定位  没有脱离文档流；*/
		/*轮播图和遮罩部分*/
		.header_bg {background: url(images/herdimg.jpg) no-repeat;width: 1664px;height: 520px;margin: 0px auto;position: relative;}
		.bg {background: url(images/bg.png) no-repeat;/*background-size:100% 100%*/;position: absolute;top: 0px;left: 0px;width: 1664px;height: 520px;}
		.header_menu {position: relative;top:20px;left: 0px;width:100%;}
		/*logo部分*/
		.log{float: left;}
		.logo img {border: none;width: 120;height: 24px;}
		/*中间搜索部分*/
		.head_bt {margin-left:500px;position: relative;width: 400px; }
 		.head_bt input {border:0px none;width: 400px;height: 30px;border-radius: 100px;background: rgba(234,234,234,0.5);outline:0 none;}
		.head_bt button {color:#FBDEB5;border: none;width:80px;height: 30px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;background: #B30702;position: absolute;top: 0px;right: 0px;outline:0 none;}
		/*outline复合属性。设置或检索对象外的线条轮廓*/
		/*右边图标部分*/
		.beader_bt_r{position: absolute;top: 0px;right: 0px;height: 55px;}
		.beader_bt_r ul li {width:60px;}
		.beader_bt_r ul li a {color: #E5E5E5;width: 60px;height: 80px;}

		.beader_bt_r ul li i:hover  {color: #35B5FF;}
		.beader_bt_r ul li i {position: relative;}
		.beader_bt_r ul li i span { font-size: 20px;position: absolute;width: 60px;left:-5px; }
		i{color: #E5E5E5;}
		
		.head_bt_r_li {
		width: 260px;height: 350px;background:rgba(0,0,0,0.5);position: absolute;top: 100px;right:100px;border-radius: 30px;
		}
		.head_bt_r_li ul{background:pink;margin-top: 10px;}
		.head_bt_r_li ul li {width: 210px;border-bottom: 1px solid #ccc;border-bottom-width: ;margin-left: 20px;
			height: 40px;line-height:40px;margin-bottom: 5px;padding-left: 5px;text-align: center;
		}
		.head_bt_r_li ul li a {color: #aaa; padding-bottom: 15px;}
		.head_bt_r_li ul li a:hover {font-size:18px;}
		/*下拉框*/
		.beader_bt_r_rss {position: relative;}
		.beader_bt_r_rss_sub { position: absolute;top: 50px;left: 0px;width: 210px;z-index: 2; background: #fff;display: none;}
		.beader_bt_r_rss_sub li {height: 30px;color: #000;margin-left: 10px;margin-top: 5px;}
		.beader_bt_r_1:hover .beader_bt_r_rss_sub {display: block;}  /*鼠标移上去显示下拉框*/
	</style>
</head>
<body>

	<div class="headers">
		<div class="header_bg">
			<div class="bg"></div>
			<div class="header_menu"><div class="logo l"><img src="images/logo.png" alt=""></div>
				<div class="head_bt">
					<form action="demo_submit" method="get" accept-charset="utf-8">
				
					<input type="text" name="" value="">
					<button>搜索</button>

					</form>
				</div>
				<div class="beader_bt_r">
					<ul>	
					<li><a href="" class="beader_bt_r_1"><i class="fa fa-cart-plus fa-2x" ><br><span>VIP</span></i>
					<ul class="beader_bt_r_rss_sub">
						<li>菜单1</li>
						<li>菜单2</li>
						<li>菜单3</li>
						<li>菜单4</li>
						<li>菜单5</li>
						<li>菜单6</li>
					</ul></a></li>
					<li><a href="" class=""><i class="fa fa-rss fa-2x"><br><span>订阅</span></i>
					</a>
					</li>
					<li><a href=""><i class="fa fa-clock-o fa-2x"><br><span>记录</span></i></a></li>
					<li><a href=""><i class="fa fa-arrow-up fa-2x"><br><span>上传</span></i></a></li>
					<li><a href=""><i class="fa fa-tv fa-2x" "><br><span>客户端</span></i></a></li>
					<li style="margin-left: 15px;><a href=""><i class="fa fa-user-circle-o fa-3x" ></i></a></li>
					</ul>
				</div>

				<div class="head_bt_r_li">
					<ul>
						<li><a href="" >李全权在PHP中文网学习</a></li>
						<li><a href="" >李全权在PHP中文网学习</a></li>
						<li><a href="" >李全权在PHP中文网学习</a></li>
						<li><a href="" >李全权在PHP中文网学习</a></li>
						<li><a href="" >李全权在PHP中文网学习</a></li>
						<li><a href="" >李全权在PHP中文网学习</a></li>
						<li><a href="" >李全权在PHP中文网学习</a></li>
					</ul>
					
				</div>
				
			</div>
	</div>


	</div>

	<div class="contents">
		<div class="content">
			<div class="contenMenu">
			<h2>正在热播</h2>
			</div>
			<div class="content_hot">
			<ul>
				<li class="mr libox"><a href=""><img src="images/a.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
				<li class="mr"><a href=""><img src="images/b.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
				<li class="mr"><a href=""><img src="images/c.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
				<li class="mr"><a href=""><img src="images/d.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
				<li class="mr"><a href=""><img src="images/e.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
				<li class="mr"><a href=""><img src="images/f.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
				<li class=""><a href=""><img src="images/g.jpg" alt="hot_tv"><br><span>白蛇：缘起</span></a><br><small>白蛇前世爱情凄美动人</small></li>
			</ul>
			</div>
			
				
			</div>
			<div class="clear"></div>
		<div class="content">
			<div class="contenMenu">
				<h2 class="l mr">剧集 </h2>
				<ul class="hotMenu l">
					<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>
				</ul>
			</div>
			<div class="clear">
			<div class="tv_show">
				<div class="hot_tv l mr">
					<a href=""><img src="images/tv.jpg" alt=""><br><span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
				</div>
				<div class="hot_tv_UL">
				<ul>
					<li class="mr"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
					<li class="mr"><a href=""><img src="images/tv2.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
					<li class="mr"><a href=""><img src="images/tv3.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
					<li class=""><a href=""><img src="images/tv4.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<!-- 					<li class="mr more"><a href=""><b>更多>></b></li> -->
				</ul>
				</div>
				<div class="hot_tv_UL">
					<ul class="">
					<li class="mr mrt"><a href=""><img src="images/tv5.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
					<li class="mr mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
					<li class="mr mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
					<li class=" mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<!-- 					<li class="mr more"><a href=""><b>更多>></b></li> -->
					</ul>
				</div>
				
			</div>
			
		</div>
		<div class="clear"></div>
		
	
	</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

新闻列表样式跳转

2019-03-12 14:14:51