編程練習(xí)
小伙伴們，根據(jù)所學(xué)知識，請為導(dǎo)航菜單大類設(shè)置右箭頭
效果圖:
圖片素材:
圖片引用地址:http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg
溫馨提示:完成任務(wù)后，請驗證是否與實踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能。
任務(wù)
1. 為每個大類的CSS樣式設(shè)置背景：
提示：設(shè)置1.png為背景，靠右，且不重復(fù)。
2. 當(dāng)鼠標(biāo)移到大類時，設(shè)置背景為空。
提示：設(shè)置hover 時背景為空。
- ?不會了怎么辦
-
參考代碼
.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ù)字商品</a><span></span> </li>
<li><a href="#">家用電器</a></li>
<li><a href="#">手機、數(shù)碼</a></li>
<li><a href="#">電腦、辦公</a></li>
<li><a href="#">家居、家具、家裝、廚具</a></li>
<li><a href="#">服飾內(nèi)衣、珠寶首飾</a></li>
<li><a href="#">個護化妝</a></li>
<li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
<li><a href="#">運動戶外</a></li>
<li><a href="#">汽車用品</a></li>
<li><a href="#">母嬰、玩具樂器</a></li>
<li><a href="#">食品飲料、酒類、生鮮</a></li>
<li><a href="#">營養(yǎng)保健</a></li>
</ul>
</body>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
