修正了窗口化界面，格式布局会乱的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>

 

 

 

效果为：