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>