我也不知道這個該叫啥``反正效果圖是這樣的
<!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>