【代码片段】混合布局

来源：互联网发布：手机淘宝店怎么改店名编辑：程序博客网时间：2024/06/07 19:13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>混合布局</title>   //一列+两列<style>body{ margin:0; padding:0; font-size:30px; font-weight:bold}div{ text-align:center; line-height:50px}.head{ height:100px;background:#9CF}.left{ width:20%; height:600px; background:#ccc; float:left}.right{ width:80%; height:600px;background:#FCC; float:right}</style></head><body><div class="head">head</div><div class="left">left</div><div class="right">right</div></body></html>

</pre><pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>混合布局</title>  //固定宽度的一列+两列<style>body{ margin:0; padding:0; font-size:30px; font-weight:bold}div{ text-align:center; line-height:50px}.head, .main, .footer{ width:960px; margin:0 auto}.head{ height:100px;background:#9CF}.left{ width:240px; height:600px; background:#ccc; float:left}.right{ width:720px; height:600px;background:#FCC; float:right}.footer{ height:50px; background:#9F9; clear:both}</style></head><body><div class="head">head</div><div class="main">    <div class="left">left</div>    <div class="right">right</div></div><div class="footer">footer</div></body></html>

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>混合布局</title>   //一列+三列布局（本是两列，右边列再被分为两列）<style>body{ margin:0; padding:0; font-size:30px; font-weight:bold}div{ text-align:center; line-height:50px}.head, .main, .footer{ width:960px; margin:0 auto}.head{ height:100px;background:#9CF}.left{ width:220px; height:600px; background:#ccc; float:left}.right{ width:740px; height:600px;background:#FCC; float:right}.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}.r_sub_right{ width:200px; height:600px; background:#9FC; float:right}.footer{ height:50px; background:#9F9; clear:both}</style></head><body><div class="head">head</div><div class="main">    <div class="left">left</div>    <div class="right">    <div class="r_sub_left">sub_left        </div>        <div class=" r_sub_right">sub_right        </div>    </div></div><div class="footer">footer</div></body></html>

清除浮动有两种方法：1.clear:both    2.overflow:hidden，常用于footer</span><pre>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>混合布局</title>  //main是left和right的下面底色<style type="text/css">body{ margin:0; padding:0; font-size:30px; color:#fff}.top{height:100px;background:#ccc;}.main{background:red;position:relative;height:500px;}.left{width:200px;height:500px;background:blue;position:absolute;top:0;}.right{margin:0 0 50px 210px;background:#9C9;height:500px;}.foot{height:50px;background:#f63;}</style></head><body><div class="top">top</div><div class="main">    <div class="right">right</div>    <div class="left">left</div></div><div class="foot">foot</div></body></html>

0 0