Tag Archives: CSS

[JavasSript] 隱藏式DIV選單

Posted by TJ on 2008 年 06 月 04 日 None comments

<!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> /*產品介紹/廠商連結*/ .BR{ display:block; width:920px; margin:0 auto; text-align:right; margin-bottom:20px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #666666; padding-right:30px; float:right; } .BR ul{ float:right; } .BR li{ display:block; padding:0 10px; float:left; } .BR li a{ font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 13px; line-height: 22px; color: #CCCCCC; font-weight:bolder; text-decoration:none; } .BR li a:hover{ text-decoration:underline; } /*—-左品牌選單—–*/ #ADLeft{ margin:10px 0 0 10px; float:left; display:block; width:200px; border:1px solid #B02300; } .ADMain ul{ } .ADMain li{ margin:5px; text-align:center; background-color:#860000; height:26px; } .ADMain li a{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#C5C5C5; font-weight:bolder; line-height:26px; text-decoration:none; } .ADMain li a:hover{ color:#DDD; } /*—-左品牌次選單—–*/ .ADSub ul{ margin:0 auto; } .ADSub li{ margin:2px auto; text-align:center; display:block; background-color:#666; border-bottom: 1px solid #999; width:95%; height:22px; } .ADSub li a{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#E9E9E9; line-height:22px; text-decoration:none; } .ADSub li a:hover{ color:#fff; text-decoration:none; } /*–產品照片名稱列表–*/ #ProList{ width:700px; float:right; margin:10px; } #ProList ul{ float:left; border-bottom:#666 1px solid; margin:6px 8px; width:200px; } #ProList li{ /*float:left; */ } #ProList li.PRO{ display:block; /*border: 1px solid #666;*/ width:200px; height:200px; } #ProList li.NAME{ text-align:center; display:block; /*margin-bottom:10px;*/ } #ProList li.PRO a{ } #ProList li.NAME a{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#C5C5C5; line-height:26px; text-decoration:none; } #ProList li.PRO a:hover{ } #ProList li.NAME a:hover{ color:#e5e5e5 } /*—————–audio-des頁面 —————–*/ /*–內容寬度–*/ .ProDes{ display:block; width:800px; padding:10px; margin:0 auto; margin-top:20px; } /*右方描述*/ #DesRight{ width:360px; float:right; padding-right:20px; } h3{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#FFF; line-height:25px; } .AT{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#EBEBEB; line-height:22px; } /*–左方大小圖–*/ #DesLeft{ width:300px; margin-right:10px; float:left; padding-top:3px; padding-bottom:8px; } /*大圖*/ .DesProPic{ float:left; width:300px; height:300px; padding-top:2px; } .Back{ float:right; padding-right:10px; } </style> <script> /** * 利用 javascrip 控制選單顯示 * 有兩種模式： * 1.控制單一顯示 example: <div onClick="showDisplay('show1');"> * 2.控制單一顯示，其他則收起來 example: <div onClick="showDisplay('show1',3);"> * 其中 show 值必需要 1 –>3 ， show1 -> show2 -> show3 * @author wenchi * @version 20080604 * @link <a href="http://blog.phptw.idv.tw/read-165.html" target="_blank">http://blog.phptw.idv.tw/read-165.html</a> * @see <a href="http://blog.phptw.idv.tw/read-165.html" target="_blank">http://blog.phptw.idv.tw/read-165.html</a> * @parm string idName 控制的 ID,exmaple <div id="show1"> * @parm int displayCount 要控的 ID 數量, 預設值為 0 * @parm string 要控制的ID 索引值例如 show1 為show, 預設為 show * @return void */ function showDisplay(idName){ var displayCount=0; var showID="show"; if(typeof arguments[1] == "number") var displayCount=arguments[1]; if(typeof arguments[2] == "string") var showID=arguments[2]; if (displayCount>0){ for (var i=1;i<=displayCount;i++) document.getElementById(showID+i).style.display="none"; } var result=document.getElementById(idName).style.display; if (result=="none") document.getElementById(idName).style.display="block"; else document.getElementById(idName).style.display="none"; return ; } </script> </head> <body> <div style="width:300px"> <ul class="ADMain" id="ADMain"> <li onClick="showDisplay('show1');"><a href="#">Westlake Audio</a></li> <ul class="ADSub"><!–次選單–> <li><a href="#">系列一</a></li> <li><a href="#">系列二</a></li> </ul> <li onClick="showDisplay('show2',4);"><a href="#">cello</a></li> <ul class="ADSub"><!–次選單–> <li><a href="#">系列一</a></li> <li><a href="#">系列二</a></li> </ul> <li onClick="showDisplay('show3');"><a href="#">Jadis</a></li> <ul class="ADSub"><!–次選單–> <li><a href="#">系列一</a></li> <li><a href="#">系列二</a></li> </ul> <li onClick="showDisplay('show4',4);"><a href="#">Wadia</a></li> <ul class="ADSub"><!–次選單–> <li><a href="#">系列一</a></li> <li><a href="#">系列二</a></li> </ul> </ul> </div> </body> </html>

下載範例：下載檔案 20080604.rar (1.96 KB , 下載:466次)

[SEO] [CSS] DIV+CSS佈局的網頁對網站SEO的影響

Posted by TJ on 2008 年 02 月 21 日 None comments

SEO主要就是通過對網站的結構，標籤，排版等各方面的優化，使Google等搜索引擎更容易搜索網站的內容，並且讓網站的各個網頁在GOOGLE等搜索引擎中獲得較高的評分，從而獲得較好的排名。DIV+CSS網頁佈局對SEO有哪些影響呢？

Continue reading “[SEO] [CSS] DIV+CSS佈局的網頁對網站SEO的影響” »

[SEO] [CSS] CSS+DIV重構與SEO

Posted by TJ on 2008 年 02 月 20 日 None comments

採用CSS+DIV對網站重構日趨被大家重視起來了，尤其是大型站點。其實，早些時候像阿里巴巴、163等大型門戶站點就已經完成了重構工作。個人感覺這種方法確實比傳統的TABLE形式的源碼架構強多了。

　　採用CSS+DIV進行網頁重構相對與傳統的TABLE網頁佈局而具有以下4個顯著優勢：

Continue reading “[SEO] [CSS] CSS+DIV重構與SEO” »

CSS 文繞圖的設定方式

Posted by TJ on 2007 年 12 月 17 日 None comments

CSS 圍繞圖方式有很多種，下面介紹其中一種

語法如下

Continue reading “CSS 文繞圖的設定方式” »

墮落程式

養隻滑鼠看世界

Tag Archives: CSS

[JavasSript] 隱藏式DIV選單

[SEO] [CSS] DIV+CSS佈局的網頁對網站SEO的影響

[SEO] [CSS] CSS+DIV重構與SEO

CSS 文繞圖的設定方式

最新文章

文章分類

標籤

Archives