优酷页面布局最终导航部分完善 - html/css

Home > List of blog posts > 优酷页面布局最终导航部分完善
Blogger Information
Blog 13
fans 0
comment 0
visits 11110
Special Recommendation
More>
Related recommendations
总结

通过这次课程，我学会了定位布局+浮动布局，学会了定位使用遮罩小技巧，以及3种导航方式，分别为下拉菜单，列表菜单，图标菜单。并且通过CSS做好排版。
通过li.class语法选择自身。
实例

<!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;}  /* 向左浮动*/
		.r {float: right;}
		.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: fixed;top:20px;left: 120px;width:100%;}
		/*logo部分*/

		.logo img {border: none;width: 120;height: 24px;}
		/*中间搜索部分*/
		.head_bt {margin-left:500px;position: relative;width: 400px;display: inline-block; }
 		.head_bt input {border:0px none;width: 390px;height: 30px;border-radius: 100px;background: rgba(234,234,234,0.5);outline:0 none;padding-left: 10px;}
		.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{margin-right: 300px;position: relative;}
		.beader_bt_r ul li {height:50px;text-align: center;margin:0px 10px 0px;font-size: 18px;}
		.beader_bt_r ul li a {color: #E5E5E5;}
		.beader_bt_r ul li i{color: #E5E5E5;}
		.beader_bt_r ul li:hover a {color: #35B5FF;}
		.beader_bt_r ul li:hover i {color: #35B5FF;}

		
		/*顶部左边列表导航*/
		.head_bt_r_li {
			/*定义宽度，高度未定义，根据内容变化*/
		width: 260px;background:rgba(0,0,0,0.5);position: absolute;top: 100px;right:100px;border-radius: 30px;  /*绝对定位 父级是轮播图*/
		}
		.head_bt_r_li ul li {width: 210px;margin-left: 20px;margin-top: 12px;   /* 定义每个li标签的宽度 */
			padding-left: 5px;font-size: 15px;border-bottom: 1px solid #ccc;   /*下边框线*/
		}
/*  a是行内标签，所以要变为block 宽度继承li的宽度。 文本超出隐藏并切取为。。。*/
		.head_bt_r_li ul li a {display:block;color: #aaa; padding-bottom: 15px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
		.head_bt_r_li ul li a:hover {font-size:18px; color:#fff;}
		.head_bt_r_li ul li:hover span {display: block;text-align: left;}  /*span是行内标签需要转为block独占一行。*/
		/*下拉框*/
     
		 						/*以父级定位标签为参照点，绝对定位。*/
		.beader_bt_r_rss_sub { position: absolute;top: 50px;left: 10px;width: 210px;height:80px;z-index: 2; background: #fff;display: none;}
		.beader_bt_r_rss_sub_sjx {border:7px solid; 
						/*上右下左*/	  /*设置边框粗细 实线*//*第三个参数是颜色*/
			border-color: transparent transparent #fff transparent;position: absolute;top:-14px;left:0px;
			/*边框颜色 边框做三角形 transparent 是透明的意思 只流下边框线，就变为了三角形。*/
		}
		.beader_bt_r_rss_sub li {color: #000;margin-top: 10px;}
		.beader_bt_r_run:hover .beader_bt_r_rss_sub {display: block; }  /*鼠标移上去显示下拉框*/
		.beader_bt_r_run {position: relative;}   /*下拉框父级 相对定位*/


	/*	顶部下面文字导航*/

.head_voltag li {width: 300px;float: left;}
.head_voltag a {width: 100px;display: inline-block;text-align: center;height: 40px;line-height: 40px;color: #7A7D82;}
.head_voltag span {display: inline-block;width: 2px;height: 70px;border-left: 1px solid #ccc;margin-top: 5px;float: left;}
/*文字导航图标设置区域!important 强制最高优先级*/				
.head_voltag_i {text-align: center;margin-top: 10px; width: 90px !important;margin-left: 30px;}
.head_voltag_i a{text-align: center;margin-top: ;}
li.head_voltag_i i {font-size: 28px;color: #ccc;}
/*li标签自身head_voltag_i ，同时满足li标签+class的意思。*/

	</style>
</head>
<body>

	<div class="headers">
		<div class="header_bg"><div class="bg"></div>
<div class="head_bt_r_li">
					<ul>
						<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
						<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
						<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
						<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
						<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
						<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
						<li style="border:none;"><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
					</ul>
					
				</div>
	</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 r">
					<ul>	
					<li class="beader_bt_r_run"><i class="fa fa-cart-plus " ><br><a href="" class=""><span>VIP</span></a></i>
						<div class="beader_bt_r_rss_sub">
							<span class="beader_bt_r_rss_sub_sjx"></span>
					<ul class="beader_bt_r_rss_sub_li">
						<li  style="height: 20px;margin-top: 10px;">菜单1</li>
						<li style="height: 20px;margin-top: 10px;">菜单2</li>
						<li style="height: 20px;margin-top: 10px;">菜单3</li>
						<li style="height: 20px;margin-top: 10px;">菜单4</li>
						<li style="height: 20px;margin-top: 10px;">菜单5</li>
						<li style="height: 20px;margin-top: 10px;">菜单6</li>
					</ul>
						</div>

				</li>
					<li><a href="" class=""><i class="fa fa-rss "><br><span>订阅</span></i>
					</a>
					</li>
					<li><a href=""><i class="fa fa-clock-o "><br><span>记录</span></i></a></li>
					<li><a href=""><i class="fa fa-arrow-up "><br><span>上传</span></i></a></li>
					<li><a href=""><i class="fa fa-tv " "><br><span>客户端</span></i></a></li>
					<li class="beader_bt_r_run"><a href=""><i class="fa fa-user-circle-o " style="font-size: 40px;margin-top: -2px;"></i></a>
						<div class="beader_bt_r_rss_sub">
							<span class="beader_bt_r_rss_sub_sjx"></span>
					<ul class="">
						<li style="height: 20px;margin-top: 10px;">菜单1</li>
						<li style="height: 20px;margin-top: 10px;">菜单2</li>
						<li style="height: 20px;margin-top: 10px;">菜单3</li>
						<li style="height: 20px;margin-top: 10px;">菜单4</li>
						<li style="height: 20px;margin-top: 10px;">菜单5</li>
						<li style="height: 20px;margin-top: 10px;">菜单6</li>
					</ul>
						</div>

					</li>
					</ul>
				</div>
						

				
				
			</div>

	</div>

  <!-- 头部文字导航 -->
  
<div class="contents">

<div class="content">
			<div class="head_voltag">
			<ul>
				<li class=""><a href="">剧集</a><a href="">电影</a><a href="">综艺</a><a href="">动漫</a><a href="">娱乐</a><a href="">生活</a></li>
				<span class="head_voltag_bd"></span>
				<li class=""><a href="">剧集</a><a href="">电影</a><a href="">综艺</a><a href="">动漫</a><a href="">娱乐</a><a href="">生活</a></li>
				<span class="head_voltag_bd"></span>
				<li class=""><a href="">剧集</a><a href="">电影</a><a href="">综艺</a><a href="">动漫</a><a href="">娱乐</a><a href="">生活</a></li>
				<span class="head_voltag_bd"></span>
				<li class=""><a href="">剧集</a><a href="">电影</a><a href="">综艺</a><a href="">动漫</a><a href="">娱乐</a><a href="">生活</a></li>
				<span class="head_voltag_bd"></span>
				<li class="head_voltag_i" ><i class="fa fa-feed "></i><br><a href="">优酷片库</a></li>
				<li class="head_voltag_i" "><i class="fa fa-bar-chart "></i><a href="">指数排行</a></li>
				<li class="head_voltag_i" "><i class="fa fa-angellist "></i><a href="">大鱼号精选</a></li>
				<li class="head_voltag_i" "><i class="fa fa-desktop "></i><a href="">下载应用</a></li>
			</ul>
			</div>
			
				
			</div>
		</div>
			<div class="clear"></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>
			<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：qualified

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