资源简介

(共41张PPT)
06页面导航任务 1 制作网站导航列表任务 2 制作网站主导航栏制作网站导航列表任务 1● 熟练掌握超链接伪类的使用技巧。本任务使用列表标签、超链接标签及浮动样式完成网站导航列表的布局，使用超链接伪类实现光标悬停在网站导航项时的变化效果，实现网站导航列表效果如图所示。网站导航列表效果步骤一：导航列表代码步骤二：根据对目标效果的分析，去掉列表原有默认样式，同时把列表项设置为向左浮动，使其横向排列，样式代码如图所示。样式代码运行效果如图所示。图已初步完成导航列表的布局，但是超链接 a 标签所自带的样式需要改变。这里需要应用超链接伪类，在 CSS 中可以用 a 选择器来设置 a 标签的常态样式。当鼠标光标悬停在 a 标签上时使用“a:hover”伪类选择器来设置此时的样式。浮动后效果步骤三：将 a 标签常态背景色设置为蓝色，当鼠标光标悬停在其上时将背景色设置为红色。样式代码超链接伪类并不是真正意义上的类。它的名称是由系统定义的，通常由标签名、类名或id 名加上冒号“:”构成。超链接 a 标签的伪类有四种，具体见表。超链接 a 标签的伪类及含义上表中列出了超链接 a 标签的四种伪类，分别用于定义访问前、访问后、鼠标光标悬停时及用鼠标单击不放开时。在实际编写代码时，通常只使用“ a:link”“ a:visited”和“ a:hover”定义访问前、访问后和鼠标光标悬停时的样式，且通常对“ a:link”和“ a:visited”应用相同的样式，使得访问前和访问后的超链接标签样式保持一致。制作网站主导航栏任务2● 掌握浮动属性的相关设置。本任务使用浮动属性制作缤购乐食电子商务网站主导航栏，效果如图所示。缤购乐食电子商务网站主导航栏效果步骤一：在 body 标签中创建一个顶部盒子 div，命名为“ index-header”。然后在顶端盒子里面创建两个子盒子 div，一个命名为“ header-left”，另一个命名为“ header-right”。最后分别为它们加入相应的文字内容，代码如图所示。创建顶部盒子代码创建顶部盒子代码步骤二：使用 CSS 代码设置顶部盒子样式。要注意的是，要让某标签中的内容水平居中，一般使用“text-align：center;”来实现。要让某标签中的内容垂直居中，一般通过设置高度 height的值与行高 line-height 的值相同来实现，CSS 代码如图所示。设置顶部盒子样式代码设置顶部盒子样式代码设置顶部盒子样式代码步骤三：接下来制作搜索框图片部分。先将整个悬浮搜索框命名为“ index-search”，搜索框左边放置一张 logo 图片，实现方式为：创建一个 div 盒子，命名为“ index-logo”，里面包含一个img 标签，把事先准备好的 logo 图片通过 src 属性导入。代码如图所示。放置 logo 代码步骤四：使用 CSS 代码设置 logo 样式，整个搜索框区域的宽度仍然是 1 000 像素，高度设置为90 像素，将装 logo 图片的盒子宽度设置为 200 像素，高度设置为 90 像素，距离左侧外边距50 像素。CSS 代码如图所示。设置 logo 样式代码设置 logo 样式代码运行上图中的代码，效果如图所示。设置 logo 效果图步骤五：在悬浮搜索框“ index-search”里创建包含搜索框和按钮的盒子，命名为“ search-bar”，在盒子里面套一个 form 表单。form 表单中包含两个 input 表单控件，一个作为文本搜索框，另一个作为按钮。input 标签里面的 placeholder 属性是用来设置提示语的，可以将提示语设置为 placeholder 的属性值，具体代码如图所示。创建包含搜索框和按钮的盒子代码步骤六：接下来制作主导航栏，设置主导航栏大盒子 div 的名称为“ index-nav”。它里面包含一个大盒子 div 和一个子 ul 无序列表，主导航栏的布局主要由 ul 无序列表来实现。html 代码如图所示。创建主导航栏盒子创建主导航栏盒子步骤七：用 CSS 代码设置主导航栏样式。“ index-nav”宽度还是设置为 1 000 像素，高度为 45像素，“全部分类”宽度设置为 150 像素。因为位于最左侧的“首页”的左边没有竖线，所以把除“首页”外的 li 列表项都设置了一个相同的类名“ qc”，以方便统一设置竖线分隔线，竖线使用“ ::before”伪类来实现，优点是无须在 html 中增加任何附加标签。设置主导航栏样式代码设置主导航栏样式代码在 CSS 中，通过 oat 属性来定义浮动。所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中的指定位置。其基本语法格式如下。常用 oat 属性值的含义如下。left：对象居左浮动，文本流向对象的右侧。right：对象居右浮动，文本流向对象的左侧。none：对象不浮动，该值为默认值。浮动代码下面通过一个案例来学习 oat 属性的用法，代码如图所示。浮动代码在上图中，分别为三个 div 盒子设置了不同的宽、高和背景颜色。运行上图中的代码，效果如图所示。图所示为未添加浮动属性前的布局样式，三个盒子依次由上到下排列，符合标准文档流的布局效果。接下来修改第一个盒子的浮动属性值，为其设置左浮动样式，具体代码如下。浮动的应用第一个盒子浮动效果保存 html 文件后，刷新页面，第一个盒子浮动效果如图所示。从上图中可以看出，由于为第一个盒子设置了左浮动样式，所以其脱离了标准文档流，其后的元素会自动向上浮动，直到上边缘与父元素顶部重合。接下来，修改第二个盒子的浮动属性值，为其添加左浮动样式。具体代码如下。第二个盒子浮动效果保存 html 文件后，刷新页面，第二个盒子浮动效果如图所示。从中可以看出，第二个浮动的盒子排列到了第一个盒子的右侧，与第一个盒子在同一行显示，且都脱离了标准文档流。此时第三个盒子自动向上浮动，直到上边缘与父元素顶部重合。第三个盒子浮动效果接下来修改第三个盒子的浮动属性值，为其添加左浮动样式，具体代码如下。保存 html 文件后，刷新页面，第三个盒子浮动效果如图所示。在图中，三个盒子最终在同一行显示，且依次从左向右排列，均脱离了标准文档流从上到下的排列方式。

展开更多......

收起↑