实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优酷-这世界真酷</title>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style>
*{margin: 0;padding: 0;}
.quanju{width: 1740px;margin: 0 auto;}
H2{line-height:70px;font-size: 26px;font-weight: 200;}
li{list-style: none;}
.buju img{width:240px;height:360px}
a{color: #000;text-decoration: none;}
p{color:#c7c5c5;margin-top:5px;font-size:12px;margin-bottom:5px}
.buju{float:left;margin-right:8px}
.clear{clear:both}
.hjubu{float:left;margin-right:30px}
.xiaju{float:left;margin-right:20px;}
.gaodu{line-height:70px}
.diju{float:left;margin-right:8px;}
.zdiju{float:left;margin-right:8px;}
.zdiju img{width: 240px;height: 141px;}
</style>
</head>
<body>
<div class="quanju">
<H2>正在热播</H2>
<ul>
<li class="buju"><a href="https://v.youku.com/v_show/id_XNDA5NDgxNzQxNg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_blank">
<img src="static/images/a.jpg"><br>
<span>瞰中国：宁夏</span><br>
</a>
<p>低调的宁夏 美了四季<p></li>
<li class="buju"><a href="https://v.youku.com/v_show/id_XNDA5NDgxNzQxNg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_blank">
<img src="static/images/b.jpg"><br>
<span>瞰中国：宁夏</span><br>
</a>
<small><p>低调的宁夏 美了四季<p></small></li>
<li class="buju"><a href="https://v.youku.com/v_show/id_XNDA5NDgxNzQxNg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_blank">
<img src="static/images/c.jpg"><br>
<span>瞰中国：宁夏</span><br>
</a>
<small><p>低调的宁夏 美了四季<p></small></li>
<li class="buju"><a href="https://v.youku.com/v_show/id_XNDA5NDgxNzQxNg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_blank">
<img src="static/images/d.jpg"><br>
<span>瞰中国：宁夏</span><br>
</a>
<small><p>低调的宁夏 美了四季<p></small></li>
<li class="buju"><a href="https://v.youku.com/v_show/id_XNDA5NDgxNzQxNg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_blank">
<img src="static/images/e.jpg"><br>
<span>瞰中国：宁夏</span><br>
</a>
<small><p>低调的宁夏 美了四季<p></small></li>
<li class="buju"><a href="https://v.youku.com/v_show/id_XNDA5NDgxNzQxNg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_blank">
<img src="static/images/f.jpg"><br>
<span>瞰中国：宁夏</span><br>
</a>
<small><p>低调的宁夏 美了四季<p></small></li>
<li class="buju"><a href="https://v.youku.com/v_show/id_XNDA5NDgxNzQxNg==.html?spm=a2ha1.12325017.m_4846.5~5!2~5~5~5~5~A" target="_blank">
<img src="static/images/g.jpg"><br>
<span>瞰中国：宁夏</span><br>
</a>
<small><p>低调的宁夏 美了四季<p></small></li>
<div class="clear"></div>
</ul>
<ul class="gaodu">
<h2 class="hjubu">剧集 > </h2>
<li class="xiaju">最新</a></li>
<li class="xiaju">大陆剧</li>
<li class="xiaju">港台剧</li>
<li class="xiaju">日韩剧</li>
<li class="xiaju">欧美剧</li>
</ul>
<div class="clear"></div>
<ul>
<li class="diju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<li class="zdiju">
<a href="https://v.youku.com/v_nextstage/id_bb17711abb9811e296da.html?spm=a2ha1.12325017.m_2556_c_9014.5~5~5~5~A" target="_blank">
<img src="static/images/tv1.jpg"><br>
<span>神盾局特工 1-3季</span></a><br>
<p>漫威英雄筋肉集结</p>
</li>
<div class="clear"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例