css进行网站布局

时间:2021-12-13 19:40:52

一、一列布局(例如百度首页)

  通常用  {margin:0 auto;}  控制。

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
body
{ margin:0; padding:0; font-size:30px}
div
{ text-align:center; font-weight:bold}
.main,.footer
{ width:960px; }
.head
{ width:100%; height:100px; background:#ccc}
.main
{ height:600px; background:#FCC;margin:0 auto;}
.footer
{ height:50px; background:#9CF;margin:0 auto;}
</style>
</head>

<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>

 

二、两列布局

  通常用  {float:left/right}  控制。

<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body
{ margin:0; padding:0; font-size:30px; font-weight:bold}
div
{ text-align:center; line-height:50px}
.main
{ width:960px; height:600px; margin:0 auto}
.left
{ width:300px; height:600px; background:#ccc; float:left;}/*左浮动样式*/
.right
{ width:660px; height:600px; background:#FCC; float:right;}/*右浮动样式*/
</style>
</head>

<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

 

三、三列布局

  使用  {position:absolute;}  控制。

  1.通常设置宽度为%即可;如:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin</title>
<style type="text/css">
body
{margin:0;padding: 0;}
.main
{width: 100%;margin: 0 auto;}
.left
{width: 33.33% ;height: 500px;background-color: #ccc; float: left;}
.middle
{height: 33.33%;background-color: #999;float: left;}
.right
{width: 33.33%;height: 500px;background-color: #ddd;float: left;}
</style>
</head>
<body>
<div class="main">
<div class="left">200px</div>
<div class="middle">银杏(学名:Ginkgo biloba L.),为银杏科、银杏属落叶乔木。银杏为落叶大乔木,胸径可达4米,幼树树皮*滑,浅灰色,大树之皮灰褐色,不规则纵裂,粗糙;有长枝与生长缓慢的距状短枝。幼年及壮年树冠圆锥形,老则广卵形;枝近轮生,斜上伸展(雌株的大枝常较雄株开展)。叶互生,在长枝上辐射状散生,有细长的叶柄,扇形,两面淡绿色,无毛。在长枝上散生,在短枝上簇生。它的叶脉形式为“二歧状分叉叶脉”。在长枝上常2裂,基部宽楔形。球花雌雄异株,单性,生于短枝顶端的鳞片状叶的腋内,呈簇生状。4月开花,10月成熟,种子具长梗,下垂,常为椭圆形、长倒卵形、卵圆形或近圆球形。种皮肉质,被白粉,外种皮肉质,熟时黄色或橙黄色。</div>
<div class="right">300px</div>
</div>
</body>

  2.特殊情况,左右两列宽度固定,中间一列宽度自适应,代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin</title>
<style type="text/css">
body
{margin:0;padding: 0;}
.main
{width: 100%;margin: 0 auto;}
.left
{width: 200px ;height: 500px;background-color: #ccc;position: absolute;left: 0;top: 0;}
.middle
{height: 500px;background-color: #999;margin: 0 300px 0 200px;}
.right
{width: 300px;height: 500px;background-color: #ddd;position: absolute;right: 0;top: 0;}
</style>
</head>
<body>
<div class="main">
<div class="left">200px</div>
<div class="middle">银杏(学名:Ginkgo biloba L.),为银杏科、银杏属落叶乔木。银杏为落叶大乔木,胸径可达4米,幼树树皮*滑,浅灰色,大树之皮灰褐色,不规则纵裂,粗糙;有长枝与生长缓慢的距状短枝。幼年及壮年树冠圆锥形,老则广卵形;枝近轮生,斜上伸展(雌株的大枝常较雄株开展)。叶互生,在长枝上辐射状散生,有细长的叶柄,扇形,两面淡绿色,无毛。在长枝上散生,在短枝上簇生。它的叶脉形式为“二歧状分叉叶脉”。在长枝上常2裂,基部宽楔形。球花雌雄异株,单性,生于短枝顶端的鳞片状叶的腋内,呈簇生状。4月开花,10月成熟,种子具长梗,下垂,常为椭圆形、长倒卵形、卵圆形或近圆球形。种皮肉质,被白粉,外种皮肉质,熟时黄色或橙黄色。</div>
<div class="right">300px</div>
</div>
</body>

 

四、混合布局

  在上面三种布局的基础上进行分割即可;

<!DOCTYPE html>
<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-color: blue;}
.header
{width: 800px ;height: 100px;background-color:#f60;margin: 0 auto;}
.main
{width: 800px;height:600px;background_color:#ccc;margin: 0 auto;}
.left
{width: 200px ;height: 600px;background-color:yellow;float: left;}
.right
{width: 600px;height: 600px;background-color: #369;float: right;}
.sub_left
{width:400px;height: 600px;background-color:green;float: left;}
.sub_right
{width:200px;height: 600px;background-color:#09f;float: right;}
.footer
{width: 800px;height:100px;background-color: #900;margin: 0 auto;}
</style>
</head>
<body>
<div class="top">
<div class="header">header</div>
</div>
<div class="main">
<div class="left">left</div>
<div class="right">
<div class="sub_left">sub_left</div>
<div class="sub_right">sub_right</div>
</div>
</div>
<div class="footer">footer</div>
</body>