常见布局方式

来源：互联网发布：程序员硬件编辑：程序博客网时间：2024/06/05 19:34

<!DOCTYPE html><html><head>    <meta charset="utf-8"></meta>    <title>一列布局</title>    <style type="text/css">    body{margin:0; padding: 0}    .head{height: 80px;background-color: red;}    .main{width: 500px;height: 500px;background-color: #ccc;margin: 0 auto;}    .footer{width: 500px;height: 40px;background-color: green;margin: 0 auto;}    </style></head><body><div class="head"></div><div class="main"></div>><div class="footer"></div></body></html>

<!DOCTYPE html><html><head><meta charset="utf-8"></meta>    <title>两列布局</title>    <style type="text/css">    body{margin:0;padding:0;}    .left{width: 20%;height: 500px;background:#ccc;float: left;}    .right{width: 80%;height: 500px;background:#cce;float: right;}    .main{width:500px;height:500px;margin: 0 auto}    </style></head><body><div class="main"><div class="left"></div><div class="right"></div></div></body></html>

<!DOCTYPE html><html><head><meta charset="utf-8"></meta>    <title>三列布局</title>    <style type="text/css">    body{margin:0;padding:0;}    .left{width: 200px;height: 500px;background:yellow;position:absolute;top:0;left :0;}    .middle{height: 500px;background:red;float: left;margin: 0 310px 0 210px}    .right{width: 300px;height: 500px;background:green;position:absolute;top: 0; right :0}    </style></head><body><div class="left">200px</div><div class="middle">一种是设计+CSS，关键词也就是Dreamweaver+Photoshop，这种人较多，但通常计算机知识薄弱。另一种是JS+CSS，偏重浏览器内的MVC, 这种人比较少，也是业界稀缺的</div><div class="right">300px</div></div></body></html>

<!DOCTYPE html><html><head>    <meta charset="utf-8"></meta>    <title>混合布局</title>    <style type="text/css">    body{margin:0; padding: 0}    .head{height: 80px;background-color: red;}    .top{height:80px;width: 500px;background-color:grey;margin: 0 auto}    .main{width: 500px;height: 600px;background-color: #ccc;margin: 0 auto;}    .left{width: 200px;height: 600px;background-color: yellow;float: left;}    .right{width: 300px;height: 600px;background-color: pink ;float: left;}    .sub_left{width: 100PX;height: 600PX;background: black;float:left;}    .sub_right{width: 200PX;height: 600PX;background: purple;float: right;}    .footer{width: 500px;height: 40px;background-color: green;margin: 0 auto;}    </style></head><body><div class="head">    <div class="top"></div></div><div class="main">    <div class="left"></div>    <div class="right">        <div class="sub_left"></div>        <div class="sub_right"></div>    </div></div><div class="footer"></div></body></html>

0 0