作者子鼠
客齊集首頁的一個效果, 今天有人問我是怎麼寫的,於是晚上就又重寫了一個; 順便把那個布局再理一下；
你可以先看一下客齊集首頁的效果：http://shanghai.kijiji.cn
我試著不用position:absolute的方法； 但寫起來太難了； 後來還是用position:absolute了； 但在客齊集站上的是沒有用的；真不知道當時是怎麼寫出來的；
以下是：
以下是布局部分
複製代碼 代碼如下:
熱門活動
最新功能
服務承諾
最新成功故事
熱貼推薦
子鼠00001
子鼠00002
子鼠00003
子鼠00004
子鼠00005
以下是CSS部分：CSS還是沒有最佳化的；
複製代碼 代碼如下:
以下為JS部分：由於javascript對於我來說太難了；所以可能這部分寫的比較爛，但效果是出來了；
複製代碼 代碼如下:
以下是用到的四個圖：
看下效果吧！
<!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> /*子鼠 www.zishu.cn*/ * {margin:0;padding:0;font-size:12px;font-family:Verdana, Arial, "宋體"; list-style:none;} body {background: #FFFFCC;margin:100px 0 0 100px;} #info {border:1px solid #FFCC66;padding:30px;background:#f7f7f7;width:500px;} #kjj_tag {width:500px;border-bottom:1px solid #CCC; background:url(http://www.zishu.cn/attachments/month_0704/o200742501718.gif) repeat-x left bottom;height:30px;} #info1,#info2,#info3,#info4,#info5{ border:1px solid #ccc;border-top:none; padding:10px; background:#fff; clear:both; } h4{ font-weight:normal;float:left;border-right:1px solid #fff;} .hd {display:none;} .sw {display:block;} #info li {float:left;} #info li a{float:left; display:block; padding:4px 10px 4px 10px; color:#37572E; text-decoration:none} #info li a:hover{ background:#E9FE70; color:#000} #info ul { float:left; margin-top:-28px; padding:5px 0; position:absolute} #info .ha a{ color:#FFF} #info .ha a:hover{color:#FFF; background:none} #info .ha .hc:hover{background:url(http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat center bottom; } .ha {background:url(http://www.zishu.cn/attachments/month_0704/a20074250170.gif) no-repeat left top;margin-top:-3px;padding-top:3px;} .hb{ background:url(http://www.zishu.cn/attachments/month_0704/x200742501712.gif) no-repeat right top; margin-top:-3px; padding-top:3px;} .hc {background:url(http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat center bottom; height:17px; color:#FFF; font-weight:bold} </style> </head> <body> <ul> <li id="tag1"><h4>熱門活動</h4></li> <li id="tag2"><h4>最新功能</h4></li> <li id="tag3"><h4>服務承諾</h4></li> <li id="tag4"><h4>最新成功故事</h4></li> <li id="tag5"><h4>熱貼推薦</h4></li> </ul> 子鼠00001客齊集上海 子鼠00002客齊集北京 子鼠00003客齊集呼和浩特 子鼠00004客齊集杭州 子鼠00005客齊集總首頁 子鼠 2007.04.25. 淩晨 </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
特別說明：
1、CSS部分不是很清晰，因為寫的我都有點暈了；
2、五個TAG是隨機換的；
3、JS部分還可以再精簡一些，但要有CSS支援；
