Author son mouse
Customer gathered home page of an effect, today someone asked me how to write, so at night and rewrite one; By the way, the layout again;
You can first look at the effect of the home page: http://shanghai.kijiji.cn
I tried not to Position:absolute, but it was too difficult to write, but it was position:absolute, but it was useless at the station; I don't know how it was written;
The following are:
Here is the Layout section
Copy CodeThe code is as follows:
Popular events
Latest Features
Service Commitment
Latest Success Stories
Hot Stickers Recommended
Child Mouse 00001
Child Mouse 00002
Child Mouse 00003
Child Mouse 00004
Child Mouse 00005
The following is the CSS part: CSS is still not optimized;
Copy CodeThe code is as follows:
The following is the JS section: Because JavaScript is too difficult for me, so maybe this part of the writing is rather rotten, but the effect is out;
Copy CodeThe code is as follows:
Here are four diagrams to use:
Look at the effect!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> guest navigation bar Test </title> <style>/* Child mouse www.zishu.cn*/* {margin:0;padding:0; Font-size:12px;font-family:verdana, Arial, "Song Body"; List-style:none;} Body {background: #FFFFCC; margin:100px 0 0 100px;} #info {border:1px solid #FFCC66;p adding: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 {Floa T: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> </pead> <body> <ul> <li id= "Tag1" ><p> Popular activities </p 4></li> <li id= "Tag2" ><p> Latest features </p></li> <li id= "TAG3" ><p> Service commitment </p></li> <li id= "Tag4" ><p> Latest success Stories </p></li > <li id= "tag5" ><p> Hot Patch recommendations </p></li> </ul> sub-mouse 00001 guests gathered in Shanghai sub-mice 00002 guests gathered in Beijing sub-mice 00003 Hohhot sub-mouse 00004 guests assembled in Hangzhou sub-mice 00005 total Home mouse 2007.04.25. Early morning </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Special Note:
1, the CSS part is not very clear, because write I have a bit dizzy;
2, five tag is a random change;
3, JS part can be further streamlined, but to have CSS support;
