我也不知道这个该叫啥``反正效果图是这样的
<!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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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"/>
<p class="txt1"><a href="#">尼禄殿下的看板日记-萨萨萨萨萨萨萨原初之火</a></p>
<p class="txt2"><span>Fate:</span>尼禄克劳德</p>
<p>由阿萨于XXX时间上传</p>
<p class="txt3"><span>作者:</span>阿萨;<span>PS:</span>无聊的时候做的</p>
</li>
<li>
<img src="../images/luoma.jpg" alt="hi,i'm Nilu"/>
<p class="txt1"><a href="#">尼禄殿下的看板日记-萨萨萨萨萨萨萨原初之火</a></p>
<p class="txt2"><span>Fate:</span>尼禄克劳德</p>
<p>由阿萨于XXX时间上传</p>
<p class="txt3"><span>作者:</span>阿萨;<span>PS:</span>无聊的时候做的</p>
</li>
</ul>
</div>
</body>
</html>