盒子模型之爱奇艺播放列表

最新推荐文章于 2022-05-18 18:33:14 发布

qq_33151859

最新推荐文章于 2022-05-18 18:33:14 发布

阅读量2.9k

点赞数 1

分类专栏： HTML基础编程题

本文链接：https://blog.csdn.net/qq_33151859/article/details/78213998

版权

HTML基础编程题专栏收录该内容

32 篇文章 13 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>爱奇艺播放列表</title>
<link href="css/Page_212_5.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!--武神赵子龙-->
<ul>
<li class="pic1"></li>
<li><h1><a href="#">神武赵子龙</a></h1></li>
<li>
<p><a href="#">怒，林更新不抱网红抱女神</a></p>
<p>点击次数：242445次</p>
</li>
<!--<li></li>-->
</ul>
<!--旋风十一人-->
<ul>
<li class="pic2"></li>
<li><h1><a href="#">旋风十一人</a></h1></li>
<li>
<p><a href="#">胡歌变教练在撩前女友</a></p>
<p>点击次数：242445次</p>
</li>
<!--<li></li>-->
</ul>
<!--太阳的后裔-->
<ul>
<li class="pic3"></li>
<li><h1><a href="#">太阳的后裔</a></h1></li>
<li>
<p><a href="#">宋慧乔吃嫩草</a></p>
<p>点击次数：242445次</p>
</li>
<!--<li></li>-->
</ul>
<!--山海经-->
<ul>
<li class="pic4"></li>
<li><h1><a href="#">山海经之赤影传说</a></h1></li>
<li>
<p><a href="#">娜扎张翰再度联手</a></p>
<p>点击次数：242445次</p>
</li>
<!--<li></li>-->
</ul>
</body>
</html>

//css样式
ul{
/*把无序列表变成行内元素*/
width: 21%;
/*border: 1px solid red;*/
display: inline-block;
list-style: none;
padding-left: 10px;
padding-top: 10px;
border-radius: 15px;
margin-right: 10px;
}
li h1:first-of-type{
font-size: 16px;
color: #4D4D4D;
}
li p:nth-of-type(1){
font-size: 14px;
color: #640000;
}
li p:nth-of-type(2){
font-size: 12px;
color: blue;
}
.pic1,.pic2,.pic3,.pic4{
width: 180px;
height: 244px;
/*border:1px dashed red;*/
border-radius: 15px;
}
.pic1{
background: url(../img/img1.png) 0px 0px no-repeat;
background-size: contain;
}
.pic2{
background: url(../img/img2.png) 0px 0px no-repeat;
background-size: contain;
}
.pic3{
background: url(../img/img3.png)0px 0px no-repeat;
background-size: contain;
}
.pic4{
background: url(../img/img4.png)0px 0px no-repeat;
background-size: contain;
}


ul:hover{
box-shadow: 0 0 20px #06C;
}
a{
color: black;
text-decoration: none;
font-size: 12px;
}
a:hover{
font-size: 14px;
color: red;
}
效果图；

qq_33151859

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
盒子模型之爱奇艺播放列表

爱奇艺播放列表神武赵子龙怒，林更新不抱网红抱女神点击次数：242445次-->旋风十一人胡歌变教练在撩前女友点击次数：242445次-->太阳的后裔宋慧乔吃嫩草点击次数：242445次-->山海经之赤影传说娜扎张翰再度联手点击次数：242445次-->//css样式ul{/*把无序列表变成行内元素*
复制链接

扫一扫