Heim >Web-Frontend >HTML-Tutorial >多列样式布局_html/css_WEB-ITnose
多列样式布局_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:26:031142Durchsuche
效果图如下：
代码如下：
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：url重写_html/css_WEB-ITnoseNächster Artikel：每日笔记20160223_html/css_WEB-ITnose