实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优酷-这世界很酷</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<!-- css已写入css文件，用外部样式 -->
<style type="text/css">
*{margin: 0;padding: 0;}
.clear{clear:both;}
.main{width:1745px;margin:0 auto;}
.main_1{width: 100%;margin-top: 20px;}
.main_r{line-height:70px;}
.m{margin-right: 9px;margin-bottom: 8px}
.main_t img{width:240px;height:360px;}
h2{font-weight: 200;font-size:26px;}
li{list-style:none;float:left}
a{text-decoration:none;color:#000;}
p{color:#ccc;font-size:12px;margin-top:5px;}
/* .main_2{width:100%;height:auto;margin-top:200px;}*/
.main_j{line-height: 70px;}
.main_j span{margin-right:15px;}
.main_j h2{float:left;margin-right: 20px;}
.main_t1 img{height: 140px;width: 240px;}
.header{width:100%;margin:0 auto;height: 520px;background:#b3b7c2;position:relative;/*background: url(static/images/background.png);*/}
.bg img{height:520px;margin-left: 250px}
/* .bg{position:relative;left:250px;top:0;}*/
.logo{position:absolute;top:15px;left:100px;}
.search{position:absolute;top:15px;left:700px;}
.search input{width: 500px;height: 40px;border:none;border-radius:100px;background: rgba(234,234,234,0.4);}
.search button{width: 90px;height: 40px;border:none;border-top-right-radius:100px;border-bottom-right-radius:100px;background:#B30702;color:white;position:absolute;left:410px;top:0;border:none;}
.font{color:#E4B03F;position:absolute;top:15px;right:100px;font-size:20px;font-weight:600;}
.font span{font-size:12px;position:relative;top:-8px;}
.font li{margin-right: 30px;}
.size{color:#F7EDED;font-weight:400;}
.menu{width: 220px;height:335px;background: rgba(32,32,32,0.65);position:absolute;top:120px;right: 80px}
.menu li{color:#ccc;margin:10px}
</style>
</head>
<body>
<div class="header">
<div class="backgroung"></div>
<div class="bg">
<img src="static/images/bg.jpg">
</div>
<div class="logo">
<a href="http://www.youku.com">
<img src="static/images/logo.png">
</a>
</div>
<div class="search">
<form action="" method="" class="l">
<input type="text" name="">
<button>全网搜</button>
</div>
<div class="font">
<ul>
<li>
<i class="fa fa-diamond"></i><br>
<span>VIP</span>
</li>
<li>
<i class="fa fa-diamond"></i><br>
<span class="size">订阅</span>
</li>
<li>
<i class="fa fa-diamond"></i><br>
<span class="size">记录</span>
</li>
<li>
<i class="fa fa-diamond"></i><br>
<span class="size">上传</span>
</li>
<li>
<i class="fa fa-diamond"></i><br>
<span class="size">客户端</span>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
都挺好：明玉复仇超解气！
</li>
<li>
都挺好：明玉复仇超解气！
</li>
<li>
都挺好：明玉复仇超解气！
</li>
<li>
都挺好：明玉复仇超解气！
</li>
<li>
都挺好：明玉复仇超解气！
</li>
<li>
都挺好：明玉复仇超解气！
</li>
<li>
都挺好：明玉复仇超解气！
</li>
</ul>
</div>
</div>
<div class="main"><!-- 全局css -->
<div class="main_1"><!-- 热播区域布局 -->
<div class="main_r"><!-- 热播文字布局 -->
<h2>正在热播</h2>
</div>
<ul class="main_t">
<li class="m">
<a href="" target="_blank">
<img src="static/images/b.jpg"><br>
<span>“大”人物</span>
</a>
<p>王千源深挖强拆案真相</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/b.jpg"><br>
<span>“大”人物</span>
</a>
<p>王千源深挖强拆案真相</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/b.jpg"><br>
<span>“大”人物</span>
</a>
<p>王千源深挖强拆案真相</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/b.jpg"><br>
<span>“大”人物</span>
</a>
<p>王千源深挖强拆案真相</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/b.jpg"><br>
<span>“大”人物</span>
</a>
<p>王千源深挖强拆案真相</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/b.jpg"><br>
<span>“大”人物</span>
</a>
<p>王千源深挖强拆案真相</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/b.jpg"><br>
<span>“大”人物</span>
</a>
<p>王千源深挖强拆案真相</p>
</li>
</ul>
<div class="clear"></div>
</div>
<!-- 剧集开始 -->
<div class="main_j"><!-- 剧集文字布局 -->
<h2>剧集 > </h2>
<span>最新</span>
<span>大陆剧</span>
<span>日韩剧</span>
<span>港台剧</span>
<span>英美剧</span>
<div class="clear"></div>
</div>
<ul>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
</ul>
<div class="main_t1">
<ul>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="m">
<a href="" target="_blank">
<img src="static/images/tv1.jpg" ><br>
<span>神盾局特工 1-3季</span>
</a><br>
<p>漫威英雄筋肉集结</p>
</li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例