博客列表 >优酷浮动案例

优酷浮动案例

俞斌的博客
俞斌的博客原创
2019年03月14日 18:14:43537浏览

实例

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>优酷,这世界很酷</title>
	<link rel="icon" type="image/x-icon" href="static/images/1.ico">
	<style type="text/css">
		*{margin: 0;padding:0;}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
			color: #000;
		}
		.mr{
			margin-right: 10px;
		}
		.mt{
			margin-top: 20px;
		}
		.clear{
			clear: both;
		}
		.float_all{
			float: left;
		}
		#box{
			width: 1200px;
			margin: 0 auto;
		}
		.box-1{
			width: 100%;
			margin-top: 35px;
		}
		h2{
			line-height: 52px;
			margin-right: 15px;
		}
		.img_1{
			width: 162px;
			height: 240px;
		}
		.p2{
			font-size: 14px;
		}
		li a{
			font-size: 14px;
		}
		.p1{
			font-size: 16px;
			line-height: 52px;
		}
		.p1 a{
			margin-left: 15px;
		}
		.img_2{
			width: 394px;
			height: 280px;
		}
		.img_3{
			width: 190px;
			height: 108px;
		}
	</style>
</head>
<body>
	<div id="box">
		<div class="box-1">
			<h2>正在热播</h2>
			<ul>
				<li class="mr float_all">
					<a href="#"><img class="img_1" src="static/images/a.jpg"></a><br>
					<a href="#">瞰中国:宁夏</a>
					<p class="p2">低调的宁夏 美了四季</p>
				</li>
				<li class="mr float_all">
					<a href="#"><img class="img_1" src="static/images/b.jpg"></a><br>
					<a href="#">瞰中国:宁夏</a>
					<p class="p2">低调的宁夏 美了四季</p>
				</li>
				<li class="mr float_all">
					<a href="#"><img class="img_1" src="static/images/c.jpg"></a><br>
					<a href="#">瞰中国:宁夏</a>
					<p class="p2">低调的宁夏 美了四季</p>
				</li>
				<li class="mr float_all">
					<a href="#"><img class="img_1" src="static/images/d.jpg"></a><br>
					<a href="#">瞰中国:宁夏</a>
					<p class="p2">低调的宁夏 美了四季</p>
				</li>
				<li class="mr float_all">
					<a href="#"><img class="img_1" src="static/images/e.jpg"></a><br>
					<a href="#">瞰中国:宁夏</a>
					<p class="p2">低调的宁夏 美了四季</p>
				</li>
				<li class="mr float_all">
					<a href="#"><img class="img_1" src="static/images/a.jpg"></a><br>
					<a href="#">瞰中国:宁夏</a>
					<p class="p2">低调的宁夏 美了四季</p>
				</li>
				<li class="float_all">
					<a href="#"><img class="img_1" src="static/images/f.jpg"></a><br>
					<a href="#">瞰中国:宁夏</a>
					<p class="p2">低调的宁夏 美了四季</p>
				</li>
			</ul>
			<div class="clear"></div>
			<div class="box-1">
				<h2 class="float_all">剧集 ></h2>
				<p class="p1">
					<a href="#">最新</a>
					<a href="#">大陆剧</a>
					<a href="#">日剧</a>
					<a href="#">韩剧</a>
					<a href="#">美剧</a>
				</p>
				<div class="clear"></div>
				<ul class="float_all mr">
					<li><a href=""><img class="img_2" src="static/images/tv.jpg"></a></li>
					<a href="#">瞰中国:宁夏</a>
					<p class="p2">低调的宁夏 美了四季</p>
				</ul>
				<ul class="float_all">
					<li class="mr float_all">
						<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
						<a href="#">瞰中国:宁夏</a>
						<p class="p2">低调的宁夏 美了四季</p>
					</li>
					<li class="mr float_all">
						<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
						<a href="#">瞰中国:宁夏</a>
						<p class="p2">低调的宁夏 美了四季</p>
					</li>
					<li class="mr float_all">
						<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
						<a href="#">瞰中国:宁夏</a>
						<p class="p2">低调的宁夏 美了四季</p>
					</li>
					<li class="float_all">
						<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
						<a href="#">瞰中国:宁夏</a>
						<p class="p2">低调的宁夏 美了四季</p>
					</li>
				</ul>
				<ul class="float_all mt">
					<li class="mr float_all">
						<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
						<a href="#">瞰中国:宁夏</a>
						<p class="p2">低调的宁夏 美了四季</p>
					</li>
					<li class="mr float_all">
						<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
						<a href="#">瞰中国:宁夏</a>
						<p class="p2">低调的宁夏 美了四季</p>
					</li>
					<li class="mr float_all">
						<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
						<a href="#">瞰中国:宁夏</a>
						<p class="p2">低调的宁夏 美了四季</p>
					</li>
					<li class="float_all">
						<a href=""><img class="img_3" src="static/images/tv1.jpg"></a><br>
						<a href="#">瞰中国:宁夏</a>
						<p class="p2">低调的宁夏 美了四季</p>
					</li>
				</ul>		
			</div>
		</div>
	</div>
</body>
</html>

运行实例 »

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


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