DIV和CSS布局

1、网页布局和操作-2- 利用CSS操作表格和表单的样式 利用CSS进行菜单制作 掌握表格布局技术及优缺点 掌握框架布局及其优缺点 了解层的概念及应用 熟练使用标签 掌握DIV+CSS布局技术目标用CSS修饰文本简单CSS属性的应用CSS的文本属性 CSS中控制文本样式的属性主要有font-属性类和text-属性类，再加上修改颜色的color属性和行高line-height属性。DW中这些属性的设置是放在CSS规则定义面板的“类型”和“区块”中的。 其中text-indent表示首行缩进，在每段开头空两格通常是用text-indent: 2em;来实现，text-decoration: none;

2、表示去掉下划线，line-height: 150%;表示调整为1.5 倍行间距。文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值：left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下：.p2 text-align:right注意：行内元素应用对齐属性无效注意：行内元素应用对齐属性无效文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。有以下值：none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线)示例代码如

3、下：.p2 text-decoration: underline overline; 文本缩进属性(text-indent)这个属性设定文本首行缩进。其值有以下设定方法：length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象宽度的百分比)示例代码如下：.p1 text-indent: 8mm行高属性(line-height)这个属性设定每行之间的距离。其值有以下设定方法：normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em

4、, ex, px) percentage (百分比，相当于父对象高度的百分比)示例代码如下：.p1 line-height:1cm颜色属性(color)用颜色属性(color)可以改变文本的字体颜色。示例代码如下：.p1color:gray字间距属性(letter-spacing)这个属性用来设定字符之间的距离。normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px)示例代码如下：.p1 letter-spacing: 3mm CSS的层叠性 CSS具有两个特性：层叠性和继承性。 层叠性是指当有多个选择器都作用

5、于同一元素时，CSS怎样处理？CSS的处理原则是： 1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。如：p/* 标记选择器 */color:blue;font-size:18px;.special/* 类别选择器 */font-style: italic; /* 斜体 */text-decoration: underline;/* 有下划线 */class选择器与标记选择器1class选择器与标记选择器2class选择器与标记选择器3class选择器与标记选择器4class选择器与标记选择器5 2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用

6、优先级高的选择器定义的样式。CSS规定选择器的优先级从高到低为： 行内样式 ID样式 类别样式 标记样式。总的原则是：越特殊的样式，优先级越高。如： p/* 标记选择器 */color:blue; /* 蓝色 */font-style: italic; /* 斜体 */.green/* 类别选择器 */color:green;/* 绿色 */.purplecolor:purple; /* 青色 */#red/* ID选择器 */color:red; /* 红色 */这是第1行文本这是第2行文本这是第3行文本这是第4行文本这是第5行文本 CSS的继承性 CSS的继承性 CSS的继承性是指如果子元

7、素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素样式的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素。如：body text-align: center;.righttext-align: right;em color: #FF0000;p font-size: 24px;text-decoration: underline;电子商务教研室电子商务教研室要善于利用CSS继承性 CSS的继承贯穿整个CSS设计的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多

8、且关系复杂的情况下。 例如，如果网页中大部分文字的字体大小都是12px，我们可以对body或td标记定义样式为12象素。这样由于其他标记都是body的子标记，会继承这一样式，就不需要对这么多子标记去定义样式了，有些特殊的地方如果字体大小要求是14px，我们可以再利用类选择器或id选择器单独定义。 作业 自己建一个css文件，完成下列样式的定义（1）h1：红色，字体大小12px，bold。（2）#f3: 幼圆，水平居中，字符间距：10px，下划线。（3）.s1:绿色，段落行距：8px，首行缩进：25px。 在html中调用这个css文件中的这三个样式利用CSS进行表格样式设置 设置表格边框的粗细

9、，通过Border属性 单元格之间的缝隙问题，通过border-collapse属性 学习如何通过CSS完成隔行变色的效果CSS进行菜单样式设置 通过列表设置相应的菜单 通过DIV区块对相应的列表项进行样式设置 Display:block属性设置，使得超链接被设置成块元素，当鼠标进入该块任何部分时都被激活，而不是仅仅在文字上方时才被激活。 设置鼠标属性，经过时的相应动态效果-23-页面布局 页面布局一般分为以下几种 ：p 表格布局表格布局p 框架布局框架布局 p DIV+CSS布局布局 表格布局和表格布局和DIV+CSS布局布局是目前最常用的布局方式是目前最常用的布局方式-24-表格布局表格布

10、局 p 表格在网页中更多的是用于网页的布局，其优势在于可以有效地定位网表格在网页中更多的是用于网页的布局，其优势在于可以有效地定位网页中不同的元素，结构清晰。页中不同的元素，结构清晰。 p Dreamweaver8提供了提供了“布局布局”模式。在模式。在“布局布局”模式中，可以使用表模式中，可以使用表格作为基础布局结构来设计网页。格作为基础布局结构来设计网页。表格布局有以下原则 ：p 不要把整个网页当成一个大表格，尽可能使用多个表格进行分块。不要把整个网页当成一个大表格，尽可能使用多个表格进行分块。 p 使用嵌套表格。使用嵌套表格。p 表格的边框设置。表格的边框设置。表格布局步骤： 使用布局视

11、图；使用布局视图； 绘制布局表格绘制布局表格 ； 绘制布局单元格；绘制布局单元格； 设置单元格属性；设置单元格属性； 预览网页。预览网页。-25-框架布局框架布局p框架是另一种常用的网页布局排版工具。框架是另一种常用的网页布局排版工具。p框架结构就是把浏览器窗口划分为多个区域，每个区域都可以框架结构就是把浏览器窗口划分为多个区域，每个区域都可以分别显示不同的网页。分别显示不同的网页。p使用框架最常见的用途就是导航，在使用了框架以后，用户的使用框架最常见的用途就是导航，在使用了框架以后，用户的浏览器不需要为每个页面重新加载与导航相关的图。浏览器不需要为每个页面重新加载与导航相关的图。框架布局步骤

12、： 建立框架；建立框架； 设置框架模板；设置框架模板； 设置框架的属性；设置框架的属性； 保存框架；保存框架； 设置嵌套框架属性。设置嵌套框架属性。 -26-DIV层 DIV层p 标签的主要作用是用于设定文字、图片、表格等的摆放位标签的主要作用是用于设定文字、图片、表格等的摆放位置置 p 当把文字，图片等放在当把文字，图片等放在标签中时，该标签被称为标签中时，该标签被称为“DIV块块”或或“DIV元素元素”或或“DIV层层”。 p 使用使用CSS和和DIV可以很好的解决图像或文字定位的难题，通过可以很好的解决图像或文字定位的难题，通过DIV和和CSS结合使用，网页设计人员可以精确的设定内容的位

13、置，结合使用，网页设计人员可以精确的设定内容的位置，还可以将定位的内容上下叠放。还可以将定位的内容上下叠放。 如果单独使用如果单独使用标签，而不加标签，而不加任何任何CSS样式修饰，那么它在网页样式修饰，那么它在网页中的效果和使用段落标签中的效果和使用段落标签的效果是相同的的效果是相同的 （一）、 标记与标记 在设计网页时,能否控制好各个模块在页面中的位置是非常关键的.在CSS中我们主要利用与两个标记. 1、 是一个区块容器标记,它们之间相当一个容器,可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。因此对进行控制，就可以控制中的其他标记元素。例如：div font-si

14、ze:18px;/* 字号大小 */font-weight:bold;/* 字体粗细 */font-family:Arial;/* 字体 */color:#FF0000;/* 颜色 */background-color:#FFFF00; /* 背景颜色 */text-align:center;/* 对齐方式 */width:300px;/* 块宽度 */height:100px;/* 块高度 */ 标记与标记一样，作为容器标记而被广泛应用，在上面的例题中如果将替换成，执行后效果是一样的。可以说和两个标记都有独立出各个区块的作用，在这个意义上两者没有太多不同。2、 与的区别：包含的元素会自动换行

15、：在它的前后不会换行标记可以包含于标记之中，而反过来则不成立。 例如： div标记不同行：span标记同一行：Margin-topMargin-bottomMargin-leftMargin-right（二）、 盒子模型 盒子模型是CSS控制页面时一个很重要的概念，只用掌握了盒子模型以及其中每个元素的用法，才能真正的控制页面中各元素的位置。 1、盒子模型的概念 一个盒子模型由content、border、padding、margin这4个部分组成。Border-topBorder-bottomBorder-leftBorder-rightPadding-topPadding-bottomPad

16、ding-leftPadding-rightcontent （1） 一个盒子的实际高度或宽度是由：content+padding+border+margin组成的。（2）width和height的值控制content的大小,背景颜色是设置边框区域内的颜色（包括边框）（3）并且对于任何一个盒子都可以分别设定4条边各自的border、padding和margin（4）倘若将盒子模型比作展览馆里展出的一幅幅画，那么 Content就是画面本身； Padding就是画面与画框之间的留白； Border就是画框； Margin就是画与画之间的距离。（5）利用好盒子的这些属性，就能够实现各种各样的排版效果

17、。（6）DM设计视图查看盒子模型2、 border（画框） border会占据空间，计算实际宽度和高度时应考虑。 border属性主要有3个：color、width和style。 Width:thin/medium(默认,约2px)/thick/具体的数值; style:none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset等。IE支持的不理想 上下左右四个边框不但可以统一设定，也可以分开上下左右四个边框不但可以统一设定，也可以分开设定设定 。 设定上边框属性，你可以使用设定上边框属性，你可以使用border-top,

18、border-border-top, border-top-width, border-top-style, border-top -top-width, border-top-style, border-top -colorcolor。 设定下边框属性设定下边框属性 ，你可以使用，你可以使用b order-bottom, b order-bottom, border-bottom-width, border-bottom-style, border-bottom-width, border-bottom-style, border-bottom-colorborder-bottom-colo

19、r。 设定左边框属性，你可以使用设定左边框属性，你可以使用border-left, border-left, border-left-width , border-left-style , border-left-width , border-left-style , border-left-colorborder-left-color。 设定上边框属性，你可以使用设定上边框属性，你可以使用border-right, border-right, border-right-width, border-right-style, b border-right-width, border-right-

20、style, b order-right-colororder-right-color。 如果希望在某段文字结束后加上虚线用于分割，而不是用border将整个段框起来，可以通过单独设置border-bottom来实现。例如：We can read of things that happened 5,000 years ago .Next paragraph3、 padding（留白） padding用于控制content与border之间的距离，如果修改上例，加入padding-bottom:30px;显示效果如下： 某些时候需要同时设置4个方向的padding值时，可以将4个语句合成到一起，

21、例如：.outsidepadding:10px 30px 50px 100px; /* 同时设置，顺时针 （上右下左）*/border:1px solid #000000;/* 外边框 */background-color:#fffcd3;/* 外背景 */.insidebackground-color:#66b2ff;/* 内背景 */border:1px solid #005dbc;/* 内边框 */width:100%; line-height:40px;text-align:center;font-family:Arial;4、 margin（画与画之间的间隔） margin指的是元素

22、与元素之间的距离。例如： We can read of things that happened 5,000 years ago in the Near East, . Next paragraph60px 当两个行内元素紧邻的时候,它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left.span1span2Margin-rightMargin-left spanbackground-color:#a2d2ff;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;

23、padding:10px; span.leftmargin-right:30px;background-color:#a9d6ff; span.rightmargin-left:40px;background-color:#eeb0b0; 行内元素1 行内元素2 30+40=70pxdiv2 但如果不是行内元素,而是产生换行效果的块级元素,情况就会变的有些不同.块级元素之间的距离不再是margin-top与margin-bottom之和,而是两者中的较大值.Div1的margindiv1Div1的Margin-bottomDiv2的Margin-topdivbackground-color:#

24、a2d2ff;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;块元素1块元素2 如果将块元素2的margin-top由30px改为40px,会发现执行结果没有任何变化.若将其从30px修改为60px,则发现块元素2向下移动了10个像素. 除了上面提到的行内元素间隔和块级元素间隔两种关系外,还有一种位置关系,它的margin值对CSS排版也有重要的作用.这就是父子关系.当一个块包含在另一个块中间时,便形成了典型的父子关系.其中子块的margin将以父块的content为参考.(子子块在父块的内容区块在父块的内容区)父div父divContent区子div子div的margin-44-DIV+CSS布局-1DIV+CSS布局p 使用使用DIV+CSS布局，可先不考虑外观，首先布局，可先不考虑外观，首先需要将页面内容的语义或结构确定下来。需要将页面内容的语义或结构确定下来。 p 使用使用DIV+CSS布局，外观不是最重要的，一布局，外观不是最重要的，一个结构良好的个结构良好的HTML页面可以通过页面可以通过C