制作首页商品分类公开课教案教学设计课件资料.pptxVIP

任务3.2制作首页商品分类目录01活动1实现商品分类栏的制作02活动2实现页面跳转

任务2制作首页商品分类01活动1实现商品分类栏的制作

活动1实现商品分类栏的制作商品分类是指根据一定的管理目的，为满足商品生产、流通、消费活动的全部或部分需要，将管理范围内的商品集合总体，以所选择的适当的商品基本特征作为分类标志，逐次归纳为若干个范围更小、特质更趋一致的子集合体（类目），从而使该范围内所有商品得以明确区分与体系化的过程。项目3制作网站导航/任务3.2制作首页商品分类/活动1实现商品分类栏的制作【商品分类】

活动1实现商品分类栏的制作【举例】京东商品分类图苏宁红孩子商品分类图项目3制作网站导航/任务3.2制作首页商品分类/活动1实现商品分类栏的制作

活动1实现商品分类栏的制作【作业步骤】（1）新建站点，把“项目三/任务3.2.1”文件夹作为站点文件夹，打开index.html文件。（2）在导航栏下新建1行2列的表格。（3）制作商品分类板块：在新建表格的左侧单元格中新建6*1的表格，输入文字。（4）修改商品分类列表中文字的样式。（5）为导航文字设置鼠标经过文字变色效果。（6）保存网页文件，预览网页效果。项目3制作网站导航/任务3.2制作首页商品分类/活动1实现商品分类栏的制作

活动1实现商品分类栏的制作【小助手1】：hover选择器:hover选择器用于选择鼠标指针浮动在上面的元素,而且:hover选择器可用于所有元素，不只是链接。a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式。设置超链接样式时，:link选择器设置指向未被访问页面的链接的样式，:visited选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。要超链接中设置鼠标悬停样式，在CSS定义中，:hover必须位于:link和:visited之后（如果存在的话），这样样式才能生效。项目3制作网站导航/任务3.2制作首页商品分类/活动1实现商品分类栏的制作

活动1实现商品分类栏的制作【小助手2】css选择符种类（1）id选择符：定义方式为“id=”，id名称为网页中各元素唯一标识，在CSS定义中，id使用“#”作为标识。（2）类（class）选择符：定义方式为“class=”,在网页中的多个元素都可以使用同一个class定义。在css规则定义中，使用点符号加上class名称作为标识（3）类型选择符：定义时直接使用XHTML标签。（4）特殊选择符：例如伪类，定义时以冒号开始，目前所有浏览器只支持a元素与超链接操作相关的4个伪类：a:link{}、a:visited{}、a:hover{}和a:active{}。项目3制作网站导航/任务3.2制作首页商品分类/活动1实现商品分类栏的制作

活动1实现商品分类栏的制作【知识链接】CSS的三种使用方式（1）行间样式表行间样式表是指将CSS样式编码写在HTML标签中，格式如下：h1style=font-size:12px;color:#000FFF我的CSS样式/h1行间样式表只需将CSS代码用分号隔开写在style=之中。这是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。项目3制作网站导航/任务3.2制作首页商品分类/活动1实现商品分类栏的制作

活动1实现商品分类栏的制作【知识链接】CSS的三种使用方式（2）内部样式表内部样式表与行间样式表相似都是把CSS代码写在HTML页面中，稍微不同的是前者可以将样式表放在一个固定的位置。内部样式表编码是初级的应用形式，不能达到跨页面使用所以不适合使用。格式如下：htmlheadtitle内部样式表/titlestyletype=text/cssh1{font-size:12px;color:#000FFF}/style/headbodyh1我的CSS样式。/h1/body/html项目3制作网站导航/任务3.2制作首页商品分类/活动1实现商品分类栏的制作

活动1实现商品分类栏的制作【知识链接】CSS的三种使用方式（3）外部样式表外部样式表是CSS应用中最好的一中形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。多个网页可以调用一个样式文件表，这样能够实现代码的最大限度的重用及网站文件的最优化配置，格式如下：htmlheadtitle外部样式表/titlelinkrel=stylesheetrev=stylesheethref=style.css/headbodyh1我的CSS样式。/h1/body/html在style.css中的代