divcss布局模板.docx
《divcss布局模板.docx》由会员分享，可在线阅读，更多相关《divcss布局模板.docx（7页珍藏版）》请在冰点文库上搜索。
divcss布局模板
竭诚为您提供优质文档/双击可除
div,css布局模板
篇一：
div+css布局例子
div+css布局入门教程
|20xx-6-1810:
34:
00
一、页面布局与规划
在网页制作中，有许多的术语，例如：
css、html、dhtml、xhtml等等。
在下面的文章中我们将会用到一些有关于html的基本知识，而在你
学习这篇入门教程之前，请确定你已经具有了一定的html基础。
下面我们就开始一步一步使用diV+css进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要用photoshop或Fireworks（以下简称ps或Fw）等图片处理软件将需要制作的界面布
局简单的构画出来，以下是我构思好的界面布局图。
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：
1、顶部部分，其中又包括了logo、menu和一幅banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
diV结构如下：
│body{}/*这是一个html元素，具体我就不说明了*/└#container{}/*页面层容器*/├#header{}/*页面头部*/├#pagebody{}/*页面主体*/
│├#sidebar{}/*侧边栏*/
│└#mainbody{}/*主体内容*/
└#Footer{}/*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写html代码和css。
二、写入整体层结构与css
接下来我们在桌面新建一个文件夹，命名为“diV+css布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
这是xhtml的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在标签对中写入diV的基本结构，代码如下：
为了使以后阅读代码更简易，我们应该添加
相关注释，接下来打开css.css文件，写入css信息，代码如下：
/*基本信息*/
body{font:
12pxtahoma;margin:
0px;text-align:
center;background:
#FFF;}/*页面层容器*/
#container{width:
100%}
/*页面头部*/
#header{width:
800px;margin:
0auto;height:
100px;background:
#FFcc99}/*页面主体*/
#pagebody{width:
800px;margin:
0auto;height:
400px;background:
#ccFF00}/*页面底部*/
#Footer{width:
800px;margin:
0auto;height:
50px;background:
#00FFFF}把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。
关于以上css的说明（详细请参考css2.0中文手册，网上有下载）：
1、请养成良好的注释习惯，这是非常重要的；
2、body是一个html元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；
3、讲解一些常用的css代码的含义：
font:
12pxtahoma；
这里使用了缩写，完整的代码应该是：
font-size:
12px;font-family:
tahoma；说明字体为12像素大小，字体为tahoma格式；
margin:
0px；
也使用了缩写，完整的应该是：
margin-top:
0px;margin-right:
0px;margin-bottom:
0px;margin-left:
0px或
margin:
0px0px0px0px
顺序是上/右/下/左，你也可以书写为margin:
0（缩写）；
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，
另外还有以下几种写法：
margin:
0pxauto；
说明上下边距为0px，左右为自动调整；
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
text-align:
center
文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。
background:
#FFF
设置背景色为白色，这里颜色使用了缩写，完整的应该是background:
#FFFFFF。
background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：
background:
#cccurl（bg.gif）topleftno-repeat；
表示：
使用#ccc（灰度色）填充整个层，使用bg.gif做为背景图片，
topleft
表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center
用于定位背景图片，分别表示上/右/下/左/中；还可以使用background:
url（bg.gif）20px100px;
表示x座标为20像素，y座标为100像素的精确定位；
repeat/no-repeat/repeat-x/repeat-y
分别表示填充满整个层/不填充/沿x轴填充/沿y轴填充。
height/width/color
分别表示高度（px）、宽度（px）、字体颜色（html色系表）。
4、如何使页面居中？
大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
是因为我们在#container中使用了以下属性：
margin:
0auto;
按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
通过margin:
auto我们就可以轻易地使层自动居中了。
5、这里我只介绍这些常用的css属性了，其他的请参看css2.0中文手册。
篇二：
超级牛最详细的div+css布局案例
diV固定宽度居中显示－超级牛最详细的div+css布局案例
这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
css代码如下：
body{font-family:
Verdana;font-size:
14px;margin:
0;}
#container{margin:
0auto;width:
900px;height:
500px;background:
#cd5c5c;}页面代码如下：
1列固定宽度居中
效果下图显示：
（点击看大图）
其中居中的关键是“margin:
0auto;”
代码例子由“标准之路”提供，感谢！
序－经验之谈－超级牛最详细的div+css布局案例
最近有很多晚辈问我关于网站制作方面的问题，随着seo的普及，diV+css的网站制作理念成为了流行，但在实际操作中，diV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的div+css布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
这个在我自己刚工作时，也不能明白，感觉leader老要报告真麻烦，改一个小小的功能也要发报行，我直接修改只要15分钟，但报告却要我1个多小时的时间，现在知道了，这是份很重要的依据，可以理清自己的想法，也能够在后来项目开发的后期，再帮自己找到这个项目初期的开发的原因（写得有点玄乎，但我相信做过项目的人都理解，项目到最后常常会变味的）。
做网站先要出策划图，下面这个是策划图的示例图.
这是我从网上找的，感谢西乔同学的提供（由于工作的性质，我不方便将自己的策划图公开，大家都懂的）。
我平时一般用axureRp做网站策划图，可以推荐给大家使用，有汉化版。
但出策划图只是第一步，我手下的员工都知道我的要求，不管是改版还是新建页面，草图（我允许手画版）一定要做一张，然后一定要用photoshop或Fireworks等图片处理软件将需要制作的界面布局设计出来，尤其不能是因为只是修改一个小栏目就可以跳过。
因为自以为只需要5分钟的修改可能最终却因为反复调整失败后连最初的效果都恢复不了，最
篇三：
divcss布局一两栏布局
divcss布局一两栏布局
通常网页的布局只有几种：
平铺式、两栏式、三栏式，有人会说没有听说过什么平铺式，呵呵，这是我自己起的名字，指的是那种整个网页内容都在一块区域全部列出来的页面。
divcss布局--两栏布局来源：
黄超
[点击放大]
在制作网页的时候，不管水平方向有多少行，我们都是按照垂直方向进行整体大布局的，所以两栏和三栏的布局是十分重要的，需要熟练掌握。
本文先讲解两栏布局的基本制作方法，首先大家看一下图一，我们要制作的两栏布局就是如图一所示的，包含header（网站抬头banner）、footer（页脚，版权信息）、sidebar（边侧的工具栏）和mainbody（主要内容区域）四块内容。
拿到这个页面结构图时，首先要考虑一下页面基本结构的制作方法，要用到几个div，虽然这个布局也能用table进行制作，但我们的目的是学习div布局，所以一定要用div加上css来完成。
下面我来列举几点制作页面时我经常想到的几点：
页面尺寸，考虑页面是否需要固定宽度和高度，如果内容超出页面如何显示；
是否居中，考虑页面是否要居中显示；
页面数量和可重复元素，由于网站页面不可能只有一个，所以需要统计
页面数量，并且确定页面中是否有需要重复利用的元素，比如标题、导航、工具栏等。
利用好这些元素可以提高制作速度、效率，也能使页面风格统一。
整体布局的div嵌套关系。
再看下图一，在首页以外的其他网页中可能用到的可重复元素有header、Footer、和sidebar，经常变换和更换的只有mainbody里的内容了。
而且页面宽度是固定的，所以要在所有的元素外面做一个外框。
在心中打完草稿后，在着手制作就不是那么困难了。
按照以上的设想，页面的结构基本如下：
页面头部
侧边栏
主体内容
页面底部
新建一个网页，将以上代码复制到与之间。
这些只是div的结构，在页面里只会显示出一些堆叠在一起的内容，如果想让他变成图中的样子需要css来定义。
/*基本信息*/
body{font:
12pxsimsun;margin:
0px;background:
#FFF;color:
#000;}/*页面层容器*/
#wrap{width:
900px;clear:
both;}/*页面头部*/
#header{clear:
both;height:
100px;background:
#FFcc99;}/*页面主体*/#pagebody{clear:
both;height:
400px;background:
#ccFF00;}
#sidebar{width:
200px;float:
left;}
#mainbody{width:
700px;float:
right;height:
100%;background:
#eee;}/*页面底部*/
#Footer{clear:
both;height:
50px;background:
#00FFFF;}
-->
css中加了相应的注释，想必大家会看的比较明白了，如果实在看不明白可以翻看一下原来的文章。
简单说明一下上面css的含义。
body中设置的是页面的整体效果，这里定义的是12像素宋体字，上下左右边距都为零，页面背景
色为白色，字体颜色为黑色。
wrap里定义的是最外面的边框，宽度为900像素，清楚左右两侧，也就是它独自占一行。
header定义的是页面头部div，高度为100像素，背景色为:
#FFcc99，Footer定义的是页脚部分，高度为50像素，背景色为#00FFFF。
pagebody是中间sidebar和mainbody外面的容器，为了不发生错位现象，所以需要pagebody对两侧进行清除，让它独占一行。
sidebar定义为200像素，居左显示；mainbody定义为700像素，居右显示，两者加起来是最外边框的900像素。
现在把以上的css样式表全部复制下来，粘贴到页面的与之间，然后预览一下页面。
大家可以看到，整个外框是居左的，如果想要整个外框居中显示呢？
只要把#wrap里面加上“margin:
0auto;”，变成：
#wrap{width:
900px;clear:
both;margin:
0auto;}
然后再预览一下，已经居中了吧。
升级会员 