第13章利用CSS+Div进行网页布局

合集下载

DIV+CSS网页布局技巧实例

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实现网页布局及网站设计

学号：1407010222 姓名：叶亮班级：14计算机2班实验二用DIV+CSS实现网页布局及网站设计一、实验目的与要求1. 掌握HTML基本标签的应用2. 掌握CSS基本知识。

3. 掌握用DIV+CSS实现网页布局及网站设计。

二、实验内容1. 插入CSS样式表2. 建立DIV标签3. 构建网站主要内容三、源程序<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>我的推荐</title><style type="text/css">.h {font-family: 黑体;font-size: 18px;font-style:normal ;}</style><style>p {text-indent: 20px;text-align: center;line-height: 150px;word-spacing: 10px;letter-spacing: 10px;text-decoration: underline;font-family:楷体;font-style: italic;font-size: 60px;color:darkgoldenrod;font-weight: bold;}p1 {font-family: 仿宋;font-size: 30px;color:blue;font-weight: bold;}#container {width :810px;margin :auto ;background-color:aquamarine;}#header {height:150px;background-image:url(/images/1.jpg);background-repeat:round;}#main {background-color:darkorange;height :400px;margin-bottom:5px;}#lside {background-color:darkkhaki;width :403px;float :left;height :395px;margin-right:5px;margin-top:5px;background-image:url(/images/b1.jpg);background-repeat:round;}#rside {background-color:darkseagreen;width :402px;float :right;height :395px;margin-top:5px;background-image:url(/images/b2.jpg);background-repeat:round;}#footer {height :390px;background-image:url(/images/b3.jpg);background-repeat:round;}</style></head><body background="images/b.jpg"><div id="container"><div id="header"><p>经典小说推荐</p></div><div id="main"><div id="lside"><p1>历史类</p1><table width="395"height="360"border="1"><tr><td><span class="h">《大秦帝国》    华夏历史上最强大帝国的崛起与没落。

巧用DIV和CSS进行网页布局

页的优势远远不只这些。下面一起来感受
一
一
个目的是让代码易读，区块分明，强化
下用ＣＳＳ盒子模式排版的优势。
代码重用，所以结构很重要。如果用ＣＳＳ实现不了的效果，一般用表格也是很难实
＜／ｄｉｖ＞
（ｂｏｒｄｅｒ）、边界（ｍａｒｇｉｎ），而ＣＳＳ盒子模不满意，特别是色调的话，那么改起来就
式都具备这些属性。
■＾ＲＯＩＮ进葬置子之冀曲难膏
ＢＯＲＤＥＲＡ ‘
设计中常听到一些属性名如：内容实用的好处，如果是接单做网站的，如果＝ｎａｙ＞＜／ｄｉｖ＞＜ｄｉｖ？ｉｄ一”ｃｏｎｔｅｎｔ＞
ＳＳ排版网页，做到后来客户有什么＜／ｄｉｖ＞＜ｄｉｖ？ｉｄ一”ｆｏｏｔｅｒ＞＜／ｄｉｖ＞（ｐａｄｄｉｎｇ）、边框用了Ｃ
相当容易，甚至还可以定制几种风格的
最外边的大盒子要让它在页面居中，
６０像素，同时加上边ＣＳＳ文件供客户选择，又或者写一个程序并重定义其宽度为９
。－Ｉ
、
ＰＡ。Ｂ蕈竞谊予且妇簟吏尊
的大小不一的盒子和盒子的嵌套来编排离

DIV+CSS网页布局

本文有许昌网络推广为您提供DIV+CSS网页布局第一部分：DIV+CSS基础知识一、什么是DIV+CSS 网页重构DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML 网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML 或XML 等文件式样的计算机语言。

HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。

即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。

于是W3C组织进而重新从SGML 中获取营养，随后，发布了XML，XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language /）。

但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。

于是XHTML这种语言就派上了用场，XHTML语言就是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。

使得网页更加容易扩展，适合自动数据交换，并且更加规整。

说了这么多，现在该说正题了——CSS。

其实CSS单独使用除了麻烦一点之外，我个人觉得并无明显的优于HTML的好处。

而关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML（实际上有一种更好的融合：XML+XSL+Javascript）——但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。

自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。

说了这么多，其实，个中真谛，还得使用过后才知道，所以，现在就开始学习使用吧。

用CSSDIV开发技术实现网页布局

三、高级技巧
除了基本的布局实践技巧外，CSS DIV开发技术还提供了一些高级技巧，可以进一步提升网页布局的美感和效果。
1、背景图像
通过使用CSS的background-image属性，可以为网页元素添加背景图像，从而增加页面的视觉效果。此外，background-size、background-repeat和 background-position等属性还可以控制背景图像的大小、重复和位置等。
参考内容
随着互联网的快速发展，网页布局技术也在不断演进。在过去的几年里， DIV CSS布局技术成为了网页设计的主流。本次演示将介绍DIV CSS网页布局技术，包括其基本概念、优点、应用场景以及发展方向。
一、什么是DIV CSS布局技术？
DIV CSS布局技术是一种基于HTML和CSS的网页布局技术。它使用DIV标签和 CSS样式表来构建网页结构，实现网页元素的排版和样式设计。DIV CSS布局技术将网页分成若干个DIV块，每个块由一个或多个HTML元素组成，再通过CSS样式表来控制这些元素的排版、位置、颜色、字体等属性。
二、布局实践
在实践中，我们可以使用CSS DIV开发技术来实现各种复杂的网页布局。下面介绍几种常见的布局实践技巧：
1、浮动布局
浮动布局是早期实现网页布局的方法之一，通过设置浮动属性float，可以让元素左右浮动，从而实现在页面上的布局。例如，将侧边栏设置为浮动，使其浮动在页面主体内容的右侧。
在布局实践中，我们可以采用浮动布局将主体内容和侧边栏浮动在一起，同时使用定位布局将导航栏固定在页面的顶部。此外，我们还可以为网站添加背景图像，以提升页面的视觉效果。
通过分析实际案例，我们可以看到CSS DIV开发技术在网页布局中的重要性和广泛应用。在实际开发中，我们需要根据具体需求选择合适的布局技巧和方法，以提高网页的可用性和吸引力。

网页布局CSS+Div

用CSS设计网页布局实例效果，如下图所示（浏览示例页面）：本例素材及页面源代码下载该实例的每个部分都有其侧重点，其中前三项关于素材制作与设计，要求有一定的Photoshop或Fireworks操作基础，这也是网页设计的必备基础技能。

下面将学习如何一步一步的构建一个CSS页面。

本例分成以下7个部分：首先是关于如何在PS/FW中制作导航按钮素材；接着针对的是内容背景、页面的整体布局以及顶部解析等，最后一部分是如何整合CSS和XHTML。

1. 导航菜单素材的设计有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。

首先看一下完成的效果：1）玻璃质感导航图片的制作首先在Photoshop/FW中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮”，并用灰色#ECECEC进行填充。

再新建一个图层命名为“高光”，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。

然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里使用大小20px透明度为50%的橡皮刷，如下图所示。

新建一个名为“网点”的图层，用1px的铅笔工具在适当的位置绘制几个小点，示例中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序，如下图所示。

接着通过钢笔工具绘制路径创建选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。

整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差。

2）鼠标经过导航时的翻转图片创建翻转效果图片，只要简单地在原有素材基础上调整色调即可，关于文本的添加在这里就不细说了。

我们可以为每个图层调整色调，在示例中主要使用了几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B，如下图所示。

这部分涉及到一些PS/FW的基本知识，如果你不是很了解，建议先学习一些PS/FW的入门基础，毕竟Adobe合并了Macromedia之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了。

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标签来划分页面的不同区域。

CSS+DIV网页样式与布局

CSS+DIV⽹页样式与布局⼀、什么是CSS?CSS(Cascading Style Sheets),中⽂译为层叠样式表，它是⽤于控制⽹页样式并允许将样式信息与⽹页内容分离的⼀种标记性语⾔。

CSS的引⽤就是为了使得HTML语⾔能够更好地适应页⾯的美⼯设计。

它以HTML语⾔为基础，提供了丰富的格式化功能，如字体，颜⾊，背景和整体排版等，并且⽹页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显⽰器，打印机，打字机，投影仪和PDA等。

⼆、什么是DIV？DIV是层叠样式表中的定位技术，全称DIVision，即为划分。

DIV元素是⽤来为HTML（标准通⽤标记语⾔下的⼀个应⽤）⽂档内⼤块（block-level）的内容提供结构和背景的元素。

DIV就是将HTML划分为⼏块，⽅便对HTML进⾏管理。

三、为什么是CSS+DIV?what：DIV+CSS是WEB设计标准，它是⼀种⽹页的布局⽅法。

与传统中通过表格（table）布局定位的⽅式不同，它可以实现⽹页页⾯内容与表现相分离，使站点的访问及维护更加容易。

why：因为在CSS诞⽣之前，都是使⽤标签的属性来定义样式的，⽐如要实现加粗的效果，就要写“<b>加粗内容</b>”，要是定义⼀个字体是7号字，就要写“<font size=7></font>“，但是这个html标签属性提供的功能有限，size的字号不是您想定义多⼤就是多⼤，到了10就不好使了，怎么办呢，W3C就指定了CSS，⽤css来代替传统的html标签的属性功能，以弥补html标签的功能缺陷。

使⽤css的id和class属性可以很⽅便的给html标签加上⼀个特殊的标记，然后通过css的访问机制可以很⽅便的定义样式，这样，如果很多标签样式⼀致，我们就给它定义⼀个类（class），然后写样式就可以了，要是table就不⾏了，每⼀个标签都得把样式写进去，重复的标签样式造成代码臃肿，⼜难以维护div是⼀个标签，代表块级元素，⽽div嵌套div的模式就称为盒⼦模型。

Web标准网页设计教程-使用CSS+DIV布局页面

8.2.3 清除浮动
clear是层的清除属性，表示是否允许在某个元素的周围有浮动元素，它和浮动属性是一对相对立的属性，浮动属性用来设置某个元素的浮动位置，而清除属性则要去掉某个位置的浮动元素。 clear属性的值可以是left、right、both或none。left表示清除float浮动对其左侧的影响，right表示清除float浮动对其右侧的影响。如果左右都有浮动的块元素，而新的块两侧都不希望受到影响，则可以将clear参数值设置为both。
8.2.2 元素的浮动
在DIV+CSS的布局中，改变元素的位置有几种方法：通过 position属性结合4个方向可以改变元素的位置，这种改变是因为元素都被文本流限制了自身的位置；还有margin属性，它可以通过设置4个方向上与其他元素的间距而使元素产生位置移动；除此之外，还可以通过设置CSS的float浮动属性使得这些元素改变自己的位置。
用CSS+DIV布局页面
任务引入——班级网站的CSS＋DIV布局
人们现在看到的绝大多数网站都是使用CSS＋DIV进行布局的，也是Web标准网站的基本特征。班级网站也是用 CSS＋DIV进行布局的。那么如何通过CSS来控制网页的布局呢？这正是本模块的学习重点。本模块将详细介绍班级网站的布局过程以及涉及的CSS属性。
8.1.1 认识div对象
XHTML中的每个对象都拥有自己默认的显示模式。在XHTML中，显示模式分两种：block块状对象和inline行间对象。div就是一个块状对象，显示模式为display:block。块状对象指的是当前对象显示为一个方块，默认显示状态下，它将占据整行，其他的对象只能在下一行显示。如果在布局中，两个 div是前后关系，在页面中的效果就是上下显示。所以对于块状div，在页面中并非用于类似文本那样的行间排版，而是用于大面积、大区域的块状排版。

Css+Div网页样式与布局

2.理解DIV
Div是一个block对象------块对象。默认显示状态下，它将占据整行，其他的对象只能在下一行显示。
Xhtml中的所有对象，几乎都默认为两种对象类型： 1、block块状对象 2、in-line行间对象：允许下一个对象与之共享一行进行显示。
从页面显示效果发现，网页中除了文字之外，没有任何其他效果。两个div之间的关系只是前后关系，并没有出现类似于表格的田字形，因此div本身与样式没有任何关系。样式需要编写css来实现，div对象从本质上实现了与样式的分离。在css布局中，我们所做的工作可以简单归集为两件事：1、使用div将内容标记出来。2、为div编写所需的css样式。
Css+Div网页样式与布局
---网页布局之核心
计算机科学系图形图像教程
CSS+DIV简介
本章将概览CSS布局中的定位方法。所谓布局定位，即是CSS网页的核心框架。我们必须按照设计要求，首先搭建一个可视的排版框架，这个框架有着自己在页面中显示的位置、浮动方式。然后再向框架中填充排版的细节，这就是CSS布局定位的基本作用，其中最核心的两点就是浮动与定位，在了解浮动与定位之前，先认识用于浮动与定位的基本标签－div
1.认识
几乎Xhtml中的任何标签都可以用于浮动和定位，而div标签就是专门用来浮动和定位的。 Div是html中指定的、专门用于布局的容器对象，作用是把内容标识成一个块区域，并不负责其他的事情，内容的样式由CSS来处理。
使用方法： <div>内容</div> 在使用div标签时，可以加入一些属性，比如 id、class、style、align等，在使用CSS布局方面，为了实现内容与表现的分离，不应将 style等属性编写在div标签中，因此div标签只能有以下两种形式： <div id=“id名称”>内容</div> <div class=“class名称”>内容</div>

DIV+CSS网页布局技巧实例教学文案

D I V+C S S网页布局技巧实例DIV+CSS网页布局技巧实例1：设置网页整体居中的代码以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用DIV+CSS样式表控制，好像不是那么容易了，DIV+CSS网页布局技巧实例2：设置容器中的内容垂直居中如实例1设置网页整体居中的代码中内容是居容器的顶部的，而在表格布局时默认是垂直居中的，当我们需要垂直居中的时候该怎么办呢？别害怕，跟我来，也是比较简单的，只用设置容器内的行高就行了。

line-height:500px;<!DOCTYPE html PUBLIC "-//W3C//<html xmlns="/<head><meta http-equiv="Content-Type"<title>标准之路</tit<style>提示：可以先修改部分代码后再运行这是一种方法，另外和种方法就是设置的它内边距padding了，自己可以试试哟～～DIV+CSS网页布局技巧实例3：设置层的透明度有时候我们需要用到层的透明度，把下边的背景透出来，如下图：这种半透明的形式在blog上应用比较广泛，那么这种效果是怎么做出来的呢？用JS，NO,NO，既然我们是CSS布局教程，那么就尽量用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方便的记忆方法是顺时针，上右下左。

使用CSS+Div布局网页

<div style="clear:both; height:6px;"></div> 7）右侧区域布局及样式设置。右侧区域内容包括成果简介和成果展示，由此分别插入 Div 并设置 ID 为 shotcut、show。标题设置为 h1 标记，成果展示设置为图文混排样式。CSS 样式代码如下：
#shotcut{ height:auto; overflow:hidden; border:1px solid #e1e1e1;
2）设置固定宽度且居中的布局版式。单击“插入”面板“布局”分类中的“插入 Div 标签”按钮，插入 ID 为“container”的 Div 标签。在“CSS 样式”面板中，新建并设置 body、 container 的 CSS 样式，代码如下所示：
body { background-image: url(11.jpg); background-repeat: repeat-y; margin: 0px;
} #show{
height:auto; overflow:hidden; border:1px solid #e1e1e1; } ห้องสมุดไป่ตู้right h1{ height:36px; line-height:36px; width:748px; padding-left:20px; text-align:left; font-size:14px; font-weight:bold; color:#401500; border-bottom:1px solid #e1e1e1; background:#f5f4f4; } #shotcutdiv{ margin:6px;
} #container {
width: 1002px; margin:0 auto; background:url(05.jpg) repeat-y; height:auto; overflow:hidden; } 3）在 container 中依次插入“ID”为 top、banner、nav、main、bottom 的 Div 标签，其中 top 用来存放网页 Logo、标题等信息，banner 用来设置展示图片和二级标题，nav 用来设置导航条，main 用于放置文章列表等信息，bottom 用于设置版权信息。为上述 Div 标签设置 CSS 样式后的效果如图 2 所示。

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布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><link href="css.css" rel="stylesheet" type="text/css" /></head><body></body></html>这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。

DIV+CSS网页布局的6个简单步骤

DIV+CSS网页布局的6个简单步骤DIV+CSS是目前网站制作的布局方法，有别于传统的table布局，它的击败了table，成功实现了页面与布局相分离，简化网页设计源码，使得网站所站空间小、加载速度更快。

DIV+CSS网页建设中的六个简单步骤：1、首先设计顶部部分，其中包括了LOGO、MENU和一幅Banner图片;2、网页主题，根据网民的浏览习惯，一般把网页主题分为竖着的三大列；3、网页底部的版权信息。

根据以上思路，定义div的结构如下：│body {}/*这是一个HTML元素*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#MianBody {}/*页面主体*/│├#mainbody-left {} /*主体页面左边*/│└#mainbody-center {} /*主体页面中间*/│└#MainBody -right{} /*主体页面右边*/└#footer {}/*页面底部*/用DIV+CSS做一个导航栏是非常容易的，而且我们可以通过css来对导航栏的样式方便的作出调整。

用div设置导航栏一般就用 ul和ol标签。

4、高度显示效果为了更好的让各种浏览器兼容你的网站，这里设置网页高度的属性有height: 100px和_height: 100px （使用于IE6）。

5、嵌套Div能击败表格，当然少不了它的能更表格相媲美的嵌套功能了，注意，如果你想在div中加入一些图片的话，记住，图片的高度如果大于div高度的话，在IE6中则默认为是无效的，因此为了更好的让浏览器兼容就要在该css添加overflow属性，使用overloaw:hidden,就可以轻松隐藏图片超出边界的部分了。

DIV+CSS网页布局教程 DIV+CSS网页布局技巧如何实现DIV+CSS网页布局

____________________________________________________________________________________________ DIV+CSS网页设计布局教程DIV+CSS网页设计布局技巧如何实现DIV+CSS网页设计布局在网页设计过程中，DIV+CSS工具的使用非常广泛。

DIV+CSS不仅可以优化网站的布局和标签、做出精美的页面，还有助于搜索引擎抓取网页内容、提高网站排名。

下面就从网页的页面布局角度，和大家分享一下Div+CSS的使用技巧。

一、如何应用Div+CSS布局？网页设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks 等图片处理软件将需要制作的界面布局简单的构画出来，以下是已经构思好的界面布局图：下面，需要根据构思图来规划一下页面的布局，仔细分析之后不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；____________________________________________________________________________________________3、底部，包括一些版权信息。

有了以上的分析，就可以很容易的布局了，设计层如下图:根据上图，可以再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了：DIV结构如下：│body {}/*这是一个HTML元素源码天空，具体我就不说明了*/____________________________________________________________________________________________ └#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与规划已经完成。

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

改变行间距设置文字垂直居中的局限性
13.2.5 解决IE7中底部Div突出的问题
由于这是IE对于CSS支持的一个问题,我们还需要对样式进行修改以适应浏览器的显示,使其正常.这种情况在实际工作中可能会遇到一些,一般都采取这样的办法:对受影响的属性直接设置具体数值. 在本例中,既然是底部Div的宽度超出了<body>标签和其他Div, 那么只要在#Bottom的样式规则中增加指定宽度的代码: width:600px,相信就能解决问题.修改后的文件div-onecolumnbottom.html在IE7中的显示如图所示.
第13章
利用CSS+Div进行网页布局和排版
本章将讲述如何进行网页的布局和排版.所谓布局,英文名称叫做Layouts,是指网页上不同功能分区的数量以及它们之间排列的位置和顺序.从事网页布局这项工作非常像报纸的主编,将每天大大小小长短不一的新闻在固定的版面中进行摆放,以达到最好的效果. 目前,利用CSS和Div组合对页面进行布局已经成为一个公认的标准方法,而在这之前,流行甚至唯一的方式就是利用表格进行页面布局.本章就先从它们两个各自的优缺点谈起.
新浪网财经频道的两列式布局
13.3.2 设置固定宽度的两列式布局
设置固定宽度的两列式布局很简单,只需要在左列和右列中指定具体的像素值,而不是百分比就可以了.这样,当浏览器窗口改变大小的时候,左右列的宽度并不随之改变, 从而保证了内容不会因此改变显示外观. 如果需要设置左列宽度不变,右列可以随浏览器改变大小而变化的布局,可以将Body标签的总宽度设置为百分比, 同时将左列宽度设置为具体像素值,这样右列的宽度随浏览器窗口的变化也可以变化了. 还有一种方法,即利用上一节所讲述的绝对定位技术,来实现网页上不同Div的分区显示,我们将在下一节中介绍.�Βιβλιοθήκη 利用绝对定位创建的三列布局网页
13.5 用Div+CSS创建不规则网页布局
所谓不规则网页布局,多见于艺术设计类网站或者公司网站的入口页,由于打破了一半网页一行一行排列的模式,因此显得生动,整体感好,视觉冲击力强.这种形式一般只适用于网页在一屏就可以显示完全的情况下. 至于具体的实现方法,则并不新鲜:利用绝对定位,将不同内容区块散布在网页上. 图显示了一个不规则网页的布局,引自国外某设计工作室的首页.在类似这样的网页上,用绝对定位的Div会非常方便,我们察看一下这个页面的源代码就可以学习到这种方法:
13.2.3 观察与思考:三个问题
对于第一点,我们在第五章已经了解到:Div标签(还有 <ul>,<li>,<p>等)等容器,所有被其包含的元素在垂直方向上永远是顶端对齐的. 而对于第二点,我们可以通过在其他浏览器中打开相同页面来验证,代码在Firefox2中的显示如图所示.
代码13-2在Firefox2中的显示
利用表格进行页面布局
13.1.2 利用Div+CSS进行网页布局
既然利用表格进行网页布局有前面所提到的一些缺点,近年来人们开始逐渐利用Div+CSS的方法实现布局的任务. Div+CSS的方法最大的优点就是讲内容和布局分开处理,去掉了表格那么多的繁琐标签,缩减了网页文件大小.根据网页的流行结构,利用Div+CSS能够完成如下多种布局: 创建一列式网页布局. 创建两列式网页布局. 创建多列式网页布局. 创建不规则网页布局. 从下面的小节开始,我们将学习利用Div和CSS创建网页布局的具体过程.
一个不规则布局的网页
13.6 小结
本章我们首先介绍了利用表格进行网页布局的优缺点,引入了利用Div+CSS实现布局的方法,这种方法最大的优点就是能够做到内容和格式区别开,方便了网页的修改和维护. 在后面的几节中陆续介绍了用Div+CSS设置一列式,两列式,三列式和不规则布局的方法以及常见的问题,在实际使用中一定要注意以下几点: 如果要设置某个标签的宽度随浏览器大小变化而变化,则应该用百分比作为宽度值.如果要保持固定的宽度,则用具体的像素值. 如果对Div利用了Float属性,一定要设置宽度width属性. 利用了Float属性和position:absolute属性,当前标签就脱离了普通文档流,将显示在页面的上方,有可能遮挡住其他的元素. 另外,通过clear:both设置可以使其他元素回到文档流当中. 利用Div+CSS进行网页布局,有时候会出现一些问题,要多在不同的浏览器上测试,以保证效果的统一,这个过程可能需要一些技巧和耐心.
13.2.4 解决Div内容垂直居中的问题
如何令Div标签中的内容在垂直方向上也居中?这个问题可以分为两种情况: 设置图片的垂直居中: 有一种方法就是将图片设置为背景,然后指定该背景图片居中. 为此Div#Top样式规则做了如代码的修改,同时去掉<body>标签内的Img图片(防止图片重复显示),另保存为Div-OneColumnImgVertCenter.html.
13.2.1 创建一列式布到,内容是从上到于创建一列式网页布局是二列式,多列式布局的基础,详细地学习一下代码13-1对今后几个小节的学习会非常有好处. 通过阅读代码13-1,我们能够体会到格式和内容分离这一原则.格式设置都在页面开头的<style>标签内,而内容则只有很短的几行,一目了然, 而且在内容标签中除了必要的Id,type等属性外,不进行显示效果的设置. 整段代码的样式规则利用多种选择器: 类型选择器:比如其中的body和input样式规则,代表页面内所有的body 和input标签的效果. Id选择器:比如其中的#bottom,#logo,#content三段样式规则. Id选择器和后代选择器以及属性选择器的组合:比如#Content Input[type="text"]这样的样式规则. 各选择器的具体样式规则则包含我们在前面几章学习过的一些技巧:设置边框粗细,颜色以及类型(border:1px solid #FFCC00);设置标签内文字居中(text-align:center)等等,读者可以通过它们复习学过的知识.
13.1 表格还是Div
"生存还是死亡?这是一个问题."对于网页布局来说,用表格还是用Div,也是一个问题.在 Div+CSS占网页布局统治地位的今天,在学习它的时候,有必要先回顾一下表格的方法.
13.1.1 利用表格进行网页布局
利用表格进行网页布局的方法其实很简单:将网页分为几个表格, 页面上方,一般是导航条的位置,一个表格;页面中间,内容列表,新闻图片等等,分为2到3栏,一个表格;页面下部,文字导航条,版权声明等等,一个表格.如果在页面中间的内容部分有所需要,还可以在其中进一步嵌套表格.
由于margin-left设置了负值使得body左半部分在浏览器之外
13.3 用Div+CSS创建两列式网页布局
一列式布局在实际的网站中应用的并不算多,两列式乃至三列式则是网页布局的主流.有了第一节的基础,学习用Div+CSS创建两列式布局会比较容易.
13.3.1 创建基本的两列式布局
图13-11显示了新浪网财经频道首页的两列式布局.
13.2 用Div+CSS创建一列式网页布局
上一节中提到了网页布局的概念与两种布局方法,特别是传统表格布局的优劣.本小节将介绍用Div+CSS创建网页布局的具体过程. 我们已经浏览过众多的网站,从目前流行的结构来看,主流网站的网页布局一般有如下几种: 一列式布局:整个网页一列到底部,不分左右两栏,类似大部分书籍的排版方式. 两列式布局:网页主要部分分为左,右两个区域,分别放置不同的内容,类似大部分杂志的排版方式,多用于一般商业网站,博客等等. 多列式布局:网页主要部分分为左,中,右三个甚至更多的区域, 分别放置不同的内容,类似不少报纸的排版方式,多用于一般商业网站等等. 不规则布局:网页主要部分的各个区域不规则排列,多用于艺术, 设计等类别的网站. 本小节将从基本的一列式布局讲起.
13.4 用Div+CSS创建多列式网页布局
创建多列式布局类似于两列布局,理想状态下,只需要把内容部分的Div标签由两个增加到多个就好了.除此之外,还可以通过设置每一个Div标签的绝对定位来精确控制页面结构. 利用定位技术实现了一个简单的三列式网页布局,显示效果如图所示.另外,为了说明问题,先把网页最底端的Div注释掉.
指定底部Div的宽度以消除IE显示问题
13.2.6 设置Body居中的技巧
最后再来讲解一下设置Body标签居中的技巧.我们知道<body>标签可以说是页面所有和内容有关的标签的父标签,如果<body>在浏览器内容窗体里居中,那么其内部的所有标签也都会居中. 最简单的方法就是利用已经学习过的<center>标签,它可以放置在网页内容的任意标签之外(包括<body>标签),使得其之间的元素居中.但是, 这样就产生了一个问题:如果在<center>和</center>之间有标签额外设置了样式规则,但其中并没有设置居中,由于浏览器确定标签显示以样式规则为准,从而可能无法达到预期的居中效果.比如代码这样一个简单的网页: