done
LLeo小浩
2014-08-27
1 回答
舉報(bào)
0/150
提交
取消
2014-08-27
舉報(bào)
2015-12-16
<!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>無(wú)標(biāo)題文檔</title>
<style>
? *{margin:0;padding:0;}
? .list{margin:30px auto 0; width:300px; border:1px solid #ccc;}
? h3{height:24px; line-height:24px; border-bottom:1px solid #ccc; background:#ccc; color:#000; font-size:14px;padding-left:10px;}
? ul,li{list-style:none;}
? ul{clear:both;display:inline-block;padding:5px 0;}
? li{border-bottom:1px dashed #ccc; line-height:30px; color:#333; font-size:12px;cursor:pointer;padding:0 10px; clear:both;}
? li dl{padding-left:20px;line-height:22px;display:none; }
? li dl dt,li dl dd{float:left;}
? li dl dt{width:70px;height:70px;border:1px solid #ccc;margin-right:5px;}
? li dl dd span{display:block;line-height:36px;}
? li dl dd span i{color:#F36;font-style:normal;font-weight:bold;}
? li.lastnon{border:0;}
? li ins{width:20px;height:20px;background:#ccc;line-height:20px;text-align:center;color:#fff; display:inline-block; zoom:1; text-decoration:none;margin-right:5px;}
? li ins.onactive{background:#F96;}
</style>
<!--傳參-->
<script>
function showDl(obj) { ? //鼠標(biāo)經(jīng)過(guò)時(shí)， showDL函數(shù)顯示。
? ? var aDl =obj.getElementsByTagName('dl')[0] ;
? ? var aIcion = obj.getElementsByTagName('ins')[0];
? ? aDl.style.display = 'block';
aIcion.className = 'onactive';
?}
function hideDl(obj) { ?//鼠標(biāo)離開(kāi)時(shí)， hideDL函數(shù)隱藏。
var aDl =obj.getElementsByTagName('dl')[0];;
? ? var aIcion = obj.getElementsByTagName('ins')[0];
aDl.style.display = 'none';
? ? aIcion.className = '';
}
</script>
</head>
<body>
<div class="list">
? <h3>閱讀榜</h3>
? <ul>
? ? ?<li class="lastnon" onmouseout="hideDl(this)" onmouseover='showDl(this)' ><ins>☆</ins>舌尖上的中國(guó)：傳世美味炮制完全攻略
? ? ? ?<dl>
? ? ? ? ?<dt><img src="http://img1.sycdn.imooc.com//52c91a8c0001ae7c00700070.jpg"/></dt>
? ? ? ? ?<dd>
? ? ? ? ? ?<span>作者：本書編寫組</span>
? ? ? ? ? ?<span>價(jià)格：<i>￥8.94</i></span>
? ? ? ? ?</dd> ? ?
? ? ? ?</dl>
? ? ?</li>
? ? ?<li class="lastnon" onmouseout="hideDl(this)" onmouseover='showDl(this)'><ins>☆</ins>完全圖解狗的心理(每天讀一點(diǎn))
? ? ? ?<dl>
? ? ? ? ?<dt><img src="http://img1.sycdn.imooc.com//52c91ab000014f9900700070.jpg" /></dt>
? ? ? ? ?<dd>
? ? ? ? ? ?<span>作者：林樂(lè)毅</span>
? ? ? ? ? ?<span>價(jià)格：<i>￥1.99</i></span>
? ? ? ? ?</dd> ? ??
? ? ? ?</dl>
? ? ?</li>
? ? ?<li class="lastnon" onmouseout="hideDl(this)" onmouseover='showDl(this)' ><ins>☆</ins>左手婚姻，右手愛(ài)情(經(jīng)營(yíng)婚姻)
? ? ? ?<dl>
? ? ? ? ?<dt><img src="http://img1.sycdn.imooc.com//52c91ace0001df5600700070.jpg" /></dt>
? ? ? ? ?<dd>
? ? ? ? ? ?<span>作者：赫本的眼睛</span>
? ? ? ? ? ?<span>價(jià)格：<i>￥2.00</i></span>
? ? ? ? ?</dd> ?
? ? ? ?</dl>
? ? ?</li>
? </ul>
? </div>
</body>
</html>