版权声明：我的新浪博客http://blog.sina.com.cn/f6056 https://blog.csdn.net/weimob258616/article/details/80021959
仿制了一个简单的文章列表页面样式
<!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的定位规则还是不太清楚。