效果圖如下： 代碼如下： 1 <!DOCTYPE html> 2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 <meta charset="UTF-8"> 4 <title>Doc
效果圖如下：
代碼如下：
1 <!DOCTYPE html> 2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 <meta charset="UTF-8"> 4 <title>Document</title> 5 <style> 6 * { 7 margin: 0; 8 padding: 0; 9 } 10 h2 { 11 margin: 20px 0; 12 } 13 .left1 { 14 width: 200px; 15 height: 100px; 16 green; 17 } 18 .right1 { 19 width: 60%; 20 height: 100px; 21 red; 22 } 23 .left2 { 24 width: 200px; 25 height: 100px; 26 green; 27 display: inline-block; 28 } 29 .right2 { 30 width: 60%; 31 height: 100px; 32 red; 33 display: inline-block; 34 } 35 .left3 { 36 width: 200px; 37 height: 100px; 38 float: left; 39 green; 40 } 41 .right3 { 42 width: 60%; 43 height: 100px; 44 float: right; 45 red; 46 } 47 .mainL, .sitebarL, .mainR, .sitebarR { 48 height: 200px; 49 /*font: bolder 20px/200px '微軟雅黑';*/ 50 color: #fff; 51 text-align: center; 52 } 53 .mainL { 54 width: 100%; 55 float: left; 56 } 57 .mainR { 58 width: 100%; 59 float: right; 60 } 61 .mainL .contentL { 62 height: 100%; 63 margin-right: 200px; 64 red; 65 } 66 .mainR .contentR { 67 height: 100%; 68 margin-left: 200px; 69 red; 70 } 71 .contentLR { 72 height: 100%; 73 margin-left: 200px; 74 margin-right: 200px; 75 red; 76 } 77 .sitebarL { 78 width: 200px; 79 float: left; 80 margin-right: -100%; 81 green; 82 } 83 .sitebarR { 84 width: 200px; 85 float: right; 86 margin-left: -100%; 87 green; 88 } 89 .clear { 90 width: 100%; 91 clear: both; 92 height: 10px; 93 } 94 #left { 95 float: left; 96 width: 200px; 97 height: 100px; 98 green; 99 } 100 101 #contentL { 102 height: 100px; 103 red; 104 margin-left: 200px;/*==等於右邊欄寬度==*/ 105 } 106 #right { 107 float: right; 108 width: 200px; 109 height: 100px; 110 green; 111 } 112 113 #contentR { 114 height: 100px; 115 red; 116 margin-right: 200px;/*==等於左邊欄寬度==*/ 117 } 118 #contentLR { 119 height: 100px; 120 red; 121 margin: 0 200px; 122 } 123 .cont { 124 overflow: hidden; 125 } 126 </style> 127 </head> 128 <body> 129 <h2>普通文檔佈局</h2> 130 <div class="left1">Left</div> 131 <div class="right1">Right</div> 132 <div class="clear"></div> 133 134 135 <h2>行內佈局使用inline-block</h2> 136 <div class="left2">Left</div> 137 <div class="right2">Right</div> 138 <div class="clear"></div> 139 140 141 <h2>浮動佈局float</h2> 142 <div class="left3">Left:<br> 143 width: 200px;<br> 144 height: 100px;<br> 145 float: left;<br> 146 green; 147 </div> 148 <div class="right3">Right<br> 149 width: 60%;<br> 150 height: 100px;<br> 151 float: right;<br> 152 red; 153 </div> 154 <div class="clear"></div> 155 156 157 <h2>浮動佈局float+margin正邊距與多列佈局</h2> 158 <h3>兩列</h3> 159 <div id="left"> 160 Left Sidebar<br> 161 float: left;<br> 162 width: 200px;<br> 163 height: 100px;<br> 164 green;<br> 165 </div> 166 <div id="contentL"> 167 height: 100px; 168 red; 169 margin-left: 200px;/*==等於左邊欄寬度==*/ 170 <div id="contentInner"> 171 Main Content 172 </div> 173 </div> 174 <div class="clear"></div> 175 <div id="right"> 176 Right Sidebar<br> 177 float: right;<br> 178 width: 200px;<br> 179 height: 100px;<br> 180 green; 181 </div> 182 <div id="contentR"> 183 height: 100px; 184 red; 185 margin-right: 200px;/*==等於右邊欄寬度==*/ 186 <div id="contentInner"> 187 Main Content 188 </div> 189 </div> 190 <div class="clear"></div> 191 <h3>三列</h3> 192 <div id="left"> 193 Left Sidebar<br> 194 float: left;<br> 195 width: 200px;<br> 196 height: 100px;<br> 197 green;<br> 198 </div> 199 <div id="right"> 200 Right Sidebar<br> 201 float: right;<br> 202 width: 200px;<br> 203 height: 100px;<br> 204 green; 205 </div> 206 <div id="contentLR"> 207 <div id="contentInner"> 208 Main Content<br> 209 height: 100px;<br> 210 red;<br> 211 margin: 0 200px;<br> 212 </div> 213 </div> 214 215 216 <h2>浮動佈局float+margin負邊距與多列佈局</h2> 217 <h3>兩列</h3> 218 <div class="sitebarL"> 219 <h4>左側定寬200px區塊</h4> 220 <p>width: 200px; 221 float: left; 222 margin-right: -100%; 223 green; 224 </p> 225 </div> 226 <div class="mainR"> 227 <div class="contentR"> 228 <h4>右側主體自適應區塊</h4> 229 <p>.mainR:width: 100%; 230 float: right;</p> 231 <p>.contentR:height: 100%; 232 margin-left: 200px; 233 red; 234 </p> 235 </div> 236 </div> 237 <div class="clear"></div> 238 <div class="mainL"> 239 <div class="contentL"> 240 <h4>左側主體自適應區塊</h4> 241 <p>.mainL:width: 100%; 242 float: left;</p> 243 <p>.contentL:height: 100%; 244 margin-right: 200px; 245 red;</p> 246 </div> 247 </div> 248 <div class="sitebarR"> 249 <h4>右側定寬200px區塊</h4><h4> 250 <p>width: 200px; 251 float: right; 252 margin-left: -100%; 253 green; 254 </p> 255 </h4></div> 256 <div class="clear"></div> 257 <h3>三列</h3> 258 <div class="sitebarL"> 259 <h4>左側定寬200px區塊</h4> 260 <p>width: 200px; 261 float: left; 262 margin-right: -100%; 263 green; 264 </p> 265 </div> 266 <div class="mainL"> 267 <div class="contentLR"> 268 <h4>主體自適應區塊</h4> 269 <p>.mainR:width: 100%; 270 float: left; 271 </p> 272 <p>.contentLR:height: 100%; 273 margin-left: 200px; 274 margin-right: 200px; 275 red; 276 </p> 277 </div> 278 </div> 279 <div class="sitebarR"> 280 <h4>右側定寬200px區塊</h4><h4> 281 <p>width: 200px; 282 float: right; 283 margin-left: -100%; 284 green; 285 </p> 286 </h4></div> 287 <div class="clear"></div> 288 </body></html>
