第 6 章 网页内容版式及底部

1、第第 6 6 章章 网页内容版式及底部网页内容版式及底部网站综合开发解析网站综合开发解析q 列表的3种类型：有序列表、无序列表和定义列表。q 一个完整的表单在结构上由表单标签、表单域以及表单按钮3个基本部分组成。q 新闻列表的内容由列表栏标题、列表更多链接、新闻标题和新闻时间组成。q CSS中的overflow属性用来处理盒子模型中多余的内容。上章回顾本章进阶q 掌握网页文字排版q 掌握网页图文混排q 了解数据表格制作q 熟悉底部信息制作页面内容版式的介绍q 段落样式段落样式 段落是页面排版的基本元素，一般而言，段落的排版分为行高、水平对齐、垂直对齐、文本缩进、字母间距、单词间距等内容，各属性

2、如下表。行高属性line-height 相关属性值单位数值、normal 水平对齐属性text-align 相关属性值left、right、center、justify 垂直对齐属性 vertical-align 相关属性值baseline、sub、supper top、text-top、bottom、text-bottom、middle、单位数值 vertical-align属性只对table有用，在div中不起效果。现在这个属性很多时候是用来设置图片的位置。页面内容版式的介绍文本缩进属性text-indent 相关属性值单位数值单词间距属性word-spacing 相关属性值单位数值 字母

3、间距属性letter-spacing 相关属性值单位数值 以上6个段落的样式属性用得最广的是行高、水平对齐、垂直对齐、文本缩进这4个属性。下面通过一个简单的例子来熟悉这4种属性的用法。页面内容版式的介绍v 添加行高属性 对于默认样式而言，当文字大小过大时，会像上张图所示的那样两行文字紧贴，所以需要对行高进行调整。这里，设行高为24像素。line-height:24px; v 添加首行缩进 对于标准的排版，一般来说需要在首行空出两个字，这个在CSS中可以通过首行缩进来控制，这里可以使用像素值来精确控制首行所需要缩进的长度。例如，本例由于文字大小设为14像素，所以首行缩进两个字即为28像素。 te

4、xt-indent:28px;页面内容版式的介绍v 添加对齐样式 一般来说，默认样式是左对齐和顶端对齐，在这里，将文字的水平属性设为右对齐：text-align:right; v 添加文字间距 在表中可以看出，文字间距分为单词间距和字母间距两种类型。对于汉字而言，只需要添加单词间距即可。在此设文字之间的间距为3像素：letter-spacing:3px; 页面内容版式的介绍q 图文混排图文混排 在制作页面时，会考虑向页面中加入图片。 图文混排主要有两方面内容： （1）设置图片和文字的环绕方式：采用float:left和float:right属性来设置左环绕和右环绕。 （2）设置图片和文字间距：

5、通过设置margin的单位数值来控制图片和文字之间的距离。margin也可以设为负值来制作特殊效果。页面内容版式的介绍 下面通过一个例子演示图文混排的float属性和margin属性。首先，还是对页面代码进行书写，写出基本的页面代码和样式，效果图：页面内容版式的介绍v 设置图片环绕方式 对图片的环绕方式是通过float属性来实现的。可以设置左漂浮或右漂浮来定义图片和文字之间的位置。当设置漂浮属性后，文字会环绕在图片旁。在本例中，设为右漂浮，这一属性直接在图片的样式中设置即可。img float:right; 页面内容版式的介绍v 设置图片和文字之间的距离 当设置了图片漂浮属性后，文字会环绕着图

6、片排列，这时会出现一个问题，文字会紧贴图片，为了美观往往需要对图片设置边距，使其和文字分开。设边距的属性即margin属性，可以分别对4个方向设置margin值，也可以分别对边设置。img float:right; margin-left:10px; 页面内容版式的介绍q CSS表格属性表格属性 对于表格的应用主要是填充数据、制作调查表等内容，所以一般对于表格样式的定义也是设置高度、宽度、背景色和边框4个方面。制作独立的文本段落 在HTML中，文本段落是通过标签来界定的。为分段标签，在此处加一空白行，可将文字分成不同的两个文本段落，即标签会先多加上一行空白，然后换行显示文字内容。 在划分段落时

7、还存在分行标签。使下面的内容接着显示在下一行，而标签与标签最大的不同是会多加一个空白行，关于标签和标签的区别如右图所示。制作独立的文本段落q 设置段落的大小设置段落的大小 段落的大小可以通过宽度和高度来控制，而段落的间距则可以通过margin和padding来控制。而对于标签内部的文字内容，则可以通过文字大小、文字的行间距来控制。另外，标签是默认标签，在CSS中可以通过默认的样式名p来定义，也可以单独设置某个单独id或者class内的标签样式，或直接在标签中添加id或class，使之产生不同的样式。 以例6-11为例，演示对段落设置大小的方法。在该实例中，可以分为3段，其中第1段和第2段采用默

8、认的标签来定义段落的大小，第3段使用了名为sp的样式来控制，对样式在样式中设置了该段落的宽度和与上边段的距离，可以看出，设置了之后，第3段与前两段在这两处样式上明显不同了。制作独立的文本段落q 定义段落的显示效果定义段落的显示效果 未设置display：block的效果：显示效果属性显示效果属性display相关属性值相关属性值none、block、inline对标签设置了display：block的效果：制作图文混排版式q 效果图分析效果图分析 制作图文混排版式q 页面结构的制作页面结构的制作 根据本例效果图所示，页面第一个字“周”采用首字大写的形式，可以将“周”用标签定义其样式。页面内容的

9、图片有1幅，采用了左对齐，所以，只需对图片定义样式，然后导入即可。根据本例效果图中的图片位置，将图片放置在第一个标签中即可。制作图文混排版式q CSS部分的制作 body background: #293F70; margin:10px; font-size:14px;.main width:700px; height:auto; padding:20px; line-height:24px; margin:0 auto; border:4px solid #1B51DE; background:#DCEAFA; 制作图文混排版式p text-indent:28px;span font:60p

10、x bold 黑体 ; float:left; line-height:60px;h3 font-size:16px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dotted #1B51DE; v 定义文字样式制作图文混排版式img border:2px solid #1B51DE; padding:2px; float:left; margin-right:20px; v 定义图片样式制作数据表格q 效果图分析效果图分析 制作数据表格q 页面结构的制作页面结构的制作制作数据表格q CSS CSS部分的制作部分的制作

11、表格的样式表由网页整体样式表和表格样式表组成。隔行变色效果图如下：制作数据表格q 应用应用JavaScript制作鼠标经过表格制作鼠标经过表格.sp background: #5FAAE2; cursor:pointer; height:25px; color:#FFF; font-weight:bold; 通过JavaScript代码实现用sp的样式去覆盖行的原有样式。当鼠标经过时整行变色的样式：综合实例内容页面的制作q 效果图的分析效果图的分析综合实例内容页面的制作q 页面结构的制作页面结构的制作综合实例内容页面的制作整体布局代码： v 添加页面左侧内容 品牌故事 尚品工艺 尚品机构 尚品

12、文化 战略合作 综合实例内容页面的制作v 添加页面主体内容综合实例内容页面的制作q CSS部分的制作部分的制作v 设置总体内容样式表 综合实例内容页面的制作v 页面细节修饰页面底部信息的介绍 网页底部信息是网页底部的内容，也是浏览者一般访问网页最后到达的位置。底部信息相对于头部内容以及网页主体内容来说不是那么显眼，但它对于一个网站来说也起着非常重要的作用。 底部信息相对于网页中其它的栏目来说比较简单，一般情况下，底部信息包含友情链接、联系方式、版权说明等内容。有时为了方便，也将导航栏在底部信息设置一份，使得浏览者在结束本页的访问后能够尽快地转向自己想看到的页面。新浪网首页底部的信息栏制作京东商

13、城的底部信息内容页面q 效果图分析q 页面结构的制作 页面的底部信息整体由网站导航栏、版权声明和相关信息等部分组成。制作京东商城的底部信息内容页面 q CSS部分的制作v 定义页面的整体样式body margin: 0px; font-size:12px; line-height:20px; color:#333;img border:0px;#footer width:960px; margin:0 auto; text-align:center; padding-top:10px;制作京东商城的底部信息内容页面#footer a margin:0px 10px; text-decoration:none; color:#333;#footer a:hover text-decoration:underline; color:#C00;v 定义链接部分的样式通过以