360导航初做（修改版） - 柒寒
360导航初做（修改版）
修正了窗口化界面，格式布局会乱的bug
HTML代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>360</title> 6 <link href="360.css" rel="stylesheet" type="text/css" /> 7 </head> 8 9 <body leftmargin="200" rightmargin="200" topmargin="100"> 10 <div id="a"> 11 <table width="943" height="150" border="0" cellpadding="0" cellspacing="0"> 12 <form> 13 <tr height="50"> 14 <td></td> 15 <td align="center"><a href="#">网页</a></td> 16 <td align="center"><a href="#">视频</a></td> 17 <td align="center"><a href="#">图片</a></td> 18 <td align="center"><a href="#">音乐</a></td> 19 <td align="center"><a href="#">微博</a></td> 20 <td align="center"><a href="#">问答</a></td> 21 </tr> 22 <tr height="50"> 23 <td align="right"><select size="1"><option>综合搜索</option> 24 <option>谷歌搜索</option> 25 <option>百度搜索</option> 26 </select></td> 27 <td align="center" width="120" colspan="6"><input type="text" size="120" /></td> 28 <td align="left"><input type="submit" value="搜一下" /></td> 29 </tr> 30 <tr height="50"> 31 <td></td> 32 <td></td> 33 <td></td> 34 </tr> 35 </form> 36 </table> 37 </div> 38 <div id="b"> 39 <table width="250" height="200" border="0" cellpadding="0" cellspacing="0"> 40 <tr align="center"> 41 <td><a href="#">新闻·视频</a></td> 42 <td><a href="#">电影·电视剧</a></td> 43 </tr> 44 <tr align="center"> 45 <td><a href="#">购物·海淘</a></td> 46 <td><a href="#">彩票·理财</a></td> 47 </tr> 48 <tr align="center"> 49 <td><a href="#">活期·定期</a></td> 50 <td><a href="#">小说·智能</a></td> 51 </tr> 52 <tr align="center"> 53 <td><a href="#">游戏·小游戏</a></td> 54 <td><a href="#">动漫·直播秀</a></td> 55 </tr> 56 </table> 57 </div> 58 <div id="c"> 59 <table width="680" height="250" border="0" cellpadding="0" cellspacing="0"> 60 <tr align="center" height="17%"> 61 <td width="17%"><a href="#">360游戏</a></td> 62 <td width="17%"><a href="#">淘宝网</a></td> 63 <td width="17%"><a href="#">网上购物</a></td> 64 <td width="17%"><a href="#">百度</a></td> 65 <td width="17%"><a href="#">360卫士</a></td> 66 <td width="17%"><a href="#">携程</a></td> 67 </tr> 68 <tr align="center" height="17%"> 69 <td width="17%"><a href="#">爱淘宝</a></td> 70 <td width="17%"><a href="#">360影视</a></td> 71 <td width="17%"><a href="#">聚划算</a></td> 72 <td width="17%"><a href="#">国美在线</a></td> 73 <td width="17%"><a href="#">理财</a></td> 74 <td width="17%"><a href="#">央视·直播</a></td> 75 </tr> 76 <tr align="center" height="17%"> 77 <td width="17%"><a href="#">京东商城财</a></td> 78 <td width="17%"><a href="#">58同城</a></td> 79 <td width="17%"><a href="#">太平洋电脑</a></td> 80 <td width="17%"><a href="#">世纪佳缘</a></td> 81 <td width="17%"><a href="#">同城旅游</a></td> 82 <td width="17%"><a href="#">中关村在线</a></td> 83 </tr> 84 <tr height="1px"> 85 <td colspan="6"><div style="border-top:1px dotted #000"></div> 86 </td> 87 </tr> 88 <tr align="center" height="17%"> 89 <td width="17%"><a href="#">汽车之家</a></td> 90 <td width="17%"><a href="#">易车网</a></td> 91 <td width="17%"><a href="#">太平洋汽车</a></td> 92 <td width="17%"><a href="#">安居客</a></td> 93 <td width="17%"><a href="#">折800</a></td> 94 <td width="17%"><a href="#">苏宁易购</a></td> 95 </tr> 96 <tr align="center" height="17%"> 97 <td width="17%"><a href="#">驴妈妈旅游</a></td> 98 <td width="17%"><a href="#">人民·新华</a></td> 99 <td width="17%"><a href="#">赶集网</a></td> 100 <td width="17%"><a href="#">当当网</a></td> 101 <td width="17%"><a href="#">途牛旅游网</a></td> 102 <td width="17%"><a href="#">1号店</a></td> 103 </tr> 104 <tr align="center" height="17%"> 105 <td width="17%"><a href="#">珍爱婚恋网</a></td> 106 <td width="17%"><a href="#">乐居二手房</a></td> 107 <td width="17%"><a href="#">亚马逊</a></td> 108 <td width="17%"><a href="#">艺龙网</a></td> 109 <td width="17%"><a href="#">去哪儿网</a></td> 110 <td width="17%"><a href="#">沪江网校</a></td> 111 </tr> 112 </table> 113 114 </div> 115 <div id="d">d</div> 116 <div id="e">e</div> 117 <div id="f">f</div> 118 <div id="g">g</div> 119 <div id="h">h</div> 120 <div id="i">i</div> 121 </body> 122 </html>
CSS代码：
1 @charset "utf-8"; 2 /* CSS Document */ 3 <style> 4 * 5 {margin:0px; 6 padding:0px;} 7 #a 8 { 9 border:2px solid #000; 10 height:150px; 11 width:940px; 12 } 13 #b 14 { 15 border:2px solid #000; 16 margin-top:10px; 17 height:200px; 18 width:250px; 19 } 20 #c 21 { 22 border:2px solid #000; 23 margin-top:10px; 24 height:250px; 25 width:680px; 26 left:460px; //把所有的right改成left即可 27 top:254px; 28 position:absolute;} 29 #d 30 { 31 border:2px solid #000; 32 margin-top:10px; 33 height:100px; 34 width:250px; 35 position:absolute;} 36 #e 37 { 38 border:2px solid #000; 39 margin-top:10px; 40 height:200px; 41 width:680px; 42 left:460px; 43 top:518px; 44 position:absolute; 45 } 46 #f 47 { 48 border:2px solid #000; 49 margin-top:10px; 50 height:800px; 51 width:250px; 52 top:580px; 53 position:absolute} 54 #g 55 { 56 border:2px solid #000; 57 margin-top:10px; 58 height:500px; 59 width:680px; 60 top:732px; 61 left:460px; 62 position:absolute;} 63 #h 64 { 65 border:2px solid #000; 66 margin-top:10px; 67 height:135px; 68 width:680px; 69 left:460px; 70 top:1245px; 71 position:absolute;} 72 #i 73 { 74 border:2px solid #000; 75 margin-top:10px; 76 height:200px; 77 width:940px; 78 top:1392px; 79 position:absolute; 80 } 81 a:link 82 { 83 color:#000; 84 text-decoration:none;} 85 a:visited 86 { 87 color:#F03; 88 text-decoration:none;} 89 a:hover{ 90 color:#F00; 91 text-decoration:underline;} 92 a:active{ 93 color:#6F0; 94 text-decoration:underline;} 95 </style>
效果为：
版权声明：本文为hanazawalove原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。