<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="static/css/style.css" type="text/css"> <link rel="stylesheet" href="static/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="icon" href="static/images/1.ico"> <title>优酷-这世界很酷</title> <style type="text/css"> </style> </head> <body> <div class="header rel"> <div class="m box2 rel"> <img src="static/images/logo.png" alt="" class="abs"> <a href="#" class=""> <img src="static/images/11.jpg" alt="" class=""> </a> <form class="" action="index.html" method="post" class="rel"> <input type="text" name="" value="" class="fo abs1"> <button type="button" name="button" class="butt abs2">搜全网</button> </form> </div> <div class="name1 abs3"> <i class="fa fa-ravelry fa-2x" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> <i class="fa fa-ravelry fa-2x le1" ><br>vip</i> </div> </div> <!-- 旧课程 --> <div class="m box1"> <div> <p class="heads tops">正在热播</p> </div> <div class="tops" > <ul> <li class="l"> <a href=""> <img src="static/images/a.jpg" alt="第一幅图" class="img1"><br><abbr title="瞰中国:宁夏">瞰中国:宁夏</abbr></a><br> <small>低调的宁夏 美了四季</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/b.jpg" alt="第二幅图" class="img1"><br><abbr title="大冰小将 第一季">大冰小将 第一季</abbr></a><br> <small>千玺雷佳音冰雪大狂欢</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/c.jpg" alt="第三幅图" class="img1"><br><abbr title="海王">海王</abbr></a><br> <small>温子仁开启“海鲜盛宴”</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/d.jpg" alt="第四幅图" class="img1"><br><abbr title="德云社己亥年开箱庆典 2019">德云社己亥年开箱庆典 2019</abbr></a><br> <small>明星阵容19年开箱演出</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/e.jpg" alt="第五幅图" class="img1"><br><abbr title="偶像">偶像</abbr></a><br> <small>独立音乐系列纪录长片</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/e.jpg" alt="第六幅图" class="img1"><br><abbr title="悠哉日常大王剧场版:假期活动">悠哉日常大王剧场版:假期活动</abbr></a><br> <small>暑假就是要出去玩呀</small><br> </li> </ul> <div class="clear"></div> </div> <div class="heads tops"><span>剧集 ></span> <span class="name"> 最新 大陆剧 日韩剧 港台剧 英美剧</span></div> <div class="l tops"> <a href=""> <img src="static/images/tv.jpg" alt="大图" class="big"><br><abbr title="逆流而上的你·爆笑">逆流而上的你·爆笑</abbr></a><br> <small>新晋辣妈萌爸!潘粤明马丽咸鱼夫妻带娃逆袭!</small><br> </div> <div class="tops"> <ul> <li class="l le"> <a href=""> <img src="static/images/tv1.jpg" alt="剧小图1" class="img2"><br><abbr title="都挺好">都挺好</abbr></a><br> <small>姚晨郭京飞陷亲情旋涡</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv2.jpg" alt="剧小图2" class="img2"><br><abbr title="乡村爱情11">乡村爱情11</abbr></a><br> <small>刘能赵四争C位</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv1.jpg" alt="剧小图3" class="img2"><br><abbr title="老中医">老中医</abbr></a><br> <small>陈宝国冯远征许晴弘扬医道</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv4.jpg" alt="剧小图4" class="img2"><br><abbr title="国宝奇旅">国宝奇旅</abbr></a><br> <small>刘烨袁姗姗携手护国宝</small><br> </li> </ul> </div> <div> <ul> <li class="l le"> <a href=""> <img src="static/images/tv5.jpg" alt="剧小图5" class="img2"><br><abbr title="重耳传奇">重耳传奇</abbr></a><br> <small>春秋版“王子历险记”</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv5.jpg" alt="剧小图6" class="img2"><br><abbr title="春暖花又开">春暖花又开</abbr></a><br> <small>姚芊羽李建上演新农村创业</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv5.jpg" alt="剧小图7" class="img2"><br><abbr title="只为遇见你·甜蜜开播">只为遇见你·甜蜜开播</abbr></a><br> <small>霸气帅总撩动你的少女心</small><br> </li> <li class="l le"> <a href=""> <img src="static/images/tv5.jpg" alt="剧小图8" class="img2"><br><abbr title="小女花不弃">小女花不弃</abbr></a><br> <small>林依晨张彬彬苏甜来袭</small><br> </li> </ul> </div> <div class="clear"></div> </div> </body> </html>
css外联代码
/* 清除内外边距 */
*{
margin: 0;
padding: 0;
}
/* 清除li标签格式 */
li{
list-style: none;
}
/* 清除a标签格式 设置字体 */
a{
text-decoration: none;
color: #333333;
}
/* abbr样式清除 设置字体 */
abbr{
text-decoration:none;
font-size: 15px;
}
/* 设置电影名字体 */
.name{
font-size: 15px;
}
/* 设置清除浮动 */
.clear{
clear: both;
}
/* 头文字 */
.heads{
font-size: 25px;
color: #333333;
}
/* 上边距 */
.tops{
margin-top: 20px;
}
/* margin居中 */
.m{
margin: 0 auto;
}
/* 热播区图片大小设置 */
.img1{
width: 190px;
height: 288px;
}
/* small字体颜色设置 */
small{
color: #999999;
}
/* 设置左浮动 */
.l{
float: left;
}
/* 设置左边距 */
.le{
padding-left: 10px;
}
/* 剧集区大图设置 */
.big{
width: 395px;
height: 280px;
}
/* 剧情小图尺寸 */
.img2{
width: 190px;
height: 110px;
}