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;}

页面代码如下：

效果下图显示：点击看大图

其中居中的关键是将“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;}

页面代码如下：

效果下图显示：点击看大图

其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。

第三个例子是我们在页面布局中加上了尾部，但一个标准的网站都有导航。这个例子加上了导航，这是最常用的页面表现形式，本次例子中还涉及了另三个要点，是很多朋友在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;}

页面代码如下：

效果下图显示：点击看大图

本例有三个关键要点

1、p标签有默认值

一样都是“margin-bottom:5px;”，如果仔细比较以前的示例，会发现，mainContent的上边界比较宽，超出了5px，原因是mainContent里嵌套了一个

。“p{margin:0;}”是将

的默认值清空。

一样的代码有

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, td

{margin:0; padding:0;}

p标签有默认值为：p{margin:1em 0;} /* p标签上下外间距为16px; */

ul标签有默认值为：ul{padding-left:40px;margin:1em 0;} /* ul 标签上下外间距为16px;左内间距为40px; */

2、px和em的换算

16px = 1em

12px = 0.75em

10px = 0.625em

3、文字垂直对齐

说到文字垂直对齐，很多人第一反应是vertical-align:middle; 但，其实如想设置文字垂直居中，那么一定要设置ling-height的属性值和height值一样，这样才会使文字垂直居中，单独设置vertical-align:middil是不会使文字垂直居中的。所以在“menu”的样式定义中我没有使用“vertical-align:middil”而是使用了“ line-height:30px”。

从这个例子开始，我们开始讲左右的布局的CSS，DIV左右布局是CSS中最复杂的。

CSS代码如下：

body { font-family:Verdana; font-size:14px; margin:0;}

#container {margin:0 auto; width:900px;}

#header { height:100px; background:#6cf; margin-bottom:5px;}

#mainContent { margin-bottom:5px;}

#sidebar { float:left; width:200px; height:500px; background:#9ff;}

#content { float:right; width:695px; height:500px; background:#cff;}

页面代码如下：

效果下图显示：点击看大图

本居中的关键是一左一右“float:left; float:right;”

本例子讲的是DIV中最复杂的DIV3列并排居中，这是DIV左右布局最复杂的，也是最难做的地方，很多新手都不能将三列并排显示，其实DIV3列并排是非常简单的。

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; margin-bottom:5px;}

#sidebar { float:left; width:200px; height:300px; background:#9ff;}

#sidebar2 { float:right; width:200px; height:300px; background:#9ff;}

#content { margin:0 205px; height:300px; background:#cff;}

页面代码如下：

效果下图显示：点击看大图

本例中的关键是先写左右，再写中间。

本例子将DIV3列并排居中配上头部和尾部，这是国外BLOG经常使用的格式。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;}

#menu { height:30px; background:#09c; margin-bottom:5px;line-height:30px}

#mainContent { height:300px; margin-bottom:5px;}

#sidebar { float:left; width:200px; height:300px; background:#9ff;}

#sidebar2 { float:right; width:200px; height:300px; background:#9ff;}

#content { margin:0 205px; height:300px; background:#cff;}

#footer { height:60px; background:#6cf;}

页面代码如下：

效果下图显示：点击看大图

本例中的关键是先写左右，再写中间。

此例子与前面的例子的区别在于当正文的高度不统一时，怎么办，这也是页面DIV布局时经常碰到的格式问题。

CSS代码如下：

body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}

.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}

#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 { }

#sidebar { float:right; width:200px; background:#9ff; margin-bottom:5px;}

#content { float:left; width:695px; background:#cff; margin-bottom:5px;}

#footer { height:60px; background:#6cf;}

页面代码如下：

效果下图显示：点击看大图

本例中的关键是

。这句话是清除浮动用的，因为我们在header和menu内设计时都可能涉及到浮动，还有sidebar栏和content，本身已经浮动了，这样如果content的高度没有sidebar高时，footer会浮动到sidebar右侧，造成整个页面错乱，采用这种方式可以有效避免错乱。

另外，sidebar和content分别采用左浮动和右浮动的方式，当然也可以采用自适应宽度，将“sidebar”和“content”按显示的次序摆放，

。将sidebar的css修改为#sidebar {float:left; width:200px; background:#9ff; margin-bottom:5px;margin-left:5px;}。

此例子与前面的例子的区别在于当正文的高度不统一时，怎么办，这也是页面DIV布局时经常碰到的格式问题。

CSS代码如下：

body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}

.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}

#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 { }

#sidebar { float:right; width:200px; background:#9ff; margin-bottom:5px;}

#content { float:left; width:695px; background:#cff; margin-bottom:5px;}

#footer { height:60px; background:#6cf;}

页面代码如下：

效果下图显示：点击看大图

这个例子使用到了JS和CSS的配合使用，关键是。这句话是用来将左边的DIV的高度与右边的自动齐平，但需要注意的，此方法只限于左边的"sidebar"的高度一定小于右边的"content"，反之则不能实现。

另外，需要注意的是，因为是使用JS，所以sidebar和content必须是使用ID，而不能使用CLASS来定义CSS，id="sidebar"。最次由于HTML是逐渐显示编译的，所以要将JS写在的前面。

写在最后的话

所有的DIV+CSS布局案例示范到此已经全部结束了，为了显示上的直观，一直都是采用整个的色块来表达效果，而实际的网页上面一般会有很多元素影响你的判断，所以一个优秀的网页布局架构师都要经历“看山是山，看山不是山，然后再看山是山”的过程。如下图一，将整个网页的效果图中华丽的部分抽去，其实整个网站的布局就是这个样子。

而页面中的一个栏目的布局，也是同样的道理，如图二。

浩辰CAD快速入门教程(三十七)使用布局视口

使用布局视口 摘要：在浩辰CAD中要用好布局，必须了解视口的应用，视口是联系模型空间和布局空间的纽带，利用视口可以将模型空间绘制的图纸按一定比例缩放后摆放到布局空间的虚拟图纸上的。在浩辰CAD中，与视口相关的操作很多，视口本身可以调整比例、尺寸、显示锁定等设置在不同的视口还可以通过冻结（隐藏）不同的图层得到不同的打印效果。下面简单给大家介绍一下视口的概念和基本操作。 什么是视口 布局空间的视口实际上跟模型空间的图形窗口是类似的，相当于一个相机的镜头，通过此镜头我们可以观察和显示模型的不同部分，也可以调整图形显示的大小，也就是我们说的缩放、平移。但布局空间视口与模型空间不同的是，为了控制打印的效果，布局空间视口的大小、比例必须严格进行控制。 布局中视口的应用非常灵活。视口可以是常规的矩形，视口还可以是圆形或任意多变形；一个布局中可以只用一个视口，也可以使用多个视口；多个视口可以用相同比例来显示三维模型的不同视图，也可以用不同比例来展示图形的整体和局部细节。设置有些设计师利用布局空间视口来拼接模型空间绘制的图形，但我并不建议大家这样去操作。 创建视口 在创建布局时，浩辰CAD已经默认创建视口，当然，读者还可以根据需要创建多个视口，下面介绍一种视口创建最常用的方法。 1、切换到布局空间，新建一个图层，在该图层上绘制好图框。关于图框，每个行业都 有图框绘制标准，读者可以查阅相关的行业标准。 2、再创建一个名为“视口”的图层，在图层上绘制一个如下图所示的矩形。需要注意 的是，在后续的操作中，我们将会把此矩形变为视口，由于我们不希望模型空间中 的图形显示在图框之外，因此，矩形也不应该超出图框之外。

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;} 页面代码如下：

效果下图显示：点击看大图 其中居中的关键是将“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;}

浅谈DIV+CSS网页制作快速布局

我从事网页设计行业，已经有两年光景了，浏览器对CSS的识别是让我最头疼的，我曾经彷徨了好一阵，然后不断的收集资料，不断地研究，终于有一点儿小小的经验适用到我的工作中去了。可能这点儿经验不算什么，但是我想还是有帮助的，特别是对于刚接触CSS不久，然后仍然徘徊的初学者们，希望对你们有所帮助和借鉴。 好啦，闲话少说，咱们言归正传https://www.wendangku.net/doc/005295745.html,e on,let's go!! 1、DIV起初布局和CSS的大方向规划 * {margin:0; padding:0;word-break:break-all;} body {background:#eeeeee url(../images/QZZT_head_bg.jpg) top center no-repeat;padding:0; margin:0; color:#333333; font-family:"宋体"; } a {color:#333333;text-decoration:none; } a:hover {color:#ba2636;text-decoration:underline; } ul, li, span, img{ padding:0; margin:0; list-style:none; } img{border:none;} .F12 { font-size:12px; } .F12 { color:#333333; } .red { color:#CC0000; } a.red { color:#CC0000; text-decoration:none; } a.red:hover { color:#CC0000; text-decoration: underline; } /*-------边框 --------------*/ .border3 { border:1px solid #e6e6e6; } .border2 {border-left:1px solid #d78327;border-right:1px solid #d78327;border-bottom:1px solid #d78327;} .border1 {border-left:1px solid #d8d8d8;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;} /*通用样式*/ .divline { height:10px; line-height:10px; width:auto; overflow:hidden; clear:both; }/*分割空间折行*/ .clearboth { width:auto; height:1px; margin-top:-1px; overflow:hidden; clear:both; }/*清除浮动实现自动折行无高度*/ 先拿这段代码来说吧，这是我以前曾经写过的一段样式。 页面起初的CSS设定一定要关系到你后面再操作中的便利和出错，所以这段代码的使用，是防止后面可能出现的错误。 “*”这个大家都知道，是通配符，也就是所有的页面内定义的对象，都会配置这一样式，里面的 word-break:break-all是要求必须在限定范围内折行，这样你做出的框内文字才会在限定范围内折行。当然，如果不折行，而是自动适应，那就没有必要用这段样式了。 body中的定义我想就不用多说了，padding,margin,border不特殊情况下，都为0。

DIV+CSS：网站首页布局实例教程

DIV+CSS：网站首页布局实例教程 第一步：页面布局与规划 在网页制作中，有许多的术语，例如：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:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

快速电脑键盘布局的优化设计

2011年江西理工大学数学建模竞赛题目（请先阅读“江西理工大学数学建模竞赛论文格式规范”） 快速电脑键盘布局的优化设计 键盘非常悠久，早在1714年，就开始相继有英、美、法、意、瑞士等国家的人发明了各种形式的打字机，最早的键盘就是那个时候用在那些技术还不成熟的打字机上的。直到1868年，“打字机之父”——美国人克里斯托夫·拉森·肖尔斯（Christopher Latham Sholes）获打字机模型专利并取得经营权经营，又于几年后设计出现代打字机的实用形式和首次规范了键盘，即现在的“QWERTY”键盘。 为什么要将键盘规范成现在这样的“QWERTY”键盘按键布局呢？这是因为最初，打字机的键盘是按照字母顺序排列的，而打字机是全机械结构的打字工具，因此如果打字速度过快，某些键的组合很容易出现卡键问题，于是克里斯托夫·拉森·肖尔斯（Christopher Latham Sholes）发明了QWERTY键盘布局，他将最常用的几个字母安置在相反方向，最大限度放慢敲键速度以避免卡键。肖尔斯在1868年申请专利，1873年使用此布局的第一台商用打字机成功投放市场。这就是为什么有今天键盘的排列方式。 QWERTY的键盘按键布局方式非常没效率。比如：大多数打字员惯用右手，但使用QWERTY键盘，左手却负担了57%的工作。两小指及左无名指是最没力气的指头，却频频要使用它们。排在中列的字母，其使用率仅占整个打字工作的30%左右，因此，为了打一个字，时常要上上下下移动指头。 1888年全美举行打字公开比赛，法院速记员马加林按照明确的指法分工展示了他的盲打技术，错误只有万分之三，使在场人惊讶不已，据记载马加林的奖金是500美元, 从这以后很多人效仿这种盲打，在美国也开始有了专门培养打字员的学校。 由于盲打技术的出现，使得击键速度足以满足日常工作的需要，然而在60年后（1934年），华盛顿一个叫德沃拉克（Dvorak）的人为使左右手能交替击打更多的单词又发明了一种新的排列方法，这个键盘可缩短训练周期1/2时间，平均速度提高35％。DVORAK键盘布局原则是：1、尽量左右手交替击打，避免单手连击；2、越排击键平均移动距离最小； 3、排在导键位置应是最常用的字母。 比DVORAK键盘更加合理、高效的是理连·莫尔特(Lillian Malt)发明的MALT键盘。它改变了原本交错的字键行列，并使拇指得到更多使用、使“后退键”（Backspace）及其他原本远离键盘中心的键更容易触到。但MALT键盘需要特别的硬件才能安装到电脑上，所以也没有得到广泛应用。 到了20世纪中期，键盘又多了一个用武之地——作为电脑的基本输入设备。另一方面，

DIV+CSS网页布局技巧实例

DIV+CSS网页布局技巧实例1：设置网页整体居中的代码

DIV+CSS网页布局技巧实例4：使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: ?property:value1; 表示所有边都是一个值value1； ?property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 ?property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 ?property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em;

边框(border) 边框的属性如下： ?border-width:1px; ?border-style:solid; ?border-color:#000; 可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下： ?background-color:#f00; ?background-image:url(background.gif); ?background-repeat:no-repeat; ?background-attachment:fixed; ?background-position:0 0; 可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：?color: transparent ?image: none

CAD布局功能实例讲解

CAD 布局功能实例讲解 巧用中望 CAD 的布局功能，能让你大大提高打印出图的速度和精确度。 很多刚入门的 CAD 绘图师不知道布局功能的用途，打印出图基本靠在模型空间里面使用打印命令。然而模型空间出图有个 很大的弊端，一般一次出图后不用修改图纸的情况很少，设计师会在出图后核对、修改，然后在 CAD 当中对图纸进行改进，然 后再出图，再修改，有时要来回这样几次，那么再出图的时候，在模型空间里打印，又要重复地设置打印的设备、纸张大小、 打印范围等等原先已经设置好的配置，有些麻烦。布局功能在这方面就有优势，打印前先把布局设置好，这样保存的图纸会把 布局里的打印参数全部记录下来，下次出图的时候就会很方便。当然布局功能不仅限于此，下面用一个例子说明如何使用布局。 首先，在模型空间绘制产品图，绘图一般是按 1：1 的比例，这样即方便绘图，也方便后面的图纸比例的计算。下图是一个 齿轮图，图中绘制了齿轮的两个视图。
在绘图区下方选项卡中选择“布局”，可以任选一个，也可以自己新建一个，然后运行菜单命令“文件——页面设置”， 弹出页面设置管理器对话框，里面默认为当前布局。选择修改，弹出界面如下图，对当前页面设置进行配置。该配置方法与打 印命令很相似，需要注意两点：打印范围选择布局，打印比例设置为 1：1。

这时在布局界面中显示的白纸就是与真实大小一样的了，一般情况下布局里会自动有个视口，选中该视口，在属性栏里更 改比例为 1：2，这样设置的目的就是说这个图形在打印出来的图纸上的比例就为 1：2。然后利用视口的夹点，把需要显示的图 形放在视口中，在拖动夹点的过程中，视口的位置会发生变化，可能不是你想要的位置，那么用 move 命令移动视口，调整到理 想的位置。最后把视口放到不能打印的层，这里是放到了 Defpoints 层，这样在打印的时候，不会把视口范围的这个方框打出 来。

网页设计基础Div+CSS布局入门教程

网页设计基础：Div+CSS布局入门教程 在网页制作中，有许多的术语，例如：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。 接下来我们在桌面新建一个文件夹，命名为“DIV+CS S布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 以下为引用的内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：

第十天 div+css网页标准布局实例教程(一)

第十天div+css网页标准布局实例教程（一） 今天学习《十天学会web标准(div+css)》的最后一个章节，本章节把前面学习的零碎内容串联起来，组织成一个网站，将根据本人这些年来的从业经验，从建立站点到一个完整的div+css网页的完成，整个流程下来，希望能对各位有所帮助。由于本节内容较多，将分三部分来讲解。 建立站点 结构分析 搭建框架 切割效果图 布局页面——头部和导航 布局页面——侧边栏 布局页面——主体部分 底部和细节调整 相对路径和相对于根目录路径 一、建立站点 前面的课程都是零碎讲解一些相关知识，那么要做一个网站，首先需要建立一个站点。那么什么是站点，为什么要建立一个站点呢？因为网站不同于其它文件，比如一个图片，放到哪个盘哪个目录下都可以访问。而网站是许多文件相互关联的，所以要专门一个目录把它们分门别类存放起来。如果搞过视频编辑的朋友都知道，需要先建立一个工程，把原始的视频文件、图片素材分类放好，也是这个道理。下面以在D盘建立一jiaocheng文件夹为例，在dreamweaver(简称DW)里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。

保存后，一个站点就建立起来了，我用的是DW cs5版本，不同版本界面有所不同。如果要连接FTP，需要设置服务器选项（后面会涉及到）。站点建立好后，我们先建立一个images和css文件夹，分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的；在dw建立需要在文件面板列表的根目录上点击右键，选择新建文件夹后更改名字即可。

DivCSS布局入门教程相当经典

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#H eader {} /*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：

大、中、小城市总体规划案例分析

柳州风貌 区位关系图 市域城镇体系空间结构规划： 大、中、小城市总体规划方案分析—— 以广西柳州、陕西宝鸡、四川绵竹广济镇为例 Part1.大城市案例—柳州 一． 概述 柳州，又称龙城，是广西重要的区域中心城市，广西工业名城、历史名城、文化名城、旅游名城。全市辖6县4区。作为广西最大的工业城市，柳州工业总量约占广西的三分之一。柳州是一座底蕴浓厚的历史名城和文化名城，也是一座充满风情的旅游名城。柳州的民族风情独具神韵，壮族的歌、瑶族的舞、苗族的节和侗族的楼，堪称柳州“民族风情四绝”。 柳州市是一个位于广西壮族自治区中北部的城市，史称“龙城”，地形为“三江四合，抱城如壶”，亦称“壶城”。 二．区域规划层面分析 1. 城镇体系现状及规划结构 2 总体思路：规划构成“一圈一带二走廊”的城镇体系空间结构。即以柳州大都市圈为主中心，融安——融水城镇带为次中心，沿湘桂线、枝柳线组织重点城镇发展走廊。 现状 ：从整体上看，属于“大城市+小城镇”的二元结构模式；中心城市是典型的政府主导的“自上而下”的城市化；其它城镇发展的主要动力是农村市场建设和乡镇企业发展“自下而上”的；第三产业日益成为城市化的又一强大动力。 规划： 由“大城市+小城镇”的模式向“特大城市+小城市”发展模式转变；由“自上而下”型城市化向“自上而下”和“自下而上”相结合的多元复合型城市化转变；由市域低水平均衡型城镇化向相对极化型城镇化转变。

柳州都市圈：以柳州为核心，拉堡、柳城、穿山、六塘、沙埔、雒容、鹿寨等为外围城镇，以产业空间为核心，形成基础设施紧密联系的都市圈，作为市域城镇体系组织结构的 核心。 融安——融水城镇带：以长安、融水为基础，以融安县浮石镇为结合点，构筑基本连片的城镇带。以此为基础，远景组建组团式结构的带形城市。 城镇发展走廊：湘桂线城镇发展走廊；枝柳线城镇发展走廊；其它次要城镇发展走廊。 中心城市（柳州）城市职能 （1）区域性综合交通枢纽； （2）区域性工业、产业与服务中心，是桂中经济 区的核心城市； （3）广西乃至西南地区重要的交通枢纽； （4）区域性文化、教育、体育产业中心； （5）多元文化融合的地区和适宜居住与创业的理 想家园。 3. 规划将城镇等级结构划分为五个层次。第一层次：大于100万；第二层次：20～50万；第三层 次：5～20万；第四层次：1～5万；第五层次：0.5～1万。 规划期内逐步形成：一个中心城市（柳州市区）、两个县级小城市（鹿寨、融安）、四个县城镇 （三江、柳江、融水、柳城）、11个重点镇（洛满镇、穿山镇、百朋镇、六塘镇、沙埔镇、东泉

DIV+CSS布局大全

目录 div＋css布局入门 (4) XHTML下css+div布局总结 (6) 网页设计DIV+CSS——第1天:选择什么样的DOCTYPE (9) 第一天 (9) 什么是DOCTYPE (10) 我们选择什么样的DOCTYPE (10) 补充 (10) 网页设计DIV+CSS——第2天:什么是名字空间 (10) 网页设计DIV+CSS——第3天:定义语言编码 (11) 网页设计DIV+CSS——第4天:调用样式表 (11) 外部调用样式表 (11) 双表法调用样式表 (12) 网页设计DIV+CSS——第5天:head区的其他设置 (12) 收藏夹小图标 (12) 为搜索引擎准备的内容 (12) 网页设计DIV+CSS——第6天:XHTML代码规范 (12) 1.所有的标记都必须要有一个相应的结束标记 (13) 2.所有标签的元素和属性的名字都必须使用小写 (13) 3.所有的XML标记都必须合理嵌套 (13) 4.所有的属性必须用引号""括起来 (13) 5.把所有<和&特殊符号用编码表示 (13) 6.给所有属性赋一个值 (13) 7.不要在注释内容中使“--” (13) 网页设计DIV+CSS——第7天:CSS入门 (14) 1.基本语法规范 (14) 2.颜色值 (14) 3.定义字体 (14)

5.派生选择器 (14) 6.id选择器 (14) 6.类别选择器 (15) 7.定义链接的样式 (15) 网页设计DIV+CSS——第8天:CSS布局入门 (15) 1.定义DIV (15) 2.CSS2盒模型 (16) 3.辅助图片一律用背景处理 (17) 网页设计DIV+CSS——第9天:第一个CSS布局实例 (17) 1.确定布局 (18) 2.定义body样式 (18) 3.定义主要的div (18) 4.100%自适应高度? (20) 网页设计DIV+CSS——第10天:自适应高度 (20) 网页设计DIV+CSS——第11天:不用表格的菜单 (21) 1.不用表格的菜单(纵向) (21) 2.不用表格的菜单(横向) (22) 网页设计DIV+CSS——第12天:校验及常见错误 (24) 1.XHTML校验 (24) 2.CSS2校验 (25) CSS的十八般技巧 (25) WEB打印实例教程 (30) Div+CSS布局入门教程 (37)

网页设计-页面布局篇(Css+Div)

网页设计-页面布局篇(Css+Div) >>目录<< 第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决各种浏览器之间的兼容性(暂不讨论)

第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。

其基本布局见下图： 主要由五个部分构成： 1.Main Navigation导航条，具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框，一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏，包含版权信息等。Width: 760px Height: 66px 第二步：创建html模板及文件目录等 1.创建html模板。代码如下：

大中小城市总体规划案例分析报告

大、中、小城市总体规划方案分析—— 以广西柳州、陕西宝鸡、四川绵竹广济镇为例 Part1.大城市案例—柳州 一．概述 柳州，又称龙城，是广西重要的区域中心城市，广西工业名城、历史名城、文化名城、旅游名城。全市辖6县4区。作为广西最大的工业城市，柳州工业总量约占广西的三分之一。柳州是一座底蕴浓厚的历史名城和文化名城，也是一座充满风情的旅游名城。柳州的民族风情独具神韵，壮族的歌、瑶族的舞、苗族的节和侗族的楼，堪称柳州“民族风情四绝”。 柳州市是一个位于广西壮族自治区中北部的城市，史称“龙城”，地形为“三江四合，抱城如壶”，亦称“壶城”。

柳州风貌 区位关系图 市域城镇体系空间结构规划： 二．区域规划层面分析 1. 城镇体系现状及规划结构 2 总体思路：规划构成“一圈一带二走廊”的城镇体系空间结构。即以柳州大都市圈为主中心，融安——融水城镇带为次中心，沿湘桂线、枝柳线组织重点城镇发展走廊。 柳州都市圈：以柳州为核心，拉堡、柳城、穿山、六塘、沙埔、雒容、鹿寨等为外围城镇，以产业空间为核心，形成基础设施紧密联系的都市圈，作为市域城镇体系组织结构的核心。 融安——融水城镇带：以长安、融水为基础，以融安县浮石镇为结合点，构筑基本连片的城镇带。以此为基础，远景组建组团式结构的带形城市。 城镇发展走廊：湘桂线城镇发展走廊；枝柳线城镇发展走廊；其它次要城镇发展走廊。 现状 ：从整体上看，属于“大城市+小城镇”的二元结构模 式；中心城市是典型的政府主导的“自上而下”的城市化；其 它城镇发展的主要动力是农村市场建设和乡镇企业发展“自下而上”的；第三产业日益成为城市化的又一强大动力。 规划： 由“大城市+小城镇”的模式向“特大城市+小城市”发展模式转变；由“自上而下”型城市化向“自上而下”和“自下而上”相结合的多元复合型城市化转变；由市域低水平均衡型城镇化向相对极化型城镇化转变。

实验四--Div+CSS网页布局

实验四 Div+CSS网页布局 一、站点规划 在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/

至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

DIV+CSS常用的Html网页布局代码

单行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 两行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center;} #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} #content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;} 三行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center; } #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } #content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } #content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 单行两列 以下是引用片段： #bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } #bodycenter #dv1 {float: left;width: 280px;} #bodycenter #dv2 {float: right;width: 410px;} 两行两列 以下是引用片段： #header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} #bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } #bodycenter #dv1 { float: left; width: 280px;} #bodycenter #dv2 { float: right;width: 410px;} 三行两列 以下是引用片段： #header{ width: 700px;margin-right: auto; margin-left: auto; } #bodycenter {width: 700px; margin-right: auto; margin-left: auto; } #bodycenter #dv1 { float: left;width: 280px;} #bodycenter #dv2 { float: right; width: 410px;} #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 单行三列 绝对定位

八种网页布局技巧

导读：文中所谓8种网页布局技巧并不是整个页面的设计布局，而是针对网页中某一部分的设计，比如导航，按钮，选项卡等经常会出现在网页中的一些设计方式。 网页设计中，内容组织恐怕是最至关重要、最影响设计品质的方面了。如何将信息组织到好的布局中，是一个网站的基础，并且应该在考虑外观之前就决定好。没有好的布局，网页信息流就不能正确传递，所有东西都不能建立起合理的联系。 在这篇文章中，我们将讨论八个布局解决方案/技巧，这些方案和技巧将有助于你创建整洁有序的内容布局。这八个技巧包括：滑门(sliders)、标签式、渐进布局(progressive layouts)、结构网格、模态窗口(modal window)、翻转元素、手风琴效果(accordions)以及超大下拉菜单(mega drop-down-menus)。 1. 滑动样式与传送带(Sliders and Carousels) 滑门(Sliders)，也可称为传送带(carousels)，是一种有序的、交互性强、十分平滑地展示内容的方式。滑门样式是一个非常流行的技巧，大家都觉得它很好用，能让你在固定的区块内填充上大量内容。没有滑门的帮助，这些内容可能就要分开放到页面中的各个地方。而大多数时候，你在使用页面空间时总是捉襟见肘。或者，有些内容是你希望“用户要求”后才出现。这有助于让用户一次只关注一个内容区块，也符合他们自己的便利需求。 滑门样式的实例 导航区提供缩略图与图标 运用滑门和幻灯样式时，最好在导航区提供图标或缩略图，以便使导航更加简单直观。缩略图和图标给用户指出明路，向他们解释当前所在位置，以及有哪些浏览选项可供选择（比如说幻灯片的导航可以是水平的，也可以是垂直的）。另外，还能方便他们快速选择特定滑门页。 Coda网站的滑门顶部设计了标签卡，他们使用的是“滑动门+标签卡”的混合样式。这个主意绝顶聪明，因为通过看缩略图，用户就能快速得知特定滑门页的内容。而且，这些图标也提供了强大的、令人印象深刻的、干净整洁的视觉支持。除了图标和标签你也可以在标题前加上小图片，或者只用数字也行。

CSS布局实例：用CSS布局网站首页

CSS布局实例：用CSS布局网站首页 第一步 下面是我们将要动手制作的设计图。如前所述，你可以阅读PSDTUTS上的这篇教程来学习如何做出这样的设计图。在这篇教程里我们只制作首页，不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对CSS布局的逐步学习，这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片，我们可以非常简单地完成这个设计。 什么是绝对定位？

一个HTML元素（比如