第6章网页内容版式及底部要点.ppt

网站综合开发解析 第 6 章 网页内容版式及底部 列表的3种类型：有序列表、无序列表和定义列表。 一个完整的表单在结构上由表单标签、表单域以及表单按钮3个基本部分组成。 新闻列表的内容由列表栏标题、列表更多链接、新闻标题和新闻时间组成。 CSS中的overflow属性用来处理盒子模型中多余的内容。 段落样式常用的4个属性：行高、水平对齐、垂直对齐、文本缩进这4个属性。 页面排版通过对段落、图文混排以及文本表格的属性进行设置。 段落的大小可以通过宽度和高度来控制，段落的间距通过margin和padding来控制。 制作鼠标经过表格时隔行变色的效果时，是由JavaScript事件触发。 页面的底部信息整体由网站导航栏、版权声明和相关信息等部分组成。 综合实例—内容页面的制作 页面细节修饰 页面底部信息的介绍 网页底部信息是网页底部的内容，也是浏览者一般访问网页最后到达的位置。底部信息相对于头部内容以及网页主体内容来说不是那么显眼，但它对于一个网站来说也起着非常重要的作用。 底部信息相对于网页中其它的栏目来说比较简单，一般情况下，底部信息包含友情链接、联系方式、版权说明等内容。有时为了方便，也将导航栏在底部信息设置一份，使得浏览者在结束本页的访问后能够尽快地转向自己想看到的页面。 新浪网首页底部的信息栏 制作京东商城的底部信息内容页面 效果图分析 页面结构的制作 页面的底部信息整体由网站导航栏、版权声明和相关信息等部分组成。 制作京东商城的底部信息内容页面 CSS部分的制作 定义页面的整体样式 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; } 定义链接部分的样式 通过以上步骤，完成了对京东商城的底部信息内容的制作。 本章总结 上章回顾 本章进阶 掌握网页文字排版 掌握网页图文混排 了解数据表格制作 熟悉底部信息制作 页面内容版式的介绍 段落样式 段落是页面排版的基本元素，一般而言，段落的排版分为行高、水平对齐、垂直对齐、文本缩进、字母间距、单词间距等内容，各属性如下表。 单位数值、normal 相关属性值 line-height 行高属性 left、right、center、justify 相关属性值 text-align 水平对齐属性 baseline、sub、supper top、text-top、bottom、text-bottom、middle、单位数值 相关属性值 vertical-align 垂直对齐属性 vertical-align属性只对table有用，在div中不起效果。现在这个属性很多时候是用来设置图片的位置。 页面内容版式的介绍 单位数值 相关属性值 text-indent 文本缩进属性 单位数值 相关属性值 word-spacing 单词间距属性 单位数值 相关属性值 letter-spacing 字母间距属性 以上6个段落的样式属性用得最广的是行高、水平对齐、垂直对齐、文本缩进这4个属性。下面通过一个简单的例子来熟悉这4种属性的用法。 页面内容版式的介绍 添加行高属性 对于默认样式而言，当文字大小过大时，会像上张图所示的那样两行文字紧贴，所以需要对行高进行调整。这里，设行高为24像素。 line-height:24px; 添加首行缩进 对于标准的排版，一般来说需要在首行空出两个字，这个在CSS中可以通过首行缩进来控制，这里可以使用像素值来精确控制首行所需要缩进的长度。例如，本例由于文字大小设为14像素，所以首行缩进两个字即为28像素。 text-indent:28px; 页面内容版式的介绍 添加对齐样式 一般来说，默认样式是左对齐和顶端对齐，在这里，将文字的水平属性设为右对齐： text-align:right; 添加文字间距 在表