下载文档原格式
第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：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网页布局技巧实例1：设置网页整体居中的代码以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用DIV+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不line-height:500px;<!D O CTY PE ht m l PU B LI C "-//W3C//D<ht m l xm l ns="ht t p://w w w.w3.or g/199<head><m et a ht t p-equi v="Cont ent-Type"co提示：可以先修改部分代码后再运行这是一种方法，另外和种方法就是设置的它内边距padding了，自己可以试试哟～～DIV+CSS网页布局技巧实例3：设置层的透明度有时候我们需要用到层的透明度，把下边的背景透出来，如下图：这种半透明的形式在blog上应用比较广泛，那么这种效果是怎么做出来的呢？用JS，NO, NO，既然我们是CSS布局教程，那么就尽量用CSS来解决问题！filter: alpha(opacity=70);opacity: 0.7;把这两句代码加入到要实现半透明层的CSS样式表里即可，简单吧！！注：70和0.7的值可改为你需要的<!D O CTY PE ht m l PU B LI C "-//W3C//D<ht m l xm l ns="ht t p://w w w.w3.or g/199<head><m et a ht t p-equi v="Cont ent-Type"co提示：可以先修改部分代码后再运行DIV+CSS网页布局技巧实例4：使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。
css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。
实训六Div+CSS布局示例主要内容：本周需要完成的任务：根据前几周的设计，各组创建自己的站点文件夹，并把站点内文件夹结构创建好，搜集相关素材；使用Div+CSS实现网页框架。
参考图：操作部分：Div标签及盒子模型提示：请务必做好准备工作。
在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。
如在E:/盘创建一个“myweb“文件夹。
将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”文件夹内，以备制作网页时使用。
将从FTP上下载下来的 test.html 文件，存放在自己的“myweb”文件夹内，这是一个网页HTML代码的标准模版。
将 test.html 复制一份，重命名之后以记事本的方式打开，开始编辑代码。
1.在上一节制作的网页的基础上，继续修改，使三个盒子都能居中显示。
需要修改CSS文件：body{background:url(../images/back1.jpg); margin:0;}#red,#blue,#green{margin:0 auto;}……保存后测试。
2.会发现得到如下结果：原因：#red和#blue都被添加了float:left;属性,而#green没有float属性。
结论：margin:0 auto;这种居中对齐方法，对于有浮动属性的div不起作用。
解决办法：将显示在同一行的、需要浮动的盒子，用一个大盒子套起来，这个大盒子不必浮动，也就能使margin:0 auto;这种居中对齐方法有效。
首先修改HTML文件：……<body><div id="main"><div id="red">左侧</div><div id="blue">右侧</div></div><div id="green">页脚</div></body>……然后修改CSS文件：……#main,#green{margin:0 auto;}#main{width:508px;height:200px;}……注意：HTML文件和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。
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年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
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 :默认值。
如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV 来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。
因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。
理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。
那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。
在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV 嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。
填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。
CSS样式+DIV页面布局（水平三列）进入了WEB2.0时代后,网页设计师们,为了让页面外观与结构分离,就要用CSS样式来规范布局.用CSS样式规范布局使代码更简洁,更结构化,便站点访问和维护更加容易.在这里我们来看一下,怎么用CSS来布局的.现今网络上比较流行的页面布局是内容区水平三列的样式,下面的html代码简单的表现了这种样式:<html><head><title>CSS样式页</title><style type="text/css"><!--body{text-align:center;margin: 0px;font-family: "宋体";font-size:12px;}#top,{margin:1px;border: 1px solid #000000;width:980px;}#content{width:980px;margin:1px;}#left{background: #F1F1F1;margin:5px 0px;width: 222px;float: left;}#mid{background: #DFF7FF; margin: 5px;padding: 0px;float: left;width: 548px;}#right{background: #FFEBCC; margin-top:5px;width: 200px;float: right;}#bottom{ background: #6891D2; margin:5px 1px;;width:980px;border: 1px solid #000000; }h2.title{padding:2px; background: Red;font-family: "宋体";font-size:16px;color:#ffffff;}--></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的学习笔记,请高人指点。
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固定宽度居中显示－超级牛最详细的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布局案例第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：，外围是灰色的，当中页面的正文底是白色的，非常大气。
这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放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>。
