<small id="p2zst"></small>
課程
/前端開發
/JavaScript
/信息列表制作
done
2014-08-27
源自：信息列表制作 5-1
正在回答
<!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>無標題文檔</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) { ? //鼠標經過時， showDL函數顯示。
? ? var aDl =obj.getElementsByTagName('dl')[0] ;
? ? var aIcion = obj.getElementsByTagName('ins')[0];
? ? aDl.style.display = 'block';
aIcion.className = 'onactive';
?}
function hideDl(obj) { ?//鼠標離開時， hideDL函數隱藏。
var aDl =obj.getElementsByTagName('dl')[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>舌尖上的中國：傳世美味炮制完全攻略
? ? ? ?<dl>
? ? ? ? ?<dt><img src="http://img1.sycdn.imooc.com//52c91a8c0001ae7c00700070.jpg"/></dt>
? ? ? ? ?<dd>
? ? ? ? ? ?<span>作者：本書編寫組</span>
? ? ? ? ? ?<span>價格：<i>￥8.94</i></span>
? ? ? ? ?</dd> ? ?
? ? ? ?</dl>
? ? ?</li>
? ? ?<li class="lastnon" onmouseout="hideDl(this)" onmouseover='showDl(this)'><ins>☆</ins>完全圖解狗的心理(每天讀一點)
? ? ? ? ?<dt><img src="http://img1.sycdn.imooc.com//52c91ab000014f9900700070.jpg" /></dt>
? ? ? ? ? ?<span>作者：林樂毅</span>
? ? ? ? ? ?<span>價格：<i>￥1.99</i></span>
? ? ? ? ?</dd> ? ??
? ? ?<li class="lastnon" onmouseout="hideDl(this)" onmouseover='showDl(this)' ><ins>☆</ins>左手婚姻，右手愛情(經營婚姻)
? ? ? ? ?<dt><img src="http://img1.sycdn.imooc.com//52c91ace0001df5600700070.jpg" /></dt>
? ? ? ? ? ?<span>作者：赫本的眼睛</span>
? ? ? ? ? ?<span>價格：<i>￥2.00</i></span>
? ? ? ? ?</dd> ?
? </ul>
? </div>
</body>
</html>
舉報
帶您玩轉信息列表制作，掌握不同技術方法，提高Web開發經驗
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
<sup id="e7mu8"><button id="e7mu8"></button></sup>
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>無標題文檔</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) { ? //鼠標經過時， showDL函數顯示。
? ? var aDl =obj.getElementsByTagName('dl')[0] ;
? ? var aIcion = obj.getElementsByTagName('ins')[0];
? ? aDl.style.display = 'block';
aIcion.className = 'onactive';
?}
function hideDl(obj) { ?//鼠標離開時， hideDL函數隱藏。
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>舌尖上的中國：傳世美味炮制完全攻略
? ? ? ?<dl>
? ? ? ? ?<dt><img src="http://img1.sycdn.imooc.com//52c91a8c0001ae7c00700070.jpg"/></dt>
? ? ? ? ?<dd>
? ? ? ? ? ?<span>作者：本書編寫組</span>
? ? ? ? ? ?<span>價格：<i>￥8.94</i></span>
? ? ? ? ?</dd> ? ?
? ? ? ?</dl>
? ? ?</li>
? ? ?<li class="lastnon" onmouseout="hideDl(this)" onmouseover='showDl(this)'><ins>☆</ins>完全圖解狗的心理(每天讀一點)
? ? ? ?<dl>
? ? ? ? ?<dt><img src="http://img1.sycdn.imooc.com//52c91ab000014f9900700070.jpg" /></dt>
? ? ? ? ?<dd>
? ? ? ? ? ?<span>作者：林樂毅</span>
? ? ? ? ? ?<span>價格：<i>￥1.99</i></span>
? ? ? ? ?</dd> ? ??
? ? ? ?</dl>
? ? ?</li>
? ? ?<li class="lastnon" onmouseout="hideDl(this)" onmouseover='showDl(this)' ><ins>☆</ins>左手婚姻，右手愛情(經營婚姻)
? ? ? ?<dl>
? ? ? ? ?<dt><img src="http://img1.sycdn.imooc.com//52c91ace0001df5600700070.jpg" /></dt>
? ? ? ? ?<dd>
? ? ? ? ? ?<span>作者：赫本的眼睛</span>
? ? ? ? ? ?<span>價格：<i>￥2.00</i></span>
? ? ? ? ?</dd> ?
? ? ? ?</dl>
? ? ?</li>
? </ul>
? </div>
</body>
</html>