<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
div ul li/*定义全局的li*/
{
list-style:none;/*去掉开头的圆点*/
float:left;/*横向排列*/
padding-right:10px;/*图片之间的空白*/
}
.two/*第二行*/
{
margin-left:0px;/*调整距离左侧的位置*/
margin-top:235px;/*调整距离顶部的位置*/
}
.title01/*优酷/pp足球*/
{
font-size:150%;/*编辑字体大小*/
}
.p1_1
{
font-size:92%;/*编辑字体大小*/
color:black;/*编辑字体颜色*/
}
.p2_1
{
font-size:90%;/*编辑字体大小*/
color:black;/*编辑字体颜色*/
}
a
{
text-decoration:none;/*取消下划线*/
line-height:17px;/*调整行距来调整位置*/
}
.p1_2
{
color:#999999;/*编辑字体颜色*/
font-size:80%;/*编辑字体大小*/
line-height:0px;/*调整行距来调整位置*/
}
.p2_2
{
color:#999999;/*编辑字体颜色*/
font-size:80%;/*编辑字体大小*/
line-height:35px;/*调整行距来调整位置*/
}
.p3_2
{
color:#999999;/*编辑字体颜色*/
font-size:80%;/*编辑字体大小*/
line-height:35px;/*调整行距来调整位置*/
}
</style>
</head>
<body>
<div>
<ul>
<p class="title01">优酷/pp足球</p>
<li class="one">
<a href="#">
<img src="imgs/20181104_04.jpg" height="108.5" width="193" alt="国足1">
<p class="p1_1">上港夺冠！提前一轮破恒大七<br>连冠</p>
</a>
<p class="p1_2">8.0万次播放</p>
</li>
<li class="one">
<a href="#">
<img src="imgs/20181104_05.jpg" height="108.5" width="193" alt="国足2">
<p class="p2_1">爆冷！恒大丢掉冠军后0-2输球</p>
</a>
<p class="p2_2">2.3万次播放</p>
</li>
<li class="one">
<a href="#">
<img src="imgs/20181104_06.jpg" height="108.5" width="193" alt="国足3">
<p class="p1_1">京沪大战国安3-1赢申花</p>
</a>
<p class="p3_2">1.6万次播放</p>
</li>
</ul>
</div>
<div class="two">
<ul>
<li class="one">
<a href="#">
<img src="imgs/20181104_04.jpg" height="108.5" width="193" alt="国足1">
<p class="p1_1">上港夺冠！提前一轮破恒大七<br>连冠</p>
</a>
<p class="p1_2">8.0万次播放</p>
</li>
<li class="one">
<a href="#">
<img src="imgs/20181104_05.jpg" height="108.5" width="193" alt="国足2">
<p class="p2_1">爆冷！恒大丢掉冠军后0-2输球</p>
</a>
<p class="p2_2">2.3万次播放</p>
</li>
<li class="one">
<a href="#">
<img src="imgs/20181104_06.jpg" height="108.5" width="193" alt="国足3">
<p class="p1_1">京沪大战国安3-1赢申花</p>
</a>
<p class="p3_2">1.6万次播放</p>
</li>
</ul>
</div>
</body>
</html>
转载于:https://my.oschina.net/u/3959907/blog/2873836
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
