<!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新聞中心制作評(píng)測(cè)題</title>
<style?type="text/css">
*{margin:?0px;padding:?0px;border:?1px?solid?#ccc;}
/*在此定義相關(guān)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類選擇器，設(shè)置其寬為300px，高為180px，邊框線為1px實(shí)線?顏色為#E8E8E8，并讓其在頁(yè)面中水平居中。
二、去除項(xiàng)目列表項(xiàng)的項(xiàng)目符號(hào)，并設(shè)置整個(gè)列表ul四個(gè)方向填充均為5px。
三、設(shè)置em標(biāo)簽樣式為寬20px，高16px，水平居中，不傾斜，顏色為#333，并設(shè)置背景圖片。
四、單獨(dú)設(shè)置.top中的em標(biāo)簽的背景圖片。
五、控制超鏈接的四種狀態(tài)。*/
</style>
</head>
<body>
<div?class="topList">
<ul>
<li?class="top"><em?class="one">01</em>
<p><a?href="http://idcbgp.cn/"?>【慕客訪談?dòng)脩羝俊坝袨閷沤z”在路上</a></p>
</li>
<li?class="top"><em?class="one">02</em>
<p><a?href="http://idcbgp.cn/">【有獎(jiǎng)活動(dòng)】給父親的三行書信</a></p>
</li>
<li?class="top"><em?class="one">03</em>
<p><a?href="http://idcbgp.cn/">《程序猿，請(qǐng)曬出你的童年》活動(dòng)獲獎(jiǎng)公告</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/">【獲獎(jiǎng)公告】追“球”巔峰，爭(zhēng)當(dāng)“預(yù)言帝”</a></p>
</li>
<li><em?class="two">06</em>
<p><a?href="http://idcbgp.cn/">【問(wèn)卷調(diào)查】慕課網(wǎng)用戶學(xué)習(xí)情況大調(diào)查</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新聞中心制作評(píng)測(cè)題</title> <style?type="text/css"> /*在此定義相關(guān)CSS樣式*/ /*一、定義topList類選擇器，設(shè)置其寬為300px，高為180px，邊框線為1px實(shí)線?顏色為#E8E8E8，并讓其在頁(yè)面中水平居中。 二、去除項(xiàng)目列表項(xiàng)的項(xiàng)目符號(hào)，并設(shè)置整個(gè)列表ul四個(gè)方向填充均為5px。 三、設(shè)置em標(biāo)簽樣式為寬20px，高16px，水平居中，不傾斜，顏色為#333，并設(shè)置背景圖片。 四、單獨(dú)設(shè)置.top中的em標(biāo)簽的背景圖片。 五、控制超鏈接的四種狀態(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/"?>【慕客訪談?dòng)脩羝俊坝袨閷沤z”在路上</a></p> </li> <li?class="top"><em>02</em> <p><a?href="http://idcbgp.cn/">【有獎(jiǎng)活動(dòng)】給父親的三行書信</a></p> </li> <li?class="top"><em>03</em> <p><a?href="http://idcbgp.cn/">《程序猿，請(qǐng)曬出你的童年》活動(dòng)獲獎(jiǎng)公告</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/">【獲獎(jiǎng)公告】追“球”巔峰，爭(zhēng)當(dāng)“預(yù)言帝”</a></p> </li> <li><em>06</em> <p><a?href="http://idcbgp.cn/">【問(wèn)卷調(diào)查】慕課網(wǎng)用戶學(xué)習(xí)情況大調(diào)查</a></p> </li> </ul> </div> </body>重新寫了一下，不能移動(dòng)em標(biāo)簽，只能讓li里的內(nèi)容與em靠齊。如果有能實(shí)現(xiàn)控制em移動(dòng)的方法還請(qǐng)?zhí)狳c(diǎn)一下。