編程練習(xí)
小伙伴們，為京東商城導(dǎo)航二級(jí)菜單添加一個(gè)wii.png的圖片到右下角，要求浮動(dòng)出界面。
效果圖:
圖片素材:
圖片引用地址:http://img1.sycdn.imooc.com//541120c80001aae401970164.jpg
溫馨提示:完成任務(wù)后，請(qǐng)驗(yàn)證是否與實(shí)踐描述效果一致，如一致，恭喜您，你已經(jīng)掌握此技能。
任務(wù)
1. 在代碼編輯器第305行處，插入wii.png圖片，并為其設(shè)置樣式：rightPic
提示:使用<img>標(biāo)簽
2. 在代碼編輯器第173行處，在rightPic中設(shè)置圖片位置
提示：相對(duì)父元素定位，right及bottom屬性為負(fù)值
- ?不會(huì)了怎么辦
-
參考代碼:
.rightPic{
position:relative;
right:-35px;
bottom:-30px;
}
<!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;
background-image: url(1.png);
background-repeat: no-repeat;
background-position: right;
}
.topmenu li a
{
text-decoration: none;
color: #313131;
}
.topmenu li a:hover
{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
.topmenu li:hover
{
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
}
.submenu
{
display: none;
width: 715px;
left: 220px;
position: absolute;
top: 40px;
border: 1px solid #DDD;
z-index: 4;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
}
.leftdiv
{
float: left;
width: 490px;
margin: 5px;
}
.rightdiv
{
float: left;
width: 200px;
margin: 5px;
}
.topmenu li:hover .submenu
{
display: block;
}
.topmenu li:hover span
{
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 30px;
float: right;
position: relative;
}
.leftdiv dl
{
display: block;
border-bottom: 1px solid #EEE;
padding-bottom: 6px;
overflow: hidden;
}
.leftdiv dl dt
{
display: block;
float: left;
width: 60px;
text-align: right;
height: 22px;
line-height: 22px;
padding-right: 6px;
}
.leftdiv dl dt a
{
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10pt;
}
.leftdiv dl dd
{
display: block;
overflow: hidden;
}
.leftdiv dl dd a
{
display: block;
float: left;
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
}
.rightdiv dl dd
{
margin: 3px 0;
}
.rightdiv dl dt
{
color: #e4393c;
font-weight: bold;
font-size: 10pt;
}
.rightdiv dl dd a
{
font-size: 9pt;
color: #737373;
line-height: 22px;
}
.rightdiv dl dd a:hover
{
color: #737373;
font-weight: normal;
}
.rightPic
{
/*設(shè)置rightPic樣式 */
}
</style>
</head>
<body>
<ul class="topmenu">
<div class="toptitle">
全部商品分類
</div>
<li><a href="#">圖書(shū)、音像、數(shù)字商品</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">電子書(shū)</a></dt>
<dd>
<a href="#">免費(fèi)</a> <a href="#">小說(shuō)</a> <a href="#">勵(lì)志與成功</a> <a href="#">婚戀/兩性</a>
<a href="#">文學(xué)</a> <a href="#">經(jīng)管</a> <a href="#">暢讀VIP</a>
</dd>
</dl>
<dl>
<dt><a href="#">數(shù)字音樂(lè)</a></dt>
<dd>
<a href="#">通俗流行</a> <a href="#">古典音樂(lè)</a> <a href="#">搖滾說(shuō)唱</a> <a href="#">爵士藍(lán)調(diào)</a>
<a href="#">鄉(xiāng)村民謠</a> <a href="#">有聲讀物</a>
</dd>
</dl>
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<a href="#">音樂(lè)</a> <a href="#">影視</a> <a href="#">教育音像</a> <a href="#">游戲</a>
</dd>
</dl>
<dl>
<dt><a href="#">文藝</a></dt>
<dd>
<a href="#">小說(shuō)</a> <a href="#">文學(xué)</a> <a href="#">青春文學(xué)</a> <a href="#">傳記</a> <a
href="#">藝術(shù)</a>
</dd>
</dl>
<dl>
<dt><a href="#">人文社科</a></dt>
<dd>
<a href="#">歷史</a> <a href="#">心理學(xué)</a> <a href="#">政治/軍事</a> <a href="#">國(guó)學(xué)/古籍</a>
<a href="#">哲學(xué)/宗教</a> <a href="#">社會(huì)科學(xué)</a>
</dd>
</dl>
<dl>
<dt><a href="#">經(jīng)管勵(lì)志</a></dt>
<dd>
<a href="#">經(jīng)濟(jì)</a> <a href="#">金融與投資</a> <a href="#">管理</a> <a href="#">勵(lì)志與成功</a>
</dd>
</dl>
<dl class="fore7">
<dt><a href="#">生活</a></dt>
<dd>
<a href="#">家教與育兒</a> <a href="#">旅游/地圖</a> <a href="#">烹飪/美食</a> <a href="#">時(shí)尚/美妝</a>
<a href="#">家居</a> <a href="#">婚戀與兩性</a> <a href="#">娛樂(lè)/休閑</a> <a href="#">健身與保健</a>
<a href="#">動(dòng)漫/幽默</a> <a href="#">體育/運(yùn)動(dòng)</a>
</dd>
</dl>
<dl>
<dt><a href="#">科技</a></dt>
<dd>
<a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">醫(yī)學(xué)</a> <a href="#">
工業(yè)技術(shù)</a> <a href="#">電子/通信</a> <a href="#">農(nóng)林</a> <a href="#">科學(xué)與自然</a>
</dd>
</dl>
<dl>
<dt><a href="#">少兒</a></dt>
<dd>
<a href="#">少兒</a> <a href="#">0-2歲</a> <a href="#">3-6歲</a> <a href="#">7-10歲</a>
<a href="#">11-14歲</a>
</dd>
</dl>
<dl>
<dt><a href="#">教育</a></dt>
<dd>
<a href="#">教材</a> <a href="#">中小學(xué)教輔</a> <a href="#">考試</a> <a href="#">外語(yǔ)學(xué)習(xí)</a>
</dd>
</dl>
<dl>
<dt><a href="#">其它</a></dt>
<dd>
<a href="#">英文原版書(shū)</a> <a href="#">港臺(tái)圖書(shū)</a> <a href="#">工具書(shū)</a> <a href="#">套裝書(shū)</a>
<a href="#">雜志/期刊</a>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
width="194" height="70" title="\家電">
</a>
</dd>
<dd>
<a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
width="194" height="70" title="小家電--三請(qǐng)聚寶盆">
</a>
</dd>
</dl>
<dl>
<dt>推薦品牌</dt>
<dd>
<a href="#">美的官方旗艦店</a>
</dd>
<dd>
<a href="#">蘇泊爾旗艦店</a>
</dd>
<dd>
<a href="#">九陽(yáng)旗艦店</a>
</dd>
<dd>
<a href="#">東菱旗艦店</a>
</dd>
<dd>
<a href="#">海爾統(tǒng)帥旗艦店</a>
</dd>
<dd>
<a href="#">小熊旗艦店</a>
</dd>
</dl>
<!-- 添加圖片任務(wù) -->
</div>
</div>
</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)求
