实例
<!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; float: left;}
a{color: #000;text-decoration: none;}
.clear{clear:both;}/*清除浮动*/
.mr{margin-right: 8px;}
.l{float: left;} /*左浮动*/
.contents{
width: 1200px;
margin: 0 auto;
}
.content{
width: 100%;
margin-top: 8px;
}
.conetntUL{
line-height: 100px;
}
.hot_tv img{
width: 190px;
height: 240px;
}
.tab li{margin-right: 20px;}
.tv_show img{
width: 390px;
height: 280px;
}
.tv_shouimg img{width:190px;height: 110px; }
.tv_tab{width: 800px;}
.tv_tab li{margin: 0 3px 15px;}
.wj_shouimg img{width: 190px;height: 110px;}
.ads1 img{width: 1200px;height: 100px;}
li small{color: #999999;}
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="contentUL">
<h2>正在热播</h2>
</div>
<ul class="hot_tv">
<li class="mr">
<a href="">
<img src="static/images/a.jpg"><br>
<span>王牌对王牌 第四季</span>
</a><br>
<small>中国最红王牌大PK</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/b.jpg"><br>
<span>非诚勿扰 2019</span>
</a><br>
<small>孟非把脉国民婚姻大事</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/c.jpg"><br>
<span>遇见你真好 第一季</span>
</a><br>
<small>单身青年的相识相知</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/d.jpg"><br>
<span>我们在行动 第三季</span>
</a><br>
<small>家乡情结结合精准扶贫</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/e.jpg"><br>
<span>偶像</span>
</a><br>
<small>独立音乐系纪录长片</small>
</li>
<li>
<a href="">
<img src="static/images/f.jpg"><br>
<span>小猪佩奇 第六季</span>
</a><br>
<small>小猪佩奇日常生活趣事</small>
</li>
</ul>
</div>
<div class="content">
<div class="contentUL">
<h2 class="l mr">剧集 ></h2>
<ul class="tab l">
<li><a href="">最新</li>
<li><a href="">大陆剧</li>
<li><a href="">日韩剧</li>
<li><a href="">港台剧</li>
<li><a href="">英美剧</li>
</ul>
<div class="clear"></div>
</div>
<div class="tv_show">
<div class="big_show mr l">
<a href="">
<img src="static/images/tv.jpg" style="width:390;height:280px;"><br>
<span>高岭之花</span>
</a><br>
<small>石原里美霸气倒追丑男</small>
</div>
<ul class="tv_tab l">
<li class="tv_shouimg">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>爱情重跑</span>
</a><br>
<small>古川雄辉爱上失忆设计师</small>
</li>
<li class="tv_shouimg">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>有喜欢的人</span>
</a><br>
<small>天才主厨恋上失业少女</small>
</li>
<li class="tv_shouimg">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>黑皮手册</span>
</a><br>
<small>清纯小妹变身世纪恶女</small>
</li>
<li class="tv_shouimg">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>非自然死亡</span>
</a><br>
<small>必看！豆瓣9.2分神剧</small>
</li>
<li class="tv_shouimg">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>终结一吻</span>
</a><br>
<small>山崎贤人遭神秘人“吻杀</small>
</li>
<li class="tv_shouimg">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>正义之凛</span>
</a><br>
<small>吉高由里子挑战检察官</small>
</li>
<li class="tv_shouimg">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>岌岌可危酒店！</span>
</a><br>
<small>老字号酒店的重生</small>
</li>
<li class="tv_shouimg">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>奶酪陷阱</span>
</a><br>
<small>腹黑学长爆破你的少女心</small>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="contents">
<div class="content">
<div class="contentUL">
<h2>超级网剧</h2>
<ul class="tv_tabb mr l">
<li class="wj_shouimg mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>天网行动</span>
</a><br>
<small>朱一龙制服魅力袭击而来</small>
</li>
<li class="wj_shouimg mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>失控</span>
</a><br>
<small>俩绑匪为争夺赎金反目厮杀</small>
</li>
<li class="wj_shouimg mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>寻找倾城时光</span>
</a><br>
<small>假灰姑娘巧遇霸道王子</small>
</li>
<li class="wj_shouimg mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>万万没想到 第二季</span>
</a><br>
<small>无节操王大锤华丽归来</small>
</li>
<li class="wj_shouimg mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>大波</span>
</a><br>
<small>郑凯韩雯雯上演老成都苦恋故事</small>
</li>
<li class="wj_shouimg mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>我与你的光年距离Ⅱ</span>
</a><br>
<small>痴情神仙男友 为爱不顾代价</small>
</li>
</div>
<div class="clear"></div>
<div class="contents">
<div class="content">
<div class="ads1">
<li class="mr l">
<a href="">
<img src="static/images/ads1.jpg"><br>
</a>
</li>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
