Rumah >hujung hadapan web >html tutorial >多列样式布局_html/css_WEB-ITnose
多列样式布局_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:26:031142semak imbas
效果图如下：
代码如下：
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 Content172 </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 Content188 </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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：url重写_html/css_WEB-ITnoseArtikel seterusnya：每日笔记20160223_html/css_WEB-ITnose