项目六 页面导航

06页面导航348任务1制作网站导航列表任务2制作网站主导航栏349制作网站导航列表任务1350●熟练掌握超链接伪类的使用技巧。351本任务使用列表标签、超链接标签及浮动样式完成网站导航列表的布局，使用超链接伪类实现光标悬停在网站导航项时的变化效果，实现网站导航列表效果如图所示。352网站导航列表效果353步骤一：定义一个<ul></ul>无序列表，并使其包含四个<li></li>列表项，同时每个列表项中包含一对超链接<a></a>。在大多数网页中，导航列表的导航项都具有跳转到其他网页的功能，所以导航列表要使用超链接a标签完成，导航列表代码如图所示。354导航列表代码355步骤二：根据对目标效果的分析，去掉列表原有默认样式，同时把列表项设置为向左浮动，使其横向排列，样式代码如图所示。样式代码356运行效果如图所示。图已初步完成导航列表的布局，但是超链接a标签所自带的样式需要改变。这里需要应用超链接伪类，在CSS中可以用a选择器来设置a标签的常态样式。当鼠标光标悬停在a标签上时使用“a:hover”伪类选择器来设置此时的样式。浮动后效果357步骤三：将a标签常态背景色设置为蓝色，当鼠标光标悬停在其上时将背景色设置为红色。样式代码358超链接伪类并不是真正意义上的类。它的名称是由系统定义的，通常由标签名、类名或id名加上冒号“:”构成。超链接a标签的伪类有四种，具体见表。超链接a标签的伪类及含义359上表中列出了超链接a标签的四种伪类，分别用于定义访问前、访问后、鼠标光标悬停时及用鼠标单击不放开时。在实际编写代码时，通常只使用“a:link”“a:visited”和“a:hover”定义访问前、访问后和鼠标光标悬停时的样式，且通常对“a:link”和“a:visited”应用相同的样式，使得访问前和访问后的超链接标签样式保持一致。制作网站主导航栏任务2

360●掌握浮动属性的相关设置。361本任务使用浮动属性制作缤购乐食电子商务网站主导航栏，效果如图所示。362缤购乐食电子商务网站主导航栏效果363步骤一：在body标签中创建一个顶部盒子div，命名为“index-header”。然后在顶端盒子里面创建两个子盒子div，一个命名为“header-left”，另一个命名为“header-right”。最后分别为它们加入相应的文字内容，代码如图所示。创建顶部盒子代码364创建顶部盒子代码365步骤二：使用CSS代码设置顶部盒子样式。要注意的是，要让某标签中的内容水平居中，一般使用“text-align：center;”来实现。要让某标签中的内容垂直居中，一般通过设置高度height的值与行高line-height的值相同来实现，CSS代码如图所示。366设置顶部盒子样式代码367设置顶部盒子样式代码368设置顶部盒子样式代码369步骤三：接下来制作搜索框图片部分。先将整个悬浮搜索框命名为“index-search”，搜索框左边放置一张logo图片，实现方式为：创建一个div盒子，命名为“index-logo”，里面包含一个img标签，把事先准备好的logo图片通过src属性导入。代码如图所示。放置logo代码370步骤四：使用CSS代码设置logo样式，整个搜索框区域的宽度仍然是1000像素，高度设置为90像素，将装logo图片的盒子宽度设置为200像素，高度设置为90像素，距离左侧外边距50像素。CSS代码如图所示。371设置logo样式代码372设置logo样式代码373运行上图中的代码，效果如图所示。设置logo效果图374步骤五：在悬浮搜索框“index-search”里创建包含搜索框和按钮的盒子，命名为“search-bar”，在盒子里面套一个form表单。form表单中包含两个input表单控件，一个作为文本搜索框，另一个作为按钮。input标签里面的placeholder属性是用来设置提示语的，可以将提示语设置为placeholder的属性值，具体代码如图所示。创建包含搜索框和按钮的盒子代码375步骤六：接下来制作主导航栏，设置主导航栏大盒子div的名称为“index-nav”。它里面包含一个大盒子div和一个子ul无序列表，主导航栏的布局主要由ul无序列表来实现。html代码如图所示。创建主导航栏盒子376创建主导航栏盒子377步骤七：用CSS代码设置主导航栏样式。“index-nav”宽度还是设置为1000像素，高度为45像素，“全部分类”宽度设置为150像素。因为位于最左侧的“首页”的左边没有竖线，所以把除“首页”外的li列表项都设置了一个相同的类名“qc”，以方便统一设置竖线分隔线，竖线使用“::before”伪类来实现，优点是无须在html中增加任何附加标签。378设置主导航栏样式代码379设置主导航栏样式代码380在CSS中，通过float属性来定义浮动。所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中的指定位置。其基本语法格式如下。常用float属性值的含义如下。left：对象居左浮动，文本流向对象的右侧。right：对象居右浮动，文本流向对象的左侧。none：对象不浮动，该值为默认值。381浮动代码下面通过一个案例来学习float属性的用法，代码如图所示。382浮动代码383在上图中，分别为三个div盒子设置了不同的宽、高和背景颜色。运行上图中的代码，效果如图所示。图所示为未添加浮动属性前的布局样式，三个盒子依次由上到下排列，符合标准文档流的布局效果。接下来修改第一个盒子的浮动属性值，为其设置左浮动样式，具体代码如下。384浮动的应用385第一个盒子浮动效果保存html文件后，刷新页面，第一个盒子浮动效果如图所示。386从上图中可以看出，由于为第一个盒子设置了左浮动样式，所以其脱离了标准文档流，其后的元素会自动向上浮动，直到上边缘与父元素顶部重合。接下来，修改第二个盒子的浮动属性值，为其添加左浮动样式。具体代码如下。387第二个盒子浮动效果保存html文件后，刷新页面，第二个盒子浮动效果如图所示。从中可以看出，第二个浮动的盒子排列到了第一个盒子的右侧，与第一个盒子在同一行显示，且都脱离了标准文档流。此时第三个盒子自