仿优酷PC页面部分布局案例 - html/css

Home > List of blog posts > 仿优酷PC页面部分布局案例

Blogger Information

Blog 13

fans 0

comment 0

visits 11104

Special Recommendation

More>

Related recommendations

总结

通过运用float 浮动clear清楚浮动 before在……之前 after在……之后，知道了如果简单的布局固定页面，初步了解框架思想，最大程度的复用。减少多余的代码。

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>优酷-这世界很酷！</title>

	<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;

		}*/
	</style>
</head>
<body>

	<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