博客列表 >第三课 仿优酷页面

第三课 仿优酷页面

夜澜风的博客
夜澜风的博客原创
2019年03月14日 16:48:201178浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>优酷视频网站</title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;list-style: none;}
		.l{float: left;margin-right: 3px;}
		img{border-radius: 10px;}
		.clear{clear: both;}
		a{color: #000;text-decoration: none;}
		.contents{width: 1740px;margin: 0px auto;}
		.hot_tv{line-height: 70px;}
		.hot_tv ul{padding: 0 30px;}
		li img{width: 240px;height: 360px;}
		li{float: left;	}
		.mr{margin-right:10px; }
		.hg{line-height: 70px;}
		.big_img img{width: 100%;}
		.tv_img img{width: 240px;height: 130px;}
		.tv_img{width: 1740px;}
		.tv_img li{margin-bottom: 55px;}
		small {color: #999;}
		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);} 
		.hot_tv li a:hover {text-decoration: none;color:#2692FF;}   /*设置鼠标移上去的颜色,没有下划线*/
		.hot_tv li a:hover:after {content: "";background:#2692FF;border-radius: 10px;display: block;width: 20px;height: 3px;margin:-20px auto; }   
		/* :after 在……之后加上content内容(content参数必须要的) 画圆角   转换成区块   使他能用宽高参数,然后居中显示*/
	</style>
</head>
<body>
	<div class="contents">
		<div class="content">
			<div class="hot_tv">
				<h2>正在热播</h2>
			</div>
			<ul>
				<li class="l">
				<a href="">
				<img src="images/a.jpg" alt="">
				</a><br>
				<span>大冰小将 第一季</span><br>
				<small>千玺雷佳音冰雪大狂欢</small>
				</li>
				<li class="l">
				<a href="">
				<img src="images/b.jpg" alt="">
				</a><br>
				<span>大冰小将 第一季</span><br>
				<small>千玺雷佳音冰雪大狂欢</small>
				</li>
				<li class="l">
				<a href="">
				<img src="images/c.jpg" alt="">
				</a><br>
				<span>大冰小将 第一季</span><br>
				<small>千玺雷佳音冰雪大狂欢</small>
				</li>
				<li class="l">
				<a href="">
				<img src="images/d.jpg" alt="">
				</a><br>
				<span>大冰小将 第一季</span><br>
				<small>千玺雷佳音冰雪大狂欢</small>
				</li>
				<li class="l">
				<a href="">
				<img src="images/e.jpg" alt="">
				</a><br>
				<span>大冰小将 第一季</span><br>
				<small>千玺雷佳音冰雪大狂欢</small>
				</li>
				<li class="l">
				<a href="">
				<img src="images/f.jpg" alt="">
				</a><br>
				<span>大冰小将 第一季</span><br>
				<small>千玺雷佳音冰雪大狂欢</small>
				</li>
				<li class="l">
				<a href="">
				<img src="images/g.jpg" alt="">
				</a><br>
				<span>大冰小将 第一季</span><br>
				<small>千玺雷佳音冰雪大狂欢</small>
				</li>
			</ul>
			<div class="clear"></div>
		</div>
	<div class="content">
			<div class="hot_tv">
				<h2 class="l">剧集></h2>
				 <ul class="l">
					<li class="mr"><a href="">大陆剧</a></li>
					<li class="mr"><a href="">日韩剧</a></li>
					<li class="mr"><a href="">港台剧</a></li>
					<li class="mr"><a href="">英国美剧</a></li>
				</ul>
			<div class="clear"></div>
			</div>
			<ul>
				<li class="big_img mr">
				<a href="">
				<img src="images/tv.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
			</ul>
			<ul class="tv_img">
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
				<li>
				<a href="">
				<img src="images/tv1.jpg" alt="">
				</a><br>
				<span>瞰中国:宁夏</span><br>
				<small>低调的宁夏 美了四季</small>
				</li>
			</ul>
		</div>
	</div>

</body>
</html>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议