CSS页面布局
制作布局
一列布局
例子:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>布局</title>
<style type="text/css">
body{ margin:0;padding:0}
.top{height:100px;background:blue}
.main{width:800px;height:300px;background:#ccc;margin:0 auto}
.foot{width:800px;height:100px;background:#900;margin:0 auto}
div{text-align:center}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">main</div>
<div class="foot">foot</div>
</body>
怎样去获得屏幕的自适应宽度、高度
例子:
<head>
<meta http="Content-Type" content="text/html;charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
body{margin:0;padding:0;font-szie:30px}
div{text-align:center;font-weight:bold}
.main,.footer{width:960px;margin:0 auto}
.head{width:100%;height:100px;background:#ccc}
.main{height:600px;background:#fcc}
.footer{height:50px;background:#9cf}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
两列布局
例子:自适应
<head>
<meta http=equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两列布局</title>
<style>
body{margin:0;padding:0}
.left{width:20%;height:500px;float:left;background:#ccc}
.right{width:80%;height:500px;float:right;background:#ddd}
div{text-align:center}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
例子:
<head>
<meta http=equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两列布局</title>
<style>
body{margin:0;padding:0}
.main{width:800px;margin:0 auto;background:blue}
.left{width:20%;height:518px;float:left;background:#ccc}
.right{width:80%;height:500px;float:right;background:#ddd}
div{text-align:center}
</style>
</head>
<body>
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
例子:
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8" />
<title>两列布局</title>
<style type="text/css">
body{margin:10;padding:5;font-size:30px;font-weight:bold}
div{text-align:center;line-height:50px}
.main{width:960px;height:200px;margin:0 auto}
.left{width:300px;height:600px;background:#ccc;float:left}
.right{width:600px;height:600px;background:#FCC;float:right}
</style>
</head>
<body>
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
例子:三列布局
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{margin:0;padding:0}
.left{width:33.33%;height:500px;float:left;background:#ccc}
.middle{width:33.33%;height:500px;float:left;background:#999}
.right{width:33.33%;height:500px;float:right;background:#ddd}
</style>
</head>
<body>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</body>
需要的是自适应屏幕的高度及宽度
例子:
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{margin:0;padding:0}
.left{width:200px;height:500px;background:#ccc;position:absolute;left:0;top:0}
.middle{height:500px;background:#999;margin:0 310px 0 210px}
.right{width:300px;height:500px;background:#ddd;position:absolute;right:0;top:0}
</style>
</head>
<body>
<div class="left">left200px</div>
<div class="middle">midwwwgwewghwefgwf8ywge8w过完户发改委发个好玩感悟if各位if误会误会共分为复古味顾问覅故事覅覆盖物if物管费公司公司附属国或覅㐎 和覅我和我以复合物if文化覅各位以符号位u和覅为hi乌尔禾为维护华盛顿覅剺 和覅为会务儿无就护卫富五为划分委会UI符号位复合物而UI毫无hi符号位复合物而UI