編程練習(xí)
小伙伴們，根據(jù)所學(xué)知識(shí)，請(qǐng)為導(dǎo)航菜單大類設(shè)置右箭頭
效果圖:
圖片素材:
圖片引用地址:http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg
溫馨提示:完成任務(wù)后，請(qǐng)驗(yàn)證是否與實(shí)踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能。
任務(wù)
1. 為每個(gè)大類的CSS樣式設(shè)置背景：
提示：設(shè)置1.png為背景，靠右，且不重復(fù)。
2. 當(dāng)鼠標(biāo)移到大類時(shí)，設(shè)置背景為空。
提示：設(shè)置hover 時(shí)背景為空。
- ?不會(huì)了怎么辦
-
參考代碼
.topmenu li
{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
background-image: url(1.png);
background-repeat: no-repeat;
background-position: right;
}
.topmenu li:hover
{ background-image: none; }
<!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>
<title></title>
<style type="text/css">
body
{
padding: 0;
font-size: 10pt;
behavior:url(css/csshover.htc);
}
.topmenu
{
display: block;
width: 220px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
}
.toptitle
{
height: 40px;
line-height: 40px;
text-align: left;
font-size: 11pt;
font-weight: bold;
color: White;
background: #e4393c;
padding-left: 20px;
}
.topmenu li
{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
/* 任務(wù)一 */
}
.topmenu li:hover
{
/* 任務(wù)二 */
}
.topmenu li a
{
text-decoration: none;
color: #313131;
}
.topmenu li a:hover
{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
</style>
</head>
<body>
<ul class="topmenu">
<div class="toptitle">
全部商品分類
</div>
<li><a href="#">圖書(shū)、音像、數(shù)字商品</a><span></span> </li>
<li><a href="#">家用電器</a></li>
<li><a href="#">手機(jī)、數(shù)碼</a></li>
<li><a href="#">電腦、辦公</a></li>
<li><a href="#">家居、家具、家裝、廚具</a></li>
<li><a href="#">服飾內(nèi)衣、珠寶首飾</a></li>
<li><a href="#">個(gè)護(hù)化妝</a></li>
<li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
<li><a href="#">運(yùn)動(dòng)戶外</a></li>
<li><a href="#">汽車用品</a></li>
<li><a href="#">母嬰、玩具樂(lè)器</a></li>
<li><a href="#">食品飲料、酒類、生鮮</a></li>
<li><a href="#">營(yíng)養(yǎng)保健</a></li>
</ul>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
