做一个B站视频样式

最新推荐文章于 2021-06-20 05:52:54 发布

夜行旅人

最新推荐文章于 2021-06-20 05:52:54 发布

阅读量828

点赞数

本文链接：https://blog.csdn.net/asatoga/article/details/79467856

版权

我也不知道这个该叫啥``反正效果图是这样的

<!DOCTYPE html>

<html lang="zh-cn">
<head>
<title>gosu1.html</title>

<meta name="keywords" content="Asatoga is gosu!">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gb2312">


<style type="text/css">
*{margin:0;padding:0;}
li{list-style: none;}
#box{
width: 275px;
/*height: 350px;
border: 1px solid black;*/
margin: 50px auto;
}
#box ul li {
height: 350px;
border: 1px solid black;
margin-bottom: 10px;
}
#box ul li img{
margin: 10px 40px;
}
#box ul li p {
font-size: 12px;
color:gray;
margin:0 10px;
line-height:27px;
}
#box ul li .txt1 {
font-size:14px;
font-weight: 600;/*加粗*/
white-space: nowrap;/*不换行*/
overflow: hidden;/*超出隐藏*/
text-overflow: ellipsis;/*剪切产生省略*/
}
#box ul li .txt2 span{
color: pink;
font-weight: 600;
}
#box ul li .txt3 span{
color: red;
padding-right: 12px;/*内边距盒子合内容的距离*/
}
#box ul li .pic{
margin:1px 10px;
}
</style>
</head>

<body>
<div id="box">
<ul>
<li>
<img src="../images/罗马.jpg" alt="hi,i'm Nilu"/>
<a href="#">尼禄殿下的看板日记-萨萨萨萨萨萨萨原初之火</a>
Fate:尼禄克劳德
由阿萨于XXX时间上传
作者:阿萨;PS:无聊的时候做的
</li>
<li>
<img src="../images/luoma.jpg" alt="hi,i'm Nilu"/>
<a href="#">尼禄殿下的看板日记-萨萨萨萨萨萨萨原初之火</a>
Fate:尼禄克劳德
由阿萨于XXX时间上传
作者:阿萨;PS:无聊的时候做的
</li>
</ul>
</div>
</body>
</html>