总结
需要有框架思想，多复用代码，减少冗余。
遇到的多数布局问题都是像素大小
class命名需要简单易懂
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>优酷-这世界很酷</title> <link rel="icon" type="image/x-icon" href="http://gw.alicdn.com/tfs/TB1ZvwSycbpK1RjSZFyXXX_qFXa-48-48.ico"> <style type="text/css"> *{ margin: 0; padding: 0; } .clear{ clear: both; } a{ color: black; text-decoration: none; } li{ list-style: none; float: left; } .mr{ margin-right: 7px; } .contents{ width: 1740px; margin: 0 auto; } .content{ width: 100%; margin-top: 30px; } .l{ float: left; } .r{ float: right; } .content_ul{ line-height: 70px; } .tv_table img{ width:240px; height:360px; } .table li{ margin-right: 25px; } .big_show img{ width: 490px; height: 336px; } .tv_tab img{ width: 240px; height: 135px; } small{ font-size: 12px; color: #A6B5D7; } .ad img{ margin-top:50px; } </style> </head> <body> <div class="contents"> <div class="content"> <dir class="content_ul"> <h2>正在热播</h2> </dir> <ul class="tv_table"> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-03-12/9db52e9a8480b3bc16751062a326571a.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr"> <a href=""> <img src="http:////ykimg.alicdn.com/develop/image/2019-03-13/ddd05e5cfe32e1e1786311aa077a0945.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr"> <a href=""> <img src="http://r1.ykimg.com/050E00005C3ECD3B8B7774799E07D7CA?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr"> <a href=""> <img src="http://r1.ykimg.com/050E00005C39C28B859B5EEFD006DEBD?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr"> <a href=""> <img src="http://r1.ykimg.com/050E00005C662F3FADB185E088068403?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr"> <a href=""> <img src="http://r1.ykimg.com/050E00005C4282F9859B5EF597032529?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-03-12/9db52e9a8480b3bc16751062a326571a.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> </ul> </div> <div class="clear"></div> <div class="content"> <div class="content_ul"> <h2 class="l mr">剧集 ></h2> <ul class="table l"> <li><a href="">最新</a></li> <li><a href="">大陆剧</a></li> <li><a href="">日韩剧</a></li> <li><a href="">港台剧</a></li> <li><a href="">英美剧</a></li> </ul> </div> <div class="clear"></div> <div class="tv_show"> <div class="big_show l mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-03-12/a53156300427978ce4ab24958bcc455f.jpg"><br> <span>一站到底·马失前蹄</span> </a><br> <small>熊汝疆"太秀"失误李好痛惜</small> </div> <ul class="tv_tab l"> <li class="mr"> <a href=""> <img src="http:////r1.ykimg.com/050C00005BF76597ADC311C30C07A52F?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>锋味2018</span> </a><br> <small>谢霆锋携众星挑逗味蕾</small> </li> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-02-24/072c72227f8d262575490385b2747c95.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>重量级改变·男神回归</span> </a><br> <small>小伙甩肉56斤重拾型男身份</small> </li> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-03-03/e8e47439b201e8bd4fdd612c45141066.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>一起来跳舞·燃烧卡路里</span> </a><br> <small>金星学跳肚皮舞首秀零失误</small> </li> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2018-12-28/b0f9b07a3c94a5caed40a0d2ee9dfdd2.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>爱情保卫战·女强男弱</span> </a><br> <small>飞着去上班?摩托车上天啦!</small> </li> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-02-27/f724e81d5fa6051176dd6a64132f63b1.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>侣行·地球之极</span> </a><br> <small>“罪恶之城” 双面底特律</small> </li> </ul> <ul class="tv_tab l"> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-03-10/e65f668672d0dae0d13126caf9bb165c.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>可凡倾听·用身体作画</span> </a><br> <small>服!沈伟大赞华晨宇实力</small> </li> <li class="mr"> <a href=""> <img src="http:////ykimg.alicdn.com/develop/image/2019-03-09/63bade599f0c9082f6f8f0c2669a3ad3.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>喝彩中华·假声男高音</span> </a><br> <small>花鼓戏版<卷珠帘>唱呆霍尊</small> </li> <li class="mr"> <a href=""> <img src="http:////ykimg.alicdn.com/develop/image/2019-03-08/42d53ced4cbfe7f7d802a16ab07bd4be.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>秘境不思溢·探秘云南</span> </a><br> <small>壮观！世纪景观元阳梯田</small> </li> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-03-02/1f217b778247e67eaaedfa7c184833db.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>创业中国人·接地气</span> </a><br> <small>耿直老板因爱吃下海做凤爪</small> </li> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-03-07/a709cd44dd58ad43a64b53cd3b0307d9.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>群英会·蹬技家庭</span> </a><br> <small>杂技家庭轮番上阵秀高超绝技</small> </li> </ul> </div> </div> <div class="clear"></div> <div class= content> <div class="content_ul"> <h2 class="mr">超级网剧</h2> </div> <div class="tv_show"> <ul class="tv_tab l"> <li class="mr"> <a href=""> <img src="http:////ykimg.alicdn.com/develop/image/2019-03-12/14b15f09ba7c37b8aedd644462ced631.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>天网行动</span> </a><br> <small>朱一龙制服魅力袭击而来</small> </li> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-03-13/5175367fc6ccb65d24bfc1daf65d77c3.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>失控</span> </a><br> <small>俩绑匪为争夺赎金反目厮杀</small> </li> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-03-13/5175367fc6ccb65d24bfc1daf65d77c3.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>寻找倾城时光</span> </a><br> <small>假灰姑娘巧遇霸道王子</small> </li> <li class="mr"> <a href=""> <img src="http://r1.ykimg.com/050C000059ED84AD859B5D8F64015EEE?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>优叻个秀 第一季</span> </a><br> <small>互联网首档喜剧栏目剧</small> </li> <li class="mr"> <a href=""> <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190117/abc5ca29e322ba2516a3203aac392e82.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>大波</span> </a><br> <small>郑凯韩雯雯上演老成都苦恋故事</small> </li> <li class="mr"> <a href=""> <img src="http://ykimg.alicdn.com/develop/image/2019-01-07/5548aaf86815f8d78638f0b5856065bc.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>我与你的光年距离Ⅱ</span> </a><br> <small>痴情神仙男友 为爱不顾代价</small> </li> <li class="mr"> <a href=""> <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190108/99ad3726dff4f666596df61d5331c100.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br> <span>G12特别行动组</span> </a><br> <small>任天野上演“红海行动”</small> </li> </ul> </div> </div> <div class="ad"> <img src="http://r1.ykimg.com/material/0A03/A1/201903/0305/3023837/1551783761261/0D0100005C7E58FC91152227514C4C36.jpg"> </div> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
