<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>無標題文件</title></p> <p><style></p> <p>/*產品介紹/廠商連結*/<br /> .BR{<br /> display:block;<br /> width:920px;<br /> margin:0 auto;<br /> text-align:right;<br /> margin-bottom:20px;<br /> border-bottom-width: 1px;<br /> border-bottom-style: dashed;<br /> border-bottom-color: #666666;<br /> padding-right:30px;<br /> float:right;<br /> }<br /> .BR ul{<br /> float:right;<br /> }<br /> .BR li{<br /> display:block;<br /> padding:0 10px;<br /> float:left;<br /> }<br /> .BR li a{<br /> font-family: Arial, Verdana, Helvetica, sans-serif;<br /> font-size: 13px;<br /> line-height: 22px;<br /> color: #CCCCCC;<br /> font-weight:bolder;<br /> text-decoration:none;<br /> }<br /> .BR li a:hover{<br /> text-decoration:underline;<br /> }</p> <p>/*—-左品牌選單—–*/<br /> #ADLeft{<br /> margin:10px 0 0 10px;<br /> float:left;<br /> display:block;<br /> width:200px;<br /> border:1px solid #B02300;<br /> }<br /> .ADMain ul{<br /> }<br /> .ADMain li{<br /> margin:5px;<br /> text-align:center;<br /> background-color:#860000;<br /> height:26px;<br /> }<br /> .ADMain li a{<br /> font-family:Arial, Helvetica, sans-serif;<br /> font-size:13px;<br /> color:#C5C5C5;<br /> font-weight:bolder;<br /> line-height:26px;<br /> text-decoration:none;<br /> }<br /> .ADMain li a:hover{<br /> color:#DDD;<br /> }</p> <p>/*—-左品牌次選單—–*/<br /> .ADSub ul{<br /> margin:0 auto;<br /> }<br /> .ADSub li{<br /> margin:2px auto;<br /> text-align:center;<br /> display:block;<br /> background-color:#666;<br /> border-bottom: 1px solid #999;<br /> width:95%;<br /> height:22px;<br /> }<br /> .ADSub li a{<br /> font-family:Arial, Helvetica, sans-serif;<br /> font-size:12px;<br /> color:#E9E9E9;<br /> line-height:22px;<br /> text-decoration:none;<br /> }<br /> .ADSub li a:hover{<br /> color:#fff;<br /> text-decoration:none;<br /> }</p> <p>/*–產品照片名稱列表–*/<br /> #ProList{<br /> width:700px;<br /> float:right;<br /> margin:10px;<br /> }<br /> #ProList ul{<br /> float:left;<br /> border-bottom:#666 1px solid;<br /> margin:6px 8px;<br /> width:200px;<br /> }<br /> #ProList li{<br /> /*float:left; */<br /> }<br /> #ProList li.PRO{<br /> display:block;<br /> /*border: 1px solid #666;*/<br /> width:200px;<br /> height:200px;<br /> }<br /> #ProList li.NAME{<br /> text-align:center;<br /> display:block;<br /> /*margin-bottom:10px;*/<br /> }<br /> #ProList li.PRO a{<br /> }<br /> #ProList li.NAME a{<br /> font-family:Arial, Helvetica, sans-serif;<br /> font-size:12px;<br /> color:#C5C5C5;<br /> line-height:26px;<br /> text-decoration:none;<br /> }<br /> #ProList li.PRO a:hover{<br /> }<br /> #ProList li.NAME a:hover{<br /> color:#e5e5e5<br /> }</p> <p>/*—————–audio-des頁面<br /> —————–*/<br /> /*–內容寬度–*/<br /> .ProDes{<br /> display:block;<br /> width:800px;<br /> padding:10px;<br /> margin:0 auto;<br /> margin-top:20px;<br /> }<br /> /*右方描述*/<br /> #DesRight{<br /> width:360px;<br /> float:right;<br /> padding-right:20px;<br /> }<br /> h3{<br /> font-family:Arial, Helvetica, sans-serif;<br /> font-size:13px;<br /> color:#FFF;<br /> line-height:25px;<br /> }<br /> .AT{<br /> font-family:Arial, Helvetica, sans-serif;<br /> font-size:12px;<br /> color:#EBEBEB;<br /> line-height:22px;<br /> }<br /> /*–左方大小圖–*/<br /> #DesLeft{<br /> width:300px;<br /> margin-right:10px;<br /> float:left;<br /> padding-top:3px;<br /> padding-bottom:8px;<br /> }<br /> /*大圖*/<br /> .DesProPic{<br /> float:left;<br /> width:300px;<br /> height:300px;<br /> padding-top:2px;<br /> }<br /> .Back{<br /> float:right;<br /> padding-right:10px;<br /> }</p> <p></style></p> <p><script><br /> /**<br /> * 利用 javascrip 控制 選單顯示<br /> * 有兩種模式：<br /> * 1.控制單一顯示 example: <div onClick="showDisplay('show1');"><br /> * 2.控制單一顯示，其他則收起來 example: <div onClick="showDisplay('show1',3);"><br /> * 其中 show 值必需要 1 –>3 ， show1 -> show2 -> show3<br /> * @author wenchi<br /> * @version 20080604<br /> * @link <a href="http://blog.phptw.idv.tw/read-165.html" target="_blank">http://blog.phptw.idv.tw/read-165.html</a><br /> * @see <a href="http://blog.phptw.idv.tw/read-165.html" target="_blank">http://blog.phptw.idv.tw/read-165.html</a><br /> * @parm string idName 控制 的 ID,exmaple <div id="show1"><br /> * @parm int displayCount 要控的 ID 數量, 預設值 為 0<br /> * @parm string 要控制的ID 索引值 例如 show1 為show, 預設為 show<br /> * @return void<br /> */<br /> function showDisplay(idName){</p> <p>var displayCount=0;<br /> var showID="show";</p> <p>if(typeof arguments[1] == "number") var displayCount=arguments[1];<br /> if(typeof arguments[2] == "string") var showID=arguments[2];</p> <p>if (displayCount>0){<br /> for (var i=1;i<=displayCount;i++) document.getElementById(showID+i).style.display="none";<br /> }</p> <p>var result=document.getElementById(idName).style.display;</p> <p>if (result=="none") document.getElementById(idName).style.display="block";<br /> else document.getElementById(idName).style.display="none";</p> <p>return ;<br /> }</p> <p></script></p> <p></head><br /> <body></p> <p><div style="width:300px"></p> <p><ul class="ADMain" id="ADMain"></p> <p><li onClick="showDisplay('show1');"><a href="#"><span onmouseover="this.style.cursor='hand'">Westlake Audio</span></a></li><br /> <span id="show1" style="display:none"><br /> <ul class="ADSub"><!–次選單–><br /> <li><a href="#">系列一</a></li><br /> <li><a href="#">系列二</a></li><br /> </ul><br /> </span><br /> <li onClick="showDisplay('show2',4);"><a href="#"><span onmouseover="this.style.cursor='hand'">cello</span></a></li><br /> <span id="show2" style="display:none"><br /> <ul class="ADSub"><!–次選單–><br /> <li><a href="#">系列一</a></li><br /> <li><a href="#">系列二</a></li><br /> </ul><br /> </span><br /> <li onClick="showDisplay('show3');"><a href="#"><span onmouseover="this.style.cursor='hand'">Jadis</span></a></li><br /> <span id="show3" style="display:none"><br /> <ul class="ADSub"><!–次選單–><br /> <li><a href="#">系列一</a></li><br /> <li><a href="#">系列二</a></li><br /> </ul><br /> </span><br /> <li onClick="showDisplay('show4',4);"><a href="#"><span onmouseover="this.style.cursor='hand'">Wadia</span></a></li><br /> <span id="show4" style="display:none"><br /> <ul class="ADSub"><!–次選單–><br /> <li><a href="#">系列一</a></li><br /> <li><a href="#">系列二</a></li><br /> </ul><br /> </span><br /> </ul></p> <p></div></p> <p></body><br /> </html>
下載範例：20080604.rar (1.96 KB , 下載:466次)
NAME
EMAIL
Website URL
NOTE - You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
20080604.rar (1.96 KB , 下載:466次)