仿製了一個簡單的文章列表頁面樣式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
font-family:宋體;
}
div{
width:50%;
height:250px;
border:1px solid rgb(202,205,158);
margin:50px auto;
}
p{
font-size:1em;
font-weight:bold;
background:rgb(202,205,158);
padding:0.2em;
}
ul{
list-style-type:none;
font-size:0.8em;
}
li{
padding:0.7em;
padding-left:1.75em;
border-bottom:1px dashed black;
background:url(download.jpg) no-repeat;
background-size:2em 2em;
background-position:0 0.1em;
}
li>span{
diaplay:inlie-block;
float:right;
width:12em;
}
</style>
</head>
<body>
<div>
<p>>>日誌</p>
<ul>
<li>簡報IMAX加長版《變形金剛》(Transformers)親歷<span>2017-09-25</span></li>
<li>《變形金剛》發燒友的看圖說話(多圖)<span>2017-09-22 10:13 </span></li>
<li>《反恐王國》(The Tingdom):生猛的空心彈<span>2017-09-22 08:03</span></li>
<li>《東方承諾》(Eastem Primises):不動如山,暗流洶涌<span>2017-09-20 11:07</span></li>
<li>《妖精的旋律》(Elfen Lied):日式YY的經典案例<span>2017-09-20 10:44</span></li>
</ul>
</div>
</body>
</html>
問題:
1、內容在縮放後,排版會被嚴重破壞,應該嘗試做成響應式設計網頁。
2、background的定位規則還是不太清楚。