background-position定位怎么實現(xiàn)的？？？？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.10新聞中心制作評測題</title>
<style type="text/css">
/*在此定義相關(guān)CSS樣式*/
*{margin:0px;padding:0px;}
.topList{
? ? font-family:"微軟雅黑";
? ? font-size:14px;
? ? width:350px;
? ? height:180px;
? ? border:1px solid #ccc;
? ? }
.topList ul{
? ?list-style-type:none;?
? ?height:30px;
}
.topList li{
? ? height:30px;
? ? line-height:30px;
}
.topList em{
? ? font-style:normal;
? ? float:left;
? ? background:url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat;
? ?background-position:0px 7px;
}
/*我用下面這種方法可以實現(xiàn)應(yīng)該實現(xiàn)的效果，但是用上面background-position卻怎么都想不通？？？不知道怎么寫了，求助
.topList em{
? ? font-style:normal;
? ? float:left;
? ? background:url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat;
? ? height:16px;
? ? line-height:16px;
? ? margin:7px 7px;
}
*/
.topList li a:link,.topList li a:visited{
? ? text-decoration:none;
? ? color:#000;
}
.topList li a:hover,.topList li a:active{
? ? text-decoration:none;
? ? color:pink;
}
</style>
</head>
<body>
<div class="topList">
<ul>
<li class="top"><em>01</em>
<p><a href="http://idcbgp.cn/" >【慕客訪談用戶篇】“有為屌絲”在路上</a></p>
</li>
<li class="top"><em>02</em>
<p><a href="http://idcbgp.cn/">【有獎活動】給父親的三行書信</a></p>
</li>
<li class="top"><em>03</em>
<p><a href="http://idcbgp.cn/">《程序猿，請曬出你的童年》活動獲獎公告</a></p>
</li>
<li><em>04</em>
<p><a href="http://idcbgp.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p>
</li>
<li><em>05</em>
<p><a href="http://idcbgp.cn/">【獲獎公告】追“球”巔峰，爭當(dāng)“預(yù)言帝”</a></p>
</li>
<li><em>06</em>
<p><a href="http://idcbgp.cn/">【問卷調(diào)查】慕課網(wǎng)用戶學(xué)習(xí)情況大調(diào)查</a></p>
</li>
</ul>
</div>
</body>
還有看見有同問的em用float屬性后怎么沒有覆蓋p中的文字呢
2016-09-27
這是背景位移嘛
background-position：后面有兩個屬性，第一個是水平位置，第二個是垂直方向的位置，這里需注意的是兩個屬性的順序
比如說
background-position: left -29px;(當(dāng)中的left指從圖片的最左端讀起，-29px就是將圖片向上移動29px,然后開始讀)
再如：background-position: 15px 20px;(指將圖片向右移15px,向下移20px;)
簡單地說，就是以圖片的左上角頂點為原點，往下和右都為正，反之為負(fù)