360导航框架

TENOKAWA 2021-12-13 原文

1.CSS代码

 1 @charset "utf-8";
 2 /* CSS Document */
 3 #a
 4 {
 5     border:1px solid #999;
 6     width:1000px;
 7     height:90px;
 8     margin-top:10px;
 9     position:relative;
10 }
11 #b
12 {
13     border:1px solid #999;
14     width:1000px;
15     height:38px;
16     margin-top:10px;
17     position:relative;
18 }
19 #c
20 {
21     border:1px solid #999;
22     width:240px;
23     height:238px;
24     float:left;
25     margin-top:10px;
26     position:relativel;
27 }
28 #d
29 {
30     border:1px solid #999;
31     width:750px;
32     height:287px;
33     left:250px;
34     margin-top:10px;
35     position:relative;
36 }
37 #e
38 {
39     border:1px solid #999;
40     width:240px;
41     height:119px;
42     top:-40px;
43     position:relative;
44 }
45 #f
46 {
47     border:1px solid #999;
48     width:240px;
49     height:1333px;
50     top:-30px;
51     position:relative;
52 }
53 #g
54 {
55     border:1px solid #999;
56     width:750px;
57     height:1305px;
58     left:250px;
59     margin-top:-1443px;
60     position:relative;
61 }
62 #h
63 {
64     border:1px solid #999;
65     width:750px;
66     height:98px;
67     left:250px;
68     margin-top:5px;
69     position:relative;
70 }
71 #i
72 {
73     border:1px solid #999;
74     width:1000px;
75     height:225px;
76     margin-top:10px;
77     position:relative;
78 }

2.调用代码

 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>导航</title>
 6 <link href="边框.css" rel="stylesheet" type="text/css" />
 7 </head>
 8 
 9 <body rightmargin="100" leftmargin="100" topmargin="100" bottommargin="100">
10 <div id="a">搜索a</div>
11 <div id="b">导航条b</div>
12 <div id="c">汇总c</div>
13 <div id="d">入口d</div>
14 <div id="e">广告e</div>
15 <div id="f">左侧长条f</div>
16 <div id="g">右侧汇总g</div>
17 <div id="h">汇总h</div>
18 <div id="i">最下方</div>
19 </body>
20 </html>