Div+CSS布局入门教程
第7章 第2节 DIV+CSS布局网页 课件
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
Div+CSS网站布局应用教程第8章 使用CSS样式设置列表效果
8.2.2
ul无序列表
Hale Waihona Puke 无序列表是网页中常见的元素之一，用于将一组相关的列表项目排列在 一起，并且列表中的项目没有特别的想顺序。无序列表使用<li>标签来罗列 各个项目，并且每个项目前面都带有特殊符号，比如黑色实心圆等。在 CSS中，可以通过list-style-type属性对无序列表前面的符号进行控制。 list-style-type属性的语法格式如下。 list-style-type: 参数1, 参数2,…;
自测8——为网页元素赋予内 容
自测8：为网页元素赋予内容 最终文件：光盘\最终文件\第8章\8-4-1.html 视 频：光盘\视频\第8章\8-4-1.swf
8.4.2
透明度opacity属性
opacity属性用来设置一个元素的透明度，opacity取值为1时是完全不透 明的，反之，取值为0时是完全透明的。1~0之间的任何值都表示该元素的透 明度。 opacity属性的语法格式如下。 opacity: <length> | inherit;
自测2——设置列表符号
自测2：设置列表符号 最终文件：光盘\最终文件\第8章\8-2-2.html 视 频：光盘\视频\第8章\8-2-2.swf
8.2.3
list-style-image属性
在网页设计中，除了可以使用CSS样式中的列表符号，还可以使用liststyle-image属性自定义列表符号。 list-style-image属性的基本语法如下。 list-style-image: 图片地址;
自测5——制作复杂新闻列表
自测5：制作复杂新闻列表 最终文件：光盘\最终文件\第8章\8-2-5.html 视 频：光盘\视频\第8章\8-2-5.swf
第19章 DIV+CSS页面布局实例：制作
19.7
制作个人博客分页
个人博客的分页包括article.html、archives.html、 、 个人博客的分页包括 、 guestbook.html和about.html。这四个网页的结构和首 和 。 是一致的。 页index.html是一致的。所以在制作完成 是一致的 所以在制作完成index.html后 后 制作其他分页就变得非常简易。这也是DIV+CSS布局 ，制作其他分页就变得非常简易。这也是 布局 的一大优点。 的一大优点。有的网站在构架时候为每个分页都设置一 文件。 个CSS文件。但这样做会使网站的文件量增大，也会为 文件 但这样做会使网站的文件量增大， 后期维护修改带来一定的麻烦。 后期维护修改带来一定的麻烦。本章实例只使用一个 CSS文件，就是 文件， 文件 就是index.css。在这个文件中包含整个网站 。 样式。 的CSS样式。 样式
19.4.2 制作左边栏中网文的样式
如图19.7所示，网文没有添加任何样式，但其结构和位置都 所示，网文没有添加任何样式， 如图 所示 是正确的。接着对网文进行样式美化。 是正确的。接着对网文进行样式美化。首先对文章标题 添加样式。文章标题使用article_marker.gif图片来作为 添加样式。文章标题使用 图片来作为 背景图，设置其padding-left属性后，图片就会与文字分 属性后， 背景图，设置其 属性后 在标题中有超链接“阅读全文” 离。在标题中有超链接“阅读全文”，选择该链接后会 跳转到article.html页面。 页面。 跳页头部（header） 制作个人博客的首页头部（header）
在完成首页的整体基本布局后， 在完成首页的整体基本布局后，就可以对页面进行分块制作 首先制作网页头部header。 ，首先制作网页头部 。 header分为左右两个部分，左边是网站的 分为左右两个部分， 分为左右两个部分 左边是网站的logo，右边是网 ， 站的导航。这两个部分分别用logo和nav的容器嵌入页面 站的导航。这两个部分分别用 和 的容器嵌入页面 。在nav容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航
第6章 Div+CSS布局网页
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
CSS+Div布局全
8.5.1 练习案例-电子产品
4．利用#menu样式为menu的<div>标签添加图像背景。在#nav标签 中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”， 并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装 饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导 航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格，宽度为100%，将 三个图像分别插入到单元格中，设置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。 案例布局要求如图8-67所示，案例效果如图8-68所示。
无浮动
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; }
8.1.2 盒子属性
在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的四 个方向，分别 进行定义和设 置，描述盒子 属性。
8.1.2 盒子属性
例如，在网页中创建一个<div>标签，ID标识为 Div1，并在其中插入一个图像，代码如下：
#apDiv1 { position:absolute;
第8章DIV+CSS布局入门
机械工业出版社
8.1 认识div
8.1.2 使用div标签
1．插入div标签 2．div的嵌套
机械工业出版社
8.2 AP元素
8.2.1 AP元素与AP Div元素
1．AP元素 2．AP Div元素
机械工业出版社
8.2 AP元素
8.2.2 使用AP Div
1．插入AP Div 2．连续绘制多个AP Div 3．创建嵌套的AP Div
机械工业出版社
8.2 AP元素
8.2.3 AP Div的属性设置与相关操作
1．AP Div的属性面板
2．改变AP Div的堆叠顺序 3．调整AP Div的大小
机械工业出版社
8.3 CSS盒模型
8.3.1 什么是盒模型
盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、 内边距（padding）、边框（border）和外边距（margin）组成。
机械工业出版社
8.3 CSS盒模型
8.3.4 外边距的叠加
1．两个元素垂直相遇时叠加 2．两个元素包含时叠加
机械工业出版社
8.4 CSS的定位
8.4.1 静态定位（position:static;）
静态定位是position属性的默认值，即该元素出现在文档的常规位置， 不会重新定位。
机械工业出版社
利用CSS样式布局页面结构时，浮动（float）是使用率较高的一种定位 方式。当某个元素被赋予浮动属性后，该元素便脱离文档流向左或向右移动， 直到它的外边缘碰到包含框或另一个浮动框的边框为止。
机械工业出版社
8.5 浮动与清除浮动
8.5.2 清除浮动（clear）
在CSS样式中，浮动与清除浮动是相互对立的，使用清除浮动不仅能够 解决页面错位的现象，还能解决子级元素浮动导致父级元素背景无法自适应 子级元素高度的问题。清除浮动主要利用的是clear属性中的both（左右两侧 均不允许浮动元素）、left（左侧不允许浮动元素）和right（右侧不允许浮动 元素）3个属性值清除由浮动产生的效果。
div+css布局基础
html 静态网页设计
实例1 利用DIV+CSS来完成两列固定宽度布局(P271页)
html 静态网页设计
练习1 简单的DIV+CSS布局(P268页)
1.一列固定宽度布局：打开DW8，新建一个网页，切换到布局模式的标准模式，在当前网页中绘制 一个层，将层的ID修改为“layer”，双击CSS样式的#layer样式，按照P268页，设置背景色：
html 静态网页设计
练习2 操作提示
在DW中新建一个网页，在layout.css文件中定义样式。每个部分的样式如下所示。 1. body样式：宋体，14象素，边距为0，文字对齐居中。 2. container样式：上下边距为0，左右自动；宽度为900象素。
3. header样式：高度为100象素，背景色为：#6cf，下边空5象素。
3.新建一个类样式.blue，设置文字颜色为蓝色，并且将样式存放在bb.css文件中，在代码 中将链接到bb.css的那条代码删除，在网页中写上文字：文字蓝色，应用该样式，看找得 到该样式吗。然后在style标签之间输入：@import url(“bb.css”)，继续应用样式，思 考属于P192页的哪种添加CSS的方法；以上这条语句也可以写在外部样式文件中。
html 静态网页设计
练习3 添加样式的方法
1.新建一个HTML文件，新建一个样式body，设置宋体、12字号，并且将样式存放在aa.css 文件中，思考属于P192页的哪种添加CSS的方法；
2.新建一个类样式.hongse，设置文字颜色为红色，仅对此文档起作用，在网页中写上文字： 文字红色，应用该样式，思考属于P192页的哪种添加CSS的方法；
求来设置属性。保存预览。
html 静态网页设计
Div+CSS基础代码网页布局+实例教程
Div+css一，什么是CSSCSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。
二．DIV+CSS简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。
首先认识DIV 是用于搭建html网页结构（框架）标签，像<b>、<h1>、<span>等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。
表格以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。
例子：<table><tr><td height="100">我的高度为100px</td></tr><tr><td height="50">我高度为50px</td></tr></table>分别设置了高度为100px和50px的两行表格DIV的布局方法CSS 代码.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}Html body内代码：<div class="yangshi">演示，内容测试内容高度超出演示实例，divcss5实例</div>完整CSS html最小高度实例代码：<!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>CSS 高度实例</title><style>.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}</style></head><body><div class="yangshi">演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例</div></body></html>CSS 宽度传统Html 宽度属性单词：width 如width="300";CSS 宽度属性单词：width 如width:300px;HTML宽度与DIV+CSS对比1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。
div+css网页标准布局实例
预览一下：在IE6下#maincontent的底部外边距并没有生效，而在IE8下，#footer干脆跑到 #maincontent的下边了，这又是怎么回事呢？这就是之前我们讲的，如果一个容器内的元素
都浮动的话，那么它的高度将不会去适应内部元素的高度。解决办法是在#maincontent增加
overflow:auto; zoom:1;，这样就可以让它自动适应内部元素的高度了。 现在再预览一下，是不是都正常了。为了更加保险，建议在header、nav、maincontent、
四、切割效果图
基本框架搭建完毕后，下一步就是要分析每一块该怎么切图了。切图方法有多种，可以使用 ps或fireworks自带的切片工具，也可以用QQ的截屏或者创建新文件，把需要的部分复制过 来保存都可以，关键看个人喜好。
用ps的切片工具的话，把需要切割的区域用切片
工具切分，如果要设置图片的名称，请使用切片
html框架代码写完后，下边就需要设置css样式表了。先测量下效果图的整体宽度，然后 设置container也是这个宽度并居中。说起测量效果图宽度，方法有多种，可以直接查看图 片尺寸。如果测量其中某一块的宽度，可以使用测量软件，也可以在ps下测量。因为效果 图多是在ps下制作的，所以用ps测量也比较方便。方法是首选项里把ps的单位改为像素， 然后用选区选中要测量的部分，在信息面板中就显示出当前选区的宽高了
可看出整个页面分为头部区域、 导航区域、主体部分和底部，
其中主体部分又分为左右两列，
整个页面居中显示
三、搭建框架
首先在dw里新建一个html文件：
保存为index.html并把无标题文档改为：主页
<!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> </head> <body> </body> </html>
Div + CSS 布局简单实例
Div + CSS 布局简单实例一、准备工作目录及素材1、在D：盘上创建名为myweb的新文件夹。
2、准备所需素材。
拷贝F:\网页素材\网站重构\源文件\第2章中的images 文件夹到D: \myweb 文件夹中。
3、在D:\myweb 文件夹中新建子文件夹style。
二、定义站点1、启动Dreamweaver cs4，选择“站点”>“管理站点”。
2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。
3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。
4、在“站点名称”文本框中，输入Cafe 香浓作为站点名称。
5、在“本地根文件夹”文本框中，指定D:\myweb 文件夹。
你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。
6、在“默认图像文件夹”文本框中，指定D:\myweb 文件夹中已有的images 文件夹。
你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。
7、从“分类”列表中选择“远程信息”，“访问”选：“FTP” 并填写好相关信息。
8、从“分类”列表中选择“测试服务器”，“访问”选：“FTP” 并填写好相关信息，“URL前缀”须根据实际情况做相应修改。
9、从“分类”列表中选择“本地信息”，“HTTP 地址”须根据实际情况做相应修改。
10、单击“确定”。
随即出现“管理站点”对话框，显示您的新站点。
11、单击“完成”关闭“管理站点”对话框。
此时“文件”面板显示当前站点的新本地根文件夹。
“文件”面板中的文件列表将充当文件管理器，允许你复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。
三、了解你的任务下图是一张为Cafe 香浓站点设计的完整的和符合要求的设计草样。
作为Web 设计人员，你需要对草样进行转换，使之最终形成可以使用的Web 页面。
第14章 DIV+CSS布局基础
14.2.5 边框
边框是页面元素可视范围的最外圈。 边框是页面元素可视范围的最外圈。边框包围的范围包 括页面元素的补白和内容。 括页面元素的补白和内容。CSS中提供以下三个设置边框的 中提供以下三个设置边框的 属性： 属性： 1．边框样式 ．边框样式border-style 参数： 参数： none : 无边框。与任何指定的 无边框。与任何指定的border-width值无关 值无关 hidden : 隐藏边框。IE不支持 隐藏边框。 不支持 dotted : 在MAC平台上 平台上IE4+与WINDOWS和UNIX平台上 平台上 与 和 平台上 IE5.5+为点线。否则为实线 为点线。 为点线 dashed : 在MAC平台上 平台上IE4+与WINDOWS和UNIX平台上 平台上 与 和 平台上 IE5.5+为虚线。否则为实线 为虚线。 为虚线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的 双线边框。 border-width值 值 groove : 根据 根据border-color的值画 凹槽 的值画3D凹槽 的值画 ridge : 根据 根据border-color的值画菱形边框 的值画菱形边框 inset : 根据 根据border-color的值画 凹边 的值画3D凹边 的值画 的值画3D凸边 outset : 根据 根据border-color的值画 凸边 的值画
块级元素和行内元素的区别
排列方式 块级元素 垂直排列 可控制属性 高度、行高以及上 下边距都可控制 宽度 其宽度默认情况下与其父 元素一致。可以设置width 属性改变其宽度。 宽度就是其包含的文字或 者图片的宽度，设置width 属性不生效。
行内元素
DIV+CSS网页布局之：两列布局
DIV+CSS⽹页布局之：两列布局1、宽度⾃适应两列布局 两列布局可以使⽤浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。
当元素使⽤了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使⽤两种⽅法。
可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪⼀侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪⼀侧需要清除浮动的影响。
也可以给浮动的⽗容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。
同理，两列宽度⾃适应，只需要将宽度按照百分⽐来设置，这样当浏览器窗⼝调整时，内容会根据窗⼝的⼤⼩，按照百分⽐来⾃动调节内容的⼤⼩。
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>宽度⾃适应两列布局</title>6<style>7*{margin:0;padding:0;}8#herder{9 height:50px;10 background:blue;11 }12.main-left{13 width:30%;14 height:800px;15 background:red;16 float:left;17 }18.main-right{19 width:70%;20 height:800px;21 background:pink;22 float:right;23 }24#footer{25 clear:both;26 height:50px;27 background:gray;28 }29</style>30</head>31<body>32<div id="herder">页头</div>33<div class="main-left">左列</div>34<div class="main-right">右列</div>35<div id="footer">页脚</div>36</body>37</html>2、固定宽度两列布局 宽度⾃适应两列布局在⽹站中⼀般很少使⽤，最常使⽤的是固定宽度的两列布局。
第四部分Div+CSS进行网页布局
五、技巧 1、单行文本的垂直居中 <div class=“middle”> Here is one line of text. </div>
.middle{ Height:100px; Line-height:100px; Border:1px solid #666;}
2、设置Body居中的技巧
Position:
所有元素的默认定位都是：position:static，这 意味着元素没有被定位，而且在文档中出现在它 应该在的位置。 position:absolute 时，元素就脱离了文档【即 在文档中已经不占据位置了】，可以准确的按照 设置的 top,bottom,left 和 right 来定位 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置 来移动这个元素。【意思是元素实际上依然占据 文档中的原有位置，只是视觉上相对于它在文档 中的原有位置移动了】
三、Div的css定位与布局属性 Float:none|left|right 设置层的漂移 left 文本流向对象的左边 Clear：none|left|right|both 清除层的漂移范围 Overflow：visible|auto|hidden|scroll 内容超过层大小时用此属性
Cursor：auto|all-scroll|colresize|crosshair|default|hand|move|hel p|no-drop|notallowed|pointer|progress|rowresize|text|vertical|wait Display:block|none|inline|inline-block list-item 设置对象是否隐藏 Visibility：inherit|visible|hidden
DIVCSS学习(入门)教程
Div+CSS布局入门教程页面布局与计划在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。
在下面的文章中咱们将会用到一些有关于HTML的大体知识，而在你学习这篇入门教程之前，请确信你已经具有了必然的HTML基础。
下面咱们就开始一步一步利用DIV+CSS进行网页布局设计吧。
所有的设计第一步确实是构思，构思好了，一样来讲还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处置软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
下面，咱们需要依照构思图来计划一下页面的布局，认真分析一下该图，咱们不难发觉，图片大致分为以下几个部份：一、顶部部份，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:依照上图，我再画了一个实际的页面布局图，说明一基层的嵌套关系，如此明白得起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与计划已经完成，接下来咱们要做的确实是开始书写HTML代码和CSS。
写入整体层结构与CSS接下来咱们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：<!DOCTYPE html PUBLIC "-ivID。
若是id="divID"那个层中包括了一个<img></img>，那么那个img在CSS中对应的设置语法应该是#divID img {}，一样，若是是包括在class="divID"那个层中时，那么设置语法应该是.divIDimg {}，这一点希望大伙儿要分清楚了。
DIV CSS入门基础知识教程
DIV+CSS盒子模型CSS盒子模型-什么是CSS盒子模型。
认识日常生活中盒子：常常我们遇到盒子是用于可装东西长方形、正方形的盒子。
如装皮鞋盒子、装电视机盒子，这个是比较具体的盒子。
CSS盒子：根据字面我们可以理解，CSS盒子也是装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。
这个时候我们对其对象设置高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）,即可实现像盒子一样的长方形、正方形平面盒子。
通常我们这样：一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子。
因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）等属性后即可呈现出盒子一样的长方形或正方形。
所以我们CSS盒子模型因此而得来。
日常使用CSS盒子：我们说将什么内容放入一个盒子里，我们就要想到是放入<div></div>里，脑海里就要这个概念。
假如我们说设置一个宽度为100px盒子，我们就要知道如下一个概念：Css样式代码：.yangshi{width:100px;}对应html代码：<div class="yangshi">内容</div>这个时候我们可以将<div class="yangshi">内容</div>看作为一个盒子。
DIV+CSS是什么？DIV+CSS我们可以分为DIV和CSS两个概念。
CSS：我们也讲过是什么，大家可参考网址（CSS是什么）：DIV：这个是网页HTML的标签，通常我们在HTML代码中使用DIV标签配合应用CSS类布局网页。
1、DIV是html其中一个常用标签，如span、table、h1等之类标签2、在HTML中DIV标签我们用的最多，具有代表性3、div配合css类，布局出网页< div>内容</div>< div class="divcss5">内容</div>< div id="divcss5">内容</div>DIV CSS是什么截图您可能需要了解CSS是什么？什么是html？Html代码是什么？css是什么?什么是CSS？CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，所以称之为层叠样式表（Cascading Stylesheet）简称CSS。
学习DIV+CSS一个最简单的布局一行三列DIV代码!
学习DIV+CSS⼀个最简单的布局⼀⾏三列DIV代码!CSS代码如下：body{text-align:center;margin:0px;padding:0px;}#father{position:relative;width:750px;text-align:center;}#banner{height:96px;background-color:#999;text-align:left; padding:0px;margin:0px;}#b-left{width:159px;margin:0px;padding:0px;float:left;}#b-center{margin:0px;float:left;}#b-right{text-align:left;marign:0px;padding:0px;width:108px;background-color:#00ffff;height:96px;float:right;}HTML代码如下：<div id=banner><div id=b-left> <img src="images/51.gif" /> </div><div id=b-center><img src="images/tupian26.gif" /></div><div id=b-right><ul style="list-style-type:none;"><br /><li>设为⾸页</li><li>加⼊收藏</li><li>联系我们</li></ul></div></div>现在总结⼀下：⼀⾏三列的布局有以下⼏种思想：第⼀都做成绝对的布局，设定每⼀个块和周围的距离第⼆就是利⽤嵌套的⽅法，把任意两个先当成⼀个，然后再把他们和第三个⼀起设！不过我这⾥好像直接把三个块都是分开设的，好像也没有问题！呵呵！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Div+CSS布局入门教程作者：aultoale时间： 2006-06-10 文档类型：原创来自：蓝色理想第 1 页页面布局与规划第 2 页写入整体层结构与CSS第 3 页页面顶部制作之一第 4 页页面顶部制作之二第 5 页页面制作-用好border和clear在网页制作中，有许多的术语，例如：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+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。
关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：1、请养成良好的注释习惯，这是非常重要的；2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；3、讲解一些常用的CSS代码的含义：font:12px Tahoma；这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；margin:0px；也使用了缩写，完整的应该是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，另外还有以下几种写法：margin:0px auto；说明上下边距为0px，左右为自动调整；我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
text-align:center文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。
background:#FFF设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：background:#ccc url('bg.gif') top left no-repeat；表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，top left表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center用于定位背景图片，分别表示上 / 右 / 下 / 左 / 中；还可以使用background:url('bg.gif') 20px 100px;表示X座标为20像素，Y座标为100像素的精确定位；repeat/no-repeat/repeat-x/repeat-y分别表示填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
4、如何使页面居中？大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？是因为我们在#container中使用了以下属性：margin:0 auto;按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。
5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。
当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。
在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css 中的样式全部清除掉，重新写入以下样式代码：样式说明：a:link,a:visited {font-size:12px;text-decoration:none;}a:hover {}这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。
#container {width:800px;margin:10px auto}指定整个页面的显示区域。
width:800px指定宽度为800像素，这里根据实际所需设定。
margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
上一章中我们讲过，对层的margin属性的左右边距设置为auto可以让层居中显示。
接下来，我们开始制作TOP部分，TOP部分包括了LOGO、菜单和Banner，首先我们要做的就是对设计好的图片进行切片，以下是在FW下完成的切片：我将TOP部分切片为两部分，第一部分包括了LOGO和一条横线。
由于LOGO图片并没有太多的颜色，这里我于是将这一部分保存为GIF格式，调色板选择为精确，选择Alpha 透明度，色版为白色(此处颜色应与背景色相同)，导出为logo.gif，图像宽度为800px。
到这里，有的朋友就说了，* 为什么要使用GIF格式？使用JPEG不是更好吗？因为GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。
* 接下来的Banner部分还能使用GIF格式吗？答案是不能，因为Banner部分是一个细致的图片，如果使用GIF格式颜色会有太大的损失，所以必须使用JPEG格式，将文件导出为banner.jpg。
* 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。
切好片后，我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下：为什么要这么写呢，因为对菜单使用列表<li>形式，可以在以后方便对菜单定制样式。
而为什么要添加以下代码呢？<li class="menuDiv"></li>插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。
然后我们在css.css中再写入以下样式：样式说明：#header {background:url(logo.gif) no-repeat}给页面头部分加入一个背景图片LOGO，并且不作填充。
这里，我们没有指定header层的高度，为什么不指定呢？因为header层中还有菜单和banner项，所以层的高度暂时是未知的，而层的属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。
使用列表<li>制作菜单开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。
这一节我将告诉大家如何用列表<li>来制作菜单。
以上是这部分的结构，有关于<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关的内容吧，它们最主要的作用就是在HTML中以列表的形式来显示一些信息。
还有一点需要大家一定要分清楚的，当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{}，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。
如果id="divID"这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。
另外，HTML中的一切元素都是可以定义的，例如table、tr、td、th、form、img、input...等等，如果你要在CSS中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。
所有的CSS代码都应该写在大括号{}中。
按照上面的介绍，我们先在css.css中写入以下代码：解释一下：#menu ul {list-style:none;margin:0px;}list-style:none，这一句是取消列表前点，因为我们不需要这些点。
margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。
#menu ul li {float:left;}这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。
到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下：这时，列表内容是排列在一行，我们在#menu ul li {}再加入代码margin:0 10pxmargin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左：10px，右：10px)，预览的效果如下：现在，雏形已经出来了，我们再来固定菜单的位置，把代码改成如下：这时，位置已经确定了，可是构思图中，菜单选项之间还有一条竖线，怎么办呢？别忘了，我们早就已经留好了一个空的<li class="menuDiv"></li>，要想加入竖线就使用它了。