<!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=UTF-8"?/>
<title>3.10新聞中心制作評測題</title>
<style?type="text/css">
*{margin:?0px;padding:?0px;border:?1px?solid?#ccc;}
/*在此定義相關CSS樣式*/
.topList{width:?300px;height:180px;border:?1px?solid?#e8e8e8;margin:?0px?auto;}
ul{list-style-type:?none;padding:?5px;}
li{height:?30px;line-height:?30px;}
em{width:?20px;height:?16px;font-style:?normal;color:?#333;
??overflow:?hidden;;background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat;float:?left;line-height:?16px;margin:?auto?0px;}
.one{background-position:?0px?0px;}
.two{background-position:?0px?-16px;}
.topList?p{height:30px;font-size:?12px;line-height:?30px;}
.topList?a{text-decoration:?none;}
/*一、定義topList類選擇器，設置其寬為300px，高為180px，邊框線為1px實線?顏色為#E8E8E8，并讓其在頁面中水平居中。
二、去除項目列表項的項目符號，并設置整個列表ul四個方向填充均為5px。
三、設置em標簽樣式為寬20px，高16px，水平居中，不傾斜，顏色為#333，并設置背景圖片。
四、單獨設置.top中的em標簽的背景圖片。
五、控制超鏈接的四種狀態(tài)。*/
</style>
</head>
<body>
<div?class="topList">
<ul>
<li?class="top"><em?class="one">01</em>
<p><a?href="http://idcbgp.cn/"?>【慕客訪談用戶篇】“有為屌絲”在路上</a></p>
</li>
<li?class="top"><em?class="one">02</em>
<p><a?href="http://idcbgp.cn/">【有獎活動】給父親的三行書信</a></p>
</li>
<li?class="top"><em?class="one">03</em>
<p><a?href="http://idcbgp.cn/">《程序猿，請曬出你的童年》活動獲獎公告</a></p>
</li>
<li><em?class="two">04</em>
<p><a?href="http://idcbgp.cn/">【慕課訪談】破繭成蝶——美女程序員的蛻變史</a></p>
</li>
<li><em?class="two">05</em>
<p><a?href="http://idcbgp.cn/">【獲獎公告】追“球”巔峰，爭當“預言帝”</a></p>
</li>
<li><em?class="two">06</em>
<p><a?href="http://idcbgp.cn/">【問卷調查】慕課網用戶學習情況大調查</a></p>
</li>
</ul>
</div>
</body>
2017-09-27
<!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=utf-8"?/> <title>3.10新聞中心制作評測題</title> <style?type="text/css"> /*在此定義相關CSS樣式*/ /*一、定義topList類選擇器，設置其寬為300px，高為180px，邊框線為1px實線?顏色為#E8E8E8，并讓其在頁面中水平居中。 二、去除項目列表項的項目符號，并設置整個列表ul四個方向填充均為5px。 三、設置em標簽樣式為寬20px，高16px，水平居中，不傾斜，顏色為#333，并設置背景圖片。 四、單獨設置.top中的em標簽的背景圖片。 五、控制超鏈接的四種狀態(tài)。http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg*/ *{margin:?0;padding:?0;} .topList{width:?300px;height:?180px;border:?1px?solid?#e8e8e8;margin:?0?auto;} ul{padding:?5px;} em{width:?20px;height:?16px;text-align:?center;font-style:?normal;background:?url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg)no-repeat?0px?-16px;float:?left;} .top?em{background-position:?0px?0px;} .topList?li{list-style-type:?none;height:?30px;width:?300px;font-size:?12px;} a:link,a:visited{text-decoration:?none;font-size:?12px;color:black;font-family:?"微軟雅黑";} a:hover,a:active{text-decoration:?none;font-size:?12px;color:#f00;font-family:?"微軟雅黑";} </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/">【獲獎公告】追“球”巔峰，爭當“預言帝”</a></p> </li> <li><em>06</em> <p><a?href="http://idcbgp.cn/">【問卷調查】慕課網用戶學習情況大調查</a></p> </li> </ul> </div> </body>重新寫了一下，不能移動em標簽，只能讓li里的內容與em靠齊。如果有能實現(xiàn)控制em移動的方法還請?zhí)狳c一下。