如何用CSS进行网页布局

1、单列布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.top{height: 100px;background: #ccc;}
.main{width: 800px;height: 300px;background: #fcc;margin: 0 auto;}
.footer{width: 800px;height: 100px;background: #9cf;margin: 0 auto;}
</style>
</head>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>

2、单列布局水平居中

.main{width: 800px;height: 300px;background: #ccc;margin: 0 auto;}

3、自适应宽度两列布局（用得比较少）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.left{width: 20%;height: 500px;float: left;background: #fcc;}
.right{width: 80%;height: 500px;float: right;background: #95c;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

4、固定宽度两列布局（用得比较多）

两栏被限制在父级div（main）中.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.main{width: 800px;margin: 0 auto;}
.left{width: 220px;height: 500px;float: left;background: #fcc;}
.right{width: 580px;height: 500px;float: right;background: #95c;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

5、自适应三列布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.main{width: 800px;margin: 0 auto;}
.left{width: 33.33%;height: 500px;float: left;background: #fcc;}
.middle{width: 33.33%;height: 500px;float: left;background: #ccc;}
.right{width: 33.33%;height: 500px;float: right;background: #95c;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>

6、案例：左侧固定200px，右侧固定300px，中间自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.main{width: 800px;margin: 0 auto;}
.left{width:200px;height: 500px;background: #fcc;position: absolute;left:0;top:0;}
.middle{height: 500px;background: #ccc;margin: 0 300px 0 200px;}
.right{width: 300px;height: 500px;background: #95c;position: absolute;right: 0;top:0;}
</style>
</head>
<body>
<div class="main">
<div class="left">200px</div>
<div class="middle">博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT非常落后的小城市，城市虽小，但是这里却有很多求知创新的人，博客园诞生的理由是如此简单。</div>
<div class="right">300px</div>
</div>
</body>
</html>

7、混合布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
body{margin: 0;padding: 0;}
.top{height: 100px;background: blue;}
.head{height: 100px;width: 800px;background: #f60;margin: 0 auto;}
.main{width: 800px;height:600px;background:#ccc;margin: 0 auto;}
.left{width:200px;height: 600px;background: #fcc;float: left;}
.right{width: 600px;height: 600px;background: #95c;float: right;}
.sub_1{width: 400px;height: 600px;background: green;float: left;}
.sub_1{width: 200px;height: 600px;background: #09f;float: right;}
.footer{width: 800px;height: 100px;background: #900;margin: 0 auto;}
</style>
</head>
<body>
<div class="top">
<div class="head"></div>
</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="sub_1"></div>
<div class="sub_2"></div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

8、要点回顾：
其实在网页制作当中，页面中的元素就是块与块之间的关系：
块挨着块；块嵌套着块；块叠压着块
通过css将这些块摆放正确，网页布局就自然完美了。

1、margin:0 auto 自动居中
2、两种分成三栏的方式：
1）两边position：absolute，left：0/right：0，top:0，
中间margin｛0 右边 0 左边｝
2）先分两栏 左右float 再分两栏左右float

时间： 2024-10-26 00:06:42

如何用CSS进行网页布局的相关文章

PHP.4-DIV+CSS标准网页布局准备工作（下）

DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百分比值参考上级元素的宽度,允许使用负值边际.如果四个值都给出了,它们分别被应用于上.右.下和左边界.如果只给出一个值,它被应用于所有边界.如果两个或三个值给出了,省略了的值与对边相等.注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值.而水平方向则不会.也可以选择使用上边界margin

PHP.3-DIV+CSS标准网页布局准备工作（上）

DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标准中,已经不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位.通过使用div盒子模型结构将各部分内容划分到不同的区块,然后用css来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,div用于搭建网站结构(框架).css用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获

DIV+CSS常用网页布局技巧！

以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left sidebar</div>  <div id="content">Main Content</div> CSS Code <style type="text/css"> *{    margin: 0;    paddi

css+div网页布局常见错误总汇

CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,体感音波通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css div的方式实现各种定位.应用应用DIV+CSS编码时很轻易犯一些错误.本文列举了一些常见的错误: 1. 检查HTML元素标签是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否正确 检查

CSS进行网页布局

https://www.imooc.com/learn/57 第1章 内容简介 1-1 内容简介 (04:47) 第2章 用HTML+CSS实现最简单的网页布局效果:一列布局 2-1 一列布局 (04:09) 2-2 练习题 2-3 编程练习 第3章 自适应宽度及固定宽度的二列布局的实现 3-1 二列布局 (03:06) 3-2 评测题目 3-3 编程练习 第4章 用position定位方法实现自适应效果的三列布局 4-1 三列布局 (03:21) 4-3 编程练习 第5章 用HTML+CSS实

利用css进行网页布局

网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说).特点:1.网页可以自适应宽度2.网页的长度理论上可以无限延长3:页面为:头部,主体部分,底部. 分栏又称为分列:一列布局 二列布局 三列布局 以及混合布局(用的最多),布局通过浮动和定位来完成(实现UI界面效果). 一列布局: body{margin:0;parding:0;}清除默认样式,各个浏览

DC10用CSS定位控制网页布局

CSS定位控制页面布局 position static(静态定位,默认值) absolute(绝对定位) 脱离文档流,根据参考物定位 relative(相对定位) 不脱离文档流,参照物为原始位置 fixed(固定定位) 绝对定位的特殊形式,参照物为浏览器窗口 没有定义宽(高)时,可通过left right(top bottom)定义 定位参照 参照物 窗口边框(默认) 包含块 包含块为定位元素 自身 坐标值 absolute top 顶边外壁 到 包含块顶边内壁 right 右边外壁 到 包含块

一个简单的模板了解css+div网页布局

直接附上最终效果图: index.html内容: <html> <!--20170730 soulsjie--> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div+css页面布局综合练习</title> <link rel="stylesheet&quo

css的网页布局用position

作业要求: 1用打色块布局国务院2要求:1代码要有缩进2要有注释,每一div都是做什么的3用外部样式表(link)4外部要是表单独一个文件夹 html <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>国务院</title> <link href="css/gwy.css"