《网页设计与制作》课件——第七章 CSS常用模块实现.pptVIP

七、面向对象的CSS模块化分析的基本思路前提：具备完善的UI平面图原则：每个模块应该具备“单一职责”模块与模块之间尽量不要包含相同部分模块的功能应该相对简单稳定为提高模块的重用性，其应尽量做到少而简单本章小结一般来说，网页从上至下可以分成头部、主体、底部三个部分，包含一到多个“模块”功能上或结构上是一个整体的部分，称之为“模块”实现“模块”的主要步骤：构造HTML结构，编写CSS代码导航条是一个网页中极为重要的部分，由多个超链接组成各种“内容模块”是构成网页主体的主要部分，一个完整的“内容模块”主要由标题栏，间隙，内容部分组成“内容模块”中的具体内容有：“文字列表”、“图片列表”、“图标列表”本章小结图片播放器是美化网页不可缺少的特效，常用来做广告展示或重要内容的展示，完整的图片播放器由三大部分组成：图片列表、按钮列表、文字提示网页的整体布局是网页的代码（HTML、CSS）和显示效果的统一，是网页中各个模块如何摆放、相互关系的统称一个良好的网页整体布局，应该有以下特征：简约、符合语义化、容易维护、兼容性好、自适应面向对象的CSS是一种“模块化”的设计思想，我们也称之为“面向对象模块化设计”Page*第七章CSS常用模块实现本章知识点网页中常用的模块导航条内容模块“文字列表”的实现“图标列表”的实现“图片列表”的实现图片播放器网页整体布局面向对象的CSS一、网页中常用的模块如果从组成结构上来看，大部分网站都是相似的。一般来说，网页从上至下可以分成头部、主体、底部一、网页中常用的模块在一个网站内，所有网页的头部一般是一致的，以此保持网站的风格统一，主要包括：网站标志（Logo）导航条（Nav）快捷导航条（QuickNav）搜索框（Search）广告（Banner）登录（Login）一、网页中常用的模块网页主体是当前网页的主要内容所在，由各种“内容模块”组成。“内容模块”的基本结构是相同的，根据其内容分为：用户登录滚动新闻分类菜单快捷导航条文字列表排序列表图片列表图文混排图片播放器分页列表一、网页中常用的模块与头部类似，为保持网站的风格统一，整个网站的网页底部都是一致的，包括：友情链接（FriendLink）版权申明（Copyright）快捷导航条（QuickNav）二、导航条导航条是一个网页中极为重要的部分，由多个超链接组成，这些超链接可以链接到网站的各个二级栏目各种风格的导航条二、导航条导航条的各种显示效果栏目链接之间一般有分隔鼠标停留在某栏目上，一般有鼠标悬停效果一般使用特殊的样式标示当前页面所属栏目有的栏目链接上还需要用特殊的小图标进行标识有的栏目链接有子导航，子导航的显示效果有两类：鼠标悬停时以下拉或横向显示子导航，鼠标移出时消失主栏目导航下方固定出现子导航有的导航条上，通过颜色、字体划分出左右两部分，以此区分主要栏目导航和重要功能导航二、导航条任务：实现导航条的步骤构造HTML结构导航条的栏目链接相互独立，但又是一个整体，所以使用无序列表ul是比较合适的编写CSS代码由大范围至小范围，一步步实现CSS样式二、导航条实现导航条的重要知识及技巧HTML默认样式重置在不同的浏览器下，某些标签默认的显示效果是不同的，为兼容各个浏览器，使显示效果一致，应首先在CSS中对显示效果不同的属性进行定义浮动整个导航条是一个无序列表（ul），栏目链接及分割线都是列表项目（li）。li是块级元素，要让其在一行内排列，必须将其设置为“float:left;”伪类设置鼠标悬停效果，会用到伪类“:hover”CSSSprites三、内容模块各种“内容模块”是构成网页主体的主要部分，根据其具体内容不同，又分为不同的类型。尽管类型不同，但“内容模块”的基本结构是一致的，主要由以下部分组成：标题栏间隙内容部分三、内容模块标题栏可能包括“修饰小图标”、“标题（可能有多个）”、“更多”一般使用h1-6标题标签间隙“标题栏”与“内容部分”之间的间距一般高度为5px，有些内容模块会省略“间隙”内容部分内容头部：采用特殊效果，以图片作为背景，可省略内容主体：放置具体内容，不能省略内容底部：采用特殊效果，以图片作为背景，可省略三、内容模块内容模块结构的实现四、“内容模块”中的具体内容各种类型的“内容模块”按照具体内容的类型，可以分为：文字列表四、“内容模块”中的具体内容图标列表四、“内容模块”中的具体内容图片列表四、“内容模块”中的具体内容“文字列表”的实现无序修饰图标