网页制作案例教程-清华大学-第9章-使用CSS布局规划网页

网页制作案例教程毋建军郑宝昆郭锐编著清华大学出版社第9章使用CSS布局规划网页本章学习目标（知识要点）掌握CSS布局网页掌握DIV+CSS布局网页掌握APDIV布局网页本章学习导航CSS布局网页是一种非常流行的网页布局方式，能够做到使网页元素精确定位，美观的效果，本章主要介绍创建CSS、DIV+CSS和APDIV布局网页。本章内容在全书知识结构中所处位置如图所示基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护9.1CSS布局网页入门9.1.1CSS盒模型简介内容padding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-leftborder-rightmargin-topmargin-bottommargin-leftmargin-right图9-1-1盒子模型9.1.2常用的CSS布局属性（1）边界（margin）1）边界属性边界属性margin是一个不可继承的属性，包括上边界（margin-top）、下边界（margin-bottom）、左边界（margin-left）、右边界（margin-right）。这些元素属性是用来设置边界的，它们可以取的值有长度length、百分比percentage。百分比的值要参考上级元素的宽度。语法格式为：margin:margin-topmargin-rightmargin-bottommargin-left例：BODY{margin-top:10pt;margin-right:20pt;margin-bottom:30pt;margin-left:40pt}2）使用单侧边界属性若body体里是margin，那margin可以取1到4个值。如果margin只被赋予了一个值，那就表示上、下、左、右边界都使用同样数值，它们的顺序不能改变。除了margin可以设置四个边界外，其他的四个特性只能设置与它们相对应的一条边界。如果被赋予了两个或三个数值，没有指定值的边距，它的值将和与它相对的边距值相同。3）相邻边界属性如果在页面中同时对多个元素使用边界属性，并且这些元素相邻，那么这些元素的边界部分会根据具体情况有不同的现实效果，当两个相邻元素在垂直方向上设置了边界值，两者的边界距离并不是两者的边界值的和，而是两者中边界较大的那个。4）在内联元素中使用边界属性上述的边界属性设置都是针对块元素的，而在内联元素里使用边界属性的显示效果是不同的。当对内联元素设置垂直边界时，边界属性不能改变内联元素的垂直大小，也就是该属性设置将无意义。而在水平方向上的显示效果和块元素一致。（2）填充（padding）填充用来描述BOX的边框和内容之间插入多少空间。不但为元素设置了补白属性，而且增加了元素所占有的空间。语法格式为：padding:长度值/百分比值例如：.m{height:50px;width:20px;padding:20px;}（3）边框（border）平常我们在查看HTML文档时，看到一段文字，并不会把它作为一个BOX，实际上BOX是有边框的，只是平时不显示出来罢了，而border就是用来描述BOX边框的。Border属性分为边框宽度（border-width）、边框颜色（border-color）、边框样式（border-style）。（4）文本与背景从CSS的基本语句可以看出，属性是CSS非常重要的部分。如果熟练掌握了CSS的各种属性将会使页面的编辑更加得心应手。CSS的属性包括很多种，如字体属性、颜色和背景属性、文本属性、”容器”属性、分级属性、鼠标属性等。在这节中，我们主要来分析以下字体属性和文本属性。属性属性含义属性值text-align设定文本的对齐方式left、right、center、justifytext-decoration用来设定文本的删除线、下划线或者围绕文本的线以及闪烁文本等，默认值是无效果none。所画的线颜色同文本本身的颜色相同，线的厚度跟浏览器相关。None、underline(下划线)、overline（在文本顶端画一条线）、line-through（在文本中间画一条线）、blink（文本闪烁）text-indent设定文本首行缩进length、percentageline-height设定每行之间的距离Normal（默认行高）、数值（行高值，需要写单位）、乘数（无单位，表示是字体的倍数）、百分比（基于font-size设置行高）letter-spacing设定字母之间的距离Normal（默认不插入任何空间）、长度数值（设定字母间距，如为负数，则缩小间距）word-spacing设定单词之间的距离同letter-spacingtext-transform使文本从大写改为小写或小写改为大写等。Capitalize（首字母大写）、uppercase（所有小写字母改为大写）、Lowercase（大写字母改为小写）、none、inherit（使用包含盒子的值）vertical-align设定了元素在垂直方向上的位置Baseline、sub、super、top、text-top、middle、bottom、text-bottom、percentagecolor设定文本的字体颜色所有表9-1-1常用文本属性（5）颜色与背景在早起的网页中，只存在黑白灰三种颜色，单调乏味，css提供了控制颜色和背景的功能，这和只用html控制有很大不同。关于颜色背景的属性主要包括颜色的属性、背景颜色、背景图像、背景重复、背景附件、背景位置等。（6）列表1）list-style-type属性list-style-type属性是用来修改用于列表项的标志类型的，列表项的左侧是有符号或者是编号的，比如无序列表中可能是圆点，方块等，有序列表中可能是字母或者数字等。如果要将这些符号或者数字修改就需要该属性。2）list-style-image属性list-style-image属性可以将用户的图像文件当作项目编号，语法格式为：选择器{list-style-image:url(图像地址)}示例代码为：ulli{list-style-image:url(xxx.gif)}3）list-style-position属性当列表项目的文本很长时，就会有段落文本缩排的问题，该属性用来放置列表中的列表项中第二行文本的对齐方式。（7）表单CSS的格式化能力不仅对文本、图片等，还可以对表单进行格式化设置，使信息更容易阅读，帮助浏览者完成项目分类等。1）标签在设计表单标签的样式时，可以按照其他的html块设置进行，例如：formfieldset{margin-left:10px;border:0solid;}label{border:1px;dottedgray;}legend{color:red;}通过css可以为标签、字段等设置统一的格式。2）文本输入字段可以对文本框设置字体、前景色和背景色等。例如：Input[type=”text”]{background-color:red;Color:white;}Textarea{font-family:Tahoma;height:30%;}3）按钮及复选框按钮和复选框都是input属性的，它们在css设置属性时只要在input关键字后加上具体属性即可设置其样式。4）选择列表在html中通过select标签和option标签可以设置选择列表，同样在css中也可以设置选择列表的样式。例如：Select{width:50%}Option[value=]9.1.3CSS布局网页方法（1）定位属性1）定位属性——positionPosition属性可以控制如何以及在何处显示某个特定的元素，该属性是不可以继承的，语法格式为：position:static/relative/absolute/fixed2）层叠定位属性——z-index该属性是为了定义页面元素的层叠顺序，属性的取值是没有单位的数字，而且可以为负数，它只是表示了某个元素相对其他元素的层叠次序。（2）浮动1）浮动属性——float在标准流中，一个块级元素在水平方向会自动伸展，只能在竖直方向和其他元素依次排列，不能并排，而浮动属性则使得块级元素的表现有所不同。Float属性默认取值为none，也就是标准流通常的情况，float的另外两个取值为：Left：标签向左边浮动。Right：标签向右边浮动。2）相邻固定元素在HTML中，两块由div包起来的块元素会按照图9-1-14所示排列块1块2图9-1-14未加浮动的两个固定元素而如果给块1设置了向左浮动，则排列会变为图9-1-15所示。块1块2图9-1-15块1设置左浮动3）浮动元素相邻当多个浮动元素相邻的时候，如图9-1-18所示，所有的块都采用了向左浮动，则所有的块都会紧挨着向左靠齐，直到超过页面的宽度，则会换行继续靠左对齐。图9-1-18浮动元素相邻4）清除浮动属性由于在一些浏览器上浮动元素的显示效果会不同，所以，在现实需求中有时需要清除这些浮动属性，清除浮动属性即clear属性。9.1.4CSS布局和Table布局的区别CSS布局与传统表格布局的最大区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制布局版块的间距；而css则采用层(div)来定位，通过层的margin，padding，border等属性来控制版块的间距。9.2DIV+CSS布局网页9.2.1DIV+CSS布局网页简介Div是专门用于布局设计的容器对象，div标签也是成对出现，即div和/div两个标签，将内容放在两个标签之间。div除了可以直接放入文本，也可以放入其他标签，也可以多个div进行嵌套使用，最终目的就是合理的标识出我们的页面区域。HTML中的对象有两类，一类是block即块状对象，块状对象指的是当前对象显示为一个方块，默认的现实状态下，将占据整行，其他的对象在下一行显示。另一类是行间对象或者内联元素，这种对象允许下一个对象与它本身在一行中显示。div是属于块状对象，它的最终样式根据CSS的功能编写的，实现了实现和样式分离，而且由它来设计的网页布局更灵活，不像表格设计的布局那样死板，不好转换。9.2.2DIV+CSS布局网页分类（1）单行单列（2）单行两列（3）单行三列（4）顶行三列9.3APDIV布局网页（1）APDiv的定义及特性1）所谓APDiv，是指存放文本、图像、表单和插件等网页内容的容器，可以想象成是一张一张叠加起来的透明胶片，每张透明胶片上都有不同的画面，它用来控制浏览器窗口中网页内容的位置、层次。2）特性：APDiv最主要的特性就是它是浮动在网页内容之上的；也就是说，可以在（不影响其他网页元素情况下）网页上任意改变其位置，实现对APDiv的准确定位；把页面元素放入APDiv中可以使用户对页面操作的布局更加轻松。3）APDiv元素还有一些其他的重要特性。APDiv元素可以重叠（2）绘制APDiv的步骤：1）将光标放在文档插入点，在“布局”面板中单击“绘制APDiv”按钮。2）在文档窗口中拖动画出APDiv元素，按住Ctrl可画多个APDiv元素。也可以通过复制、粘贴，快速制作出多个类似的APDiv元素。3）每个APDiv元素中添加相应的文字和图片。4）为元素命名并调整好各元素的位置，可以通过菜单“修改”|“排列顺序”命名操作。