超级牛最详细的Div+CSS布局案例

合集下载

CSS+DIV布局案例

第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：http://www.smarter.co.jp/，外围是灰色的，当中页面的正文底是白色的，非常大气。

这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放logo和banner，下面是主体内容。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是身体</p></div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。

第二个例子是告诉大家如何让页面居中，如何加上头部。

这个例子加上了尾部，这也是一种常见的页面表现形式，头部放logo和banner，中间是主体内容，尾部放copyright 等内容。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff; margin-bottom:5px;}#footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是主体</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。

典型的DIV＋CSS布局——左中右版式

典型的DIV＋CSS布局——左中右版式中，运⽤的是浮动属性；这个实例，则运⽤了绝对定位属性。

1、在#container中设置“position:relative;”，其作⽤是使得后⾯的绝对定位的基准为#container⽽不是以浏览器为其准。

2、左侧列#left_side和右侧#right_side列采⽤绝对定位，并且固定这两个div的宽度，⽽中间列#content由于需要根据浏览器⾃动调整，因此不设置类似属性。

但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px[html]1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>2.3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">4.5. <html xmlns="/1999/xhtml" >6. <head runat="server">7. <title>左中右版式</title>8. </head>9. <body>10. <form id="form1" runat="server">11. <div id="wrap">12. <div id="header">header</div>13. <div id="container">14. <div id="left_side">left_side</div>15. <div id="content">content</div>16. <div id="right_side">right-side</div>17. </div>18. <div id="footer">footer</div>19. </div>20. </form>21. </body>22. </html>[css]01. #wrap{02. width:700px;03. margin:0 auto;04. }05. #header{06. margin:20px;07. height:80px;08. border:solid 1px #0000FF;09. }10. #container{11. position:relative;12. margin:20px;13. height:400px;14. }15. #left_side{16. position:absolute;17. top:0px;18. left:0px;19. border:solid 1px #0000FF;20. width:170px;21. height:100%;22. }23. #content{24. margin:0px 190px 0px 190px;25. border:solid 1px #0000FF;26. height:100%;27. }28. #right_side{29. position:absolute;30. top:0px;31. right:0px;32. border:solid 1px #0000FF;33. width:170px;34. height:100%;35. }36. #footer{37. margin:20px;38. height:80px;39. border:solid 1px #0000FF;40.41. }。

DivCSS布局实例：很实用的图文混排CSS列表

DivCSS布局实例：很实用的图文混排CSS列表CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。

今天我们共同学习一款“图文混排CSS列表”的制作。

首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。

列表的效果如图所示：最顶部是栏目名称“模板无忧 ”与栏目导航“CSS酷站欣赏DivCSS教程CSS模板下载”。

栏目名称用标题元素Hx来表示，栏目导航可以用ul li的无序列表。

下部的三个链接区域形式基本雷同，左侧是图片链接，右侧是文章列表元素。

将左侧的图片与文字看成是一个段落，用p标签来表示，右侧的文章列表用ul li的无序列表。

有了上面的分析开始下面的HTML编码：Example Source Code<div id="list_mb5u_com"><div class="list_title"></div><div class="list_unit" id="l_showcase"></div><div class="list_unit" id="l_article"></div><div class="list_unit" id="l_templates"></div></div>将所有元素置入id为list_mb5u_com的层中，以便于进行整体布局的控制。

在其内部建立四个层，它们分别是：list_title、l_showcase、l_article、l_templates。

对于下部的三个内容层，应用同样的class，为list_unit。

divcss布局实例淘宝分析（一）

divcss布局实例淘宝分析（一）对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,谢谢,这是第一篇,淘宝顶部排版方式我们看看原始图片通过观察,我们把它分为如下图所示块具体的HTML,DIV+CSS排版样式为我们一行一行分析,1.全部的代码均在一个DIV容器(我暂时这样称呼) Head里面,我们来看看Head的写法#Head{text-align:center;}为什么Head前面有一个'#'号呢?而有的却是在前面加一个'．'比如'．Head',有时候写css的时候干脆什么也不加,比如td,body,他们有什么区别,具体怎么用,如果仔细你就会发现在HTML代码的DIV容器里面,有的是<div id='Head'></div> 而有的是这样 <div class='HackBox'></div> 从id和class字面上的意思,我们也已经了解了,id具有唯一性,而class是一个类,适用于可多次重复使用的容器,而前面什么也不带的,便是CSS里默认的通用于HTML代码的描叙,即对HTML里的代码起全局作用,比如td,便是对HTML表格里面的全部列起作用,text-align:center是指在此容器里面的文字全部居中对齐,我们注意到,行后面还有一个分号 ';',语法text-align : left | right | center | justify取值说明：left :默认值。

Divcss页面布局资料(很好很强大).

如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV 来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。

因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。

理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。

那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。

在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV 嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

div+css布局完整代码

3.CSS布局高级技巧
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
css:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两列
单行两列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
网上流传的，我觉得很经典了，你可以看原地址更清楚些。
CSS常用布局实例
一列
单行一列
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

CSS样式+DIV页面布局（水平三列）

CSS样式+DIV页面布局（水平三列）进入了WEB2.0时代后,网页设计师们,为了让页面外观与结构分离,就要用CSS样式来规范布局.用CSS样式规范布局使代码更简洁,更结构化,便站点访问和维护更加容易.在这里我们来看一下,怎么用CSS来布局的.现今网络上比较流行的页面布局是内容区水平三列的样式,下面的html代码简单的表现了这种样式:<html><head><title>CSS样式页</title><style type="text/css"></style></head><body><div id="top">这里是页首</div><div id="content"> <div id="left"> <h2 class="title">CSS</h2></div><div id="mid"></div> <div id="right"></div> </div><div id="bottom">这里是页尾</div></body></html>这里一篇关于学习DIV+CSS的学习笔记,请高人指点。

CSS div框架网页布局实例讲解

CSS div框架网页布局实例讲解在网页设计与开发中，合理的网页布局是至关重要的。

CSS提供了丰富的选择来实现网页布局，其中一种常用的方法就是使用div框架。

本文将通过实例来讲解CSS div框架的使用方法，帮助读者更好地掌握网页布局的技巧。

一、简介CSS div框架是一种通过div标签进行网页布局的方法。

通过将页面划分为不同的区域，可以更好地组织和管理网页内容。

使用div框架还可以实现响应式布局，使网页在不同设备上都能够自适应展示。

二、基本结构在使用div框架之前，首先需要理解其基本结构。

一般来说，我们使用一个大的div标签将整个页面内容包裹起来，然后在这个大的div 标签内部再创建多个小的div标签来划分不同的区域。

以下是一个基本的示例代码：```html<!DOCTYPE html><html><head><title>网页布局</title><style>#container {width: 960px;margin: 0 auto;}.header {height: 100px;background-color: #f2f2f2; }.content {height: 400px;background-color: #e6e6e6; }.sidebar {width: 300px;height: 400px;float: left;background-color: #d9d9d9; }.main {width: 660px;height: 400px;float: left;background-color: #cccccc; }.footer {height: 100px;background-color: #f2f2f2; }</style></head><body><div id="container"><div class="header"></div><div class="content"><div class="sidebar"></div> <div class="main"></div> </div><div class="footer"></div></div></body></html>```在上述代码中，我们使用了id为"container"的div标签将整个页面内容包裹起来，然后分别创建了.header、.content、.sidebar、.main和.footer这几个类名的div标签来划分页面的不同区域。

DIV+CSS网页标准布局实例教程(一)

DIV+CSS网页标准布局实例教程（一）将根据本人这些年来的从业经验，从建立站点到一个完整的div+css网页的完成，整个流程下来，希望能对各位有所帮助。

一、建立站点二、结构分析三、搭建框架四、切割效果图五、布局页面——头部和导航六、布局页面——侧边栏七、布局页面——主体部分八、底部和细节调整九、相对路径和相对于根目录路径一、建立站点在D盘建立一个MyWeb文件夹，在dreamweaver cs5(简称DW)里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。

二、结构分析创建完站点后，就需要对页面结构进行分析了，根据效果图，分析页面分为几大块，该怎么布局更合理。

从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示。

整体框架结果图如下：三、搭建框架首先在dw里新建一个html文件，保存为index.html：按照上图的方法依次插入标签，或者直接在代码视图中手工输入，代码如下：<div id="container"><div id="header">此处显示id "header" 的内容</div><div id="nav">此处显示id "nav" 的内容</div><div id="maincontent"><div id="main">此处显示id "main" 的内容</div><div id="side">此处显示id "side" 的内容</div></div><div id="footer">此处显示id "footer" 的内容</div></div>下面就新建一个css样式表文件：在DW文件菜单选择新建，然后在打开的窗口页面类型中选择css，创建后保存在css文件夹中并命名为layout.css保存后先设置全局的样式，而后写每一块单独的样式，全局样式如下：body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}ul { list-style:none;}img { border:0px;}a { color:#05a; text-decoration:none;}a:hover { color:#f00;}四、切割效果图。

CSS+DIV布局案例

这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放logo和banner，下面是主体内容。

第二个例子是告诉大家如何让页面居中，如何加上头部。

这个例子加上了尾部，这也是一种常见的页面表现形式，头部放logo和banner，中间是主体内容，尾部放copyright 等内容。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff; margin-bottom:5px;}#footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是主体</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。

DIVCSS页面布局实例

制作个人网站首页的左边栏目（leftCol）
在leftCol中只包含相册一个栏目，命名为gallery。在相册中包含相册栏目的栏目标题，使用h4标签嵌套。相册中的相片使用一个无序列表嵌套。
制作个人网站首页的中间栏目（midCol）
在midCol中包含三个垂直排列的文章列表。这三个文章列表分别为“最新日志”、“最新留言”和“旅游日志”。
1．设置文章列表的位置 2．添加文章列表 3．设置文章列表的样式
制作个人网站首页的右边栏目（rightCol）
rightCol用于放置网页的导航，使用一个无序列表嵌入导航内容。
本实例讲解如何制作个人网站的首页。内容包括：分析个人网站首页的架构分块制作个人网站首页
个人网站首页构架分析
当网页设计师制作好个人网站的首页效果图，交给页面制作人员进行网页制作。页面制作人员只需要制作出与效果图一致并且兼容主流浏览器的标准页面即可。
分块制作个人网站首页
在对效果图进行分析得到页面结构图后，就可以进行分块制作网页。制作网页的主要遵循从总体到部分，从上部到下部的顺序。
制作个人网站首页的总体布局
制作个人网站首页首先从制作其总体布局开始，然后再细分到每个块区。本实例的页面分为左中右三部分，使用左中右浮动的布局方式。
1．建立网站文件夹 2．构建整体网页的结构 3．构建整体网页的布局
实现左中右浮动布局
1．实现左中右浮动布局 2．制作lefБайду номын сангаасCol容器的背景 3．设置midCol容器的背景图 4．设置rigthCol容器的背景图

DivCss布局一两栏布局

DivCss布局一两栏布局通常网页的布局只有几种：平铺式、两栏式、三栏式，有人会说没有听说过什么平铺式，呵呵，这是我自己起的名字，指的是那种整个网页内容都在一块区域全部列出来的页面。

DivCss布局--两栏布局来源：黄超[点击放大]在制作网页的时候，不管水平方向有多少行，我们都是按照垂直方向进行整体大布局的，所以两栏和三栏的布局是十分重要的，需要熟练掌握。

本文先讲解两栏布局的基本制作方法，首先大家看一下图一，我们要制作的两栏布局就是如图一所示的，包含header（网站抬头banner）、footer（页脚，版权信息）、sidebar （边侧的工具栏）和mainbody（主要内容区域）四块内容。

拿到这个页面结构图时，首先要考虑一下页面基本结构的制作方法，要用到几个Div，虽然这个布局也能用table进行制作，但我们的目的是学习Div布局，所以一定要用Div 加上css来完成。

下面我来列举几点制作页面时我经常想到的几点：∙页面尺寸，考虑页面是否需要固定宽度和高度，如果内容超出页面如何显示；∙是否居中，考虑页面是否要居中显示；∙页面数量和可重复元素，由于网站页面不可能只有一个，所以需要统计页面数量，并且确定页面中是否有需要重复利用的元素，比如标题、导航、工具栏等。

利用好这些元素可以提高制作速度、效率，也能使页面风格统一。

∙整体布局的Div嵌套关系。

再看下图一，在首页以外的其他网页中可能用到的可重复元素有Header、Footer、和SideBar，经常变换和更换的只有MainBody里的内容了。

而且页面宽度是固定的，所以要在所有的元素外面做一个外框。

在心中打完草稿后，在着手制作就不是那么困难了。

按照以上的设想，页面的结构基本如下：<div id="Wrap"><div id="Header">页面头部</div><div id="PageBody"><div id="Sidebar">侧边栏</div><div id="MainBody">主体内容</div></div><div id="Footer">页面底部</div></div>新建一个网页，将以上代码复制到<body>与</body>之间。

div+CSS一列式布局

DIV+CSS一列式布局实例任务目标：1、学会如何运用DIV+CSS设计一列式布局，效果如图2、学会如何设置布局的自适应效果和固定宽度效果。

实施步骤：步骤1：建立站点，准备素材用DW创建一个web站点，在站点内建立文件夹images和首页index.html，将素材放到文件夹images中。

步骤2：设计整体页面属性在对整个页面布局之前，首先来设置整体网页的页面属性，打开index.html，单击菜单栏的【窗口】|【CSS样式】命令，调出CSS样式面板，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框。

进行如图所示选择。

单击“确定”按钮，弹出“保存样式表文件”对话框，输入文件名“layout”，如图单击“确定”按钮，弹出“body的CSS规则定义”对话框，选择【分类】|【方框】，在填充和边界中输入“0”，如图选择【分类】|【类型】，大小选择“12像素”，行高选择为“150%”，修饰选择为“无”，单击“应用”、“确定”按钮。

步骤3：创建网页头部不跟header在设置好页面整体属性之后，接下来要创建网页的整体布局框架，首先涉及网页的header框架，header一般包括logo（网站标志），nav（网站导航）两个部分，创建时首先建立一个header的DIV，然后在里面分别创建一个logo的DIV和一个nav的DIV。

1）设置header在index.html中，选择工具栏中的“布局”，单击插入DIV标签按钮，弹出“插入DIV 标签”对话框，在对话框中单击“新建CSS样式”按钮，弹出“新建CSS规则”对话框，进行如图所示选择和输入。

单击“确定”按钮，弹出“#header的CSS规则定义”对话框，在CSS定义页面中，选择【分类】|【方框】，输入宽为“800像素”，高为“129像素”，选择【分类】|【背景】，单击“浏览”按钮，选择文件夹images里的header.gif文件，如图：单击“确定”按钮，返回“插入DIV标签”对话框，单击“确定”按钮。

DIV+CSS实现典型的局部布局

演示示例1：演示示例：制作贵美首页的主导航菜单
制作贵美首页的主导航菜单6-3
顶部容器样式
<style type="text/css"> #header { background-image:url(images/h_bg.jpg); //设置背景图片设置背景图片 background-repeat:no-repeat; width:100%; height:130px; LOGO样式样式 } #logo { width:250px; <div id="header"> height:98px; <div id="logo"></div> float:left; <div id="menu"></div> } </div> #menu { clear:both; MENU样式样式 height:32px; } </style>
演示示例2：制作贵美－演示示例：制作贵美－疯狂购物
div ul { list-style:none; } div, ul { text-align:center; } #nav { width:100%; }
.pic { background:url(bg.gif); }
a:hover { #ff0; }
选择器的组合
li.pic { width:28px; } div#nav { text-align:center; } #nav .pic { border:1px; } #nav .pic, #nav .text { height:26px; }
顶部局部布局

DIV和CSS浮动（float,clear）的布局详解

DIV和CSS浮动（float,clear）的布局详解写在前面的话：由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。

如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。

小菜水平有限，本文仅仅是入门教程，不当之处请谅解！本文以div元素布局为例。

教程开始：首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。

如下图：可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。

注意，以上这些理论，是指标准流中的div。

小菜认为，无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。

显然标准流已经无法满足需求，这就要用到浮动。

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。

如图：从图中可以看出，由于对div2设置浮动，因此它不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。

又因为浮动是漂浮在标准流之上的，因此div2挡住了一部分div3，div3看起来变“矮”了这里div2用的是左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。

这里的靠左、靠右是说页面的左、右边缘。

如果我们把div2采用右浮动，会是如下效果：此时div2靠页面右边缘排列，不再遮挡div3，读者可以清晰的看到上面所讲的div1、div3、div4组成的流。

目前为止我们只浮动了一个div元素，多个呢？下面我们把div2和div3都加上左浮动，效果如图：同理，由于div2、div3浮动，它们不再属于标准流，因此div4会自动上移，与div1组成一个“新”标准流，而浮动是漂浮在标准流之上，因此div2又挡住了div4。

用DIVCSS实现国内经典式三行两列布局.

⽤DIVCSS实现国内经典式三⾏两列布局.
我们遇到过很多的企业⽹站或其它⼩型的展⽰类⽹站，有⼀些共同的特点，即顶部放⼀个⼤的导航或BANNER，右侧是链接或图⽚，左侧放置内容，页⾯底部放置版权信息等。

这样的形式是国内经典式的布局，我们这⾥不对它的视觉效果作过多的讨论，我们今天说说如何⽤DIV+CSS实现三⾏两列的布局。

我们看下⾯的图⽚：
这样的结构⼤家再熟悉不过了，我们该如何⽤DIV+CSS实现它呢。

我们看下⾯的分析图⽚：
它们相对应的关系如下：
顶部：header
左侧：sidebar
右侧：containe
底部：footer
主要区域：main
这个main是起什么作⽤的呢。

由于中间的sidebar、containe是两列并⾏的，我们需要设置浮动，让他们各就各位。

但我们的整个页⾯是需要居中于浏览器窗⼝的。

我们只能为他们设置⼀个容器main，让sidebar、containe在这⼀容器中浮动。

不必考虑居中问题。

⽽main就发挥了居中或设置背景的功能。

思路已很清晰，我们开始整理HTML代码：
< div id="main">
< /div>
< div id="footer">。

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。

大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。

在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。

我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。

在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。

这个在我自己刚工作时，也不能明白，感觉leader老要报告真麻烦，改一个小小的功能也要发报行，我直接修改只要15分钟，但报告却要我1个多小时的时间，现在知道了，这是份很重要的依据，可以理清自己的想法，也能够在后来项目开发的后期，再帮自己找到这个项目初期的开发的原因（写得有点玄乎，但我相信做过项目的人都理解，项目到最后常常会变味的）。

做网站先要出策划图，下面这个是策划图的示例图.这是我从网上找的，感谢西乔同学的提供（由于工作的性质，我不方便将自己的策划图公开，大家都懂的）。

我平时一般用Axure RP做网站策划图，可以推荐给大家使用，有汉化版。

但出策划图只是第一步，我手下的员工都知道我的要求，不管是改版还是新建页面，草图（我允许手画版）一定要做一张，然后一定要用PhotoShop或FireWorks等图片处理软件将需要制作的界面布局设计出来，尤其不能是因为只是修改一个小栏目就可以跳过。

因为自以为只需要5分钟的修改可能最终却因为反复调整失败后连最初的效果都恢复不了，最后造成整个页面重新做的例子我看到太多，尤其是当你的水平还不成熟时。

所以一定要有设计图，这个设计图一定要很精致，一定要和你最终想得到的网页效果一样，不要敷衍自己。

最后，最重要的来了，制作页面最重要的一点就是全局性，以“模块化”思维，将同样的“模块”抽取出来，我见过很多人在制作网站时，为了有成就感，或为了网站运营时间，或工程的压力等很多原因，都会将一个页面完成然后上线一个页面，这样的情况不仅限于小型的网站，很多大型成熟的网站也会发生这样不成熟的事情，多以网站改版时为多，修改channel页面时只考虑channel页面，首页改版时只考虑首页，结果经过几次改版之后，整个网站的页面完全没有了联系，各自为政，造成很多不能删除的冗余代码，或者是技术上改动的困难，维护起来越来越辛苦。

最后，最最重要的来了，制作页面另一个最重要的一点就是要考虑程序员，一个网站最终还是需要程序员来将网站从静态变成动态，有很多页面制作人员在制作纯HTML代码时只考虑是不是还原了设计，是不是符合W3C的要求，却忘记了程序员，结果HTML代码完全不利于开发，造成程序代码的冗余，页面展示时间过长。

这点也很需要注意的。

下面我们先从如何将页面模块化开始，我们要随时保持一个模块化的意识，其实网页就是由一个盒子叠一个盒子组合而成。

这里我们要引进一个名词－css盒模型。

css盒模型意思是DIV+CSS的重点。

就是用DIV+CSS来代替表格布局，盒模型是和table布局的一个不同点。

传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。

这种排版方式的网页代码简洁，能兼容更多的浏览器，比如PDA设备也能正常浏览。

学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。

我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。

下图将这些属性的关系表现出来margin，我们也称之为：外边距、外补丁；padding也可以称为：内边距、内补丁。

这些名称是制作人员必须要完全理解的。

看下图，我们仔细分析一下该图，来规划一下页面的布局.图片大致分为以下几个模块1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。

有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/好了，大家明白最基本的页面布局与规划了吗？下面我们会直接讲各种页面布局图的嵌套关系的处理，都是一些最常见的网页结构，代码和图片由“标准之路”提供同，感谢“标准之路”。

DIV固定宽度上下二列居中显示－超级牛最详细的Div+CSS布局案例第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：http://www.smarter.co.jp/，外围是灰色的，当中页面的正文底是白色的，非常大气。

这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放logo和banner，下面是主体内容。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} #container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是身体</p></div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container 决定。

DIV1列固定宽度居中+头部+尾部居中显示－超级牛最详细的Div+CSS布局案例第二个例子是告诉大家如何让页面居中，如何加上头部。

这个例子加上了尾部，这也是一种常见的页面表现形式，头部放logo和banner，中间是主体内容，尾部放copyright 等内容。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} #container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;} #header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff; margin-bottom:5px;}#footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是主体</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container 决定。

DIV1列固定宽度居中+头部+导航+尾部－超级牛最详细的Div+CSS布局案例第三个例子是我们在页面布局中加上了尾部，但一个标准的网站都有导航。

这个例子加上了导航，这是最常用的页面表现形式，本次例子中还涉及了另三个要点，是很多朋友在CSS定义时经常遇到的问题。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} p{margin:0;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;} #header { height:100px; background:#6cf; margin-bottom:5px;}#menu { height:30px; background:#09c;margin-bottom:5px;line-height:30px}#mainContent { height:300px; background:#cff; margin-bottom:5px;}#footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="menu">这是导航</div><div id="mainContent"><p>1列固定宽度居中+头部+导航+尾部</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图本例有三个关键要点1、p标签有默认值一样都是“margin-bottom:5px;”，如果仔细比较以前的示例，会发现，mainContent的上边界比较宽，超出了5px，原因是mainContent里嵌套了一个<p>。