纵向二级菜单.docxVIP

今天我们学习纵向导航菜单及二级弹出菜单，包含以下内容和知识点：

纵向列表

标签的默认样式css派生选择器css选择器的分组纵向二级列表

相对定位和绝对定位

一、纵向列表

纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作

先新建一个页面，保存文件命名为zongxiangxiala.html，然后插入一个ID为menu的div，

然后在设计视图中选中文字，点击工具栏的ul图标，即会自动插入ul和li，然后修改文字内容为你需要的内容。

修改成为下图所示纵向一级菜单：

代码视图如下所示：

divid=menu

ul

li首页/li

li网页版式布局/li

lidiv+css教程/li

lidiv+css实例/li

li常用代码/li

li站长杂谈/li

li技术文档/li

li资源下载/li

li图片素材/li

/ul

/div

从预览的效果上看，四周都有很大的空隙，而且每一行前边还有个点，这是因为标签的默认样式造成的，下面我们需要创建样式表把标签的默认样式给清除掉。

任意选择一个列表项，点击下面状态栏上的ul，选择全部的ul，新建CSS规则，类型为

ID，规则选择器为#menuul

生成的CSS代码如下：

#menuul{

margin:0px;padding:0px;

list-style-type:none;

}

下面我们定义一下全局的字体，字号，行距等，点击css样式面板上的新建按钮，在弹出的窗口中选择器类型选择标签，名称选择body，然后在css编辑器中设置如下图所示属性

body全局样式定义后，下面我们给#menu定义一个灰色的1px边框及宽度，然后把li定义下背景色和下边框及内边距等

「新建CSS坟则 丙

确定取消选择器类型 O类呵应用于任何标

确定

取消

O标签洹新定义特定标签的外观）＠

＠面级(ID、伪类选择器等）(A)

选择器 1玉西 v|

定义在·0 |新涅祥式表文件） v|

＠仅对该文挡 帮助

r五enu的CSS坟则定义 区］，

分类 边框

类型

::I匕亘

F.l尽

区块方框

罔心一

定位

祥式 宽痉 颜色

巨l全部相同怠）已全部相同辽） 区l全部相同(Q)

上cr_):I实线 1 1 11像索 (px) 1 |二| ccccc |

扩展 右氓）雯笾----V-」 1

--V业-象-索-

p-(x--:-I

」

寸叶1像索下屯） 实线

寸

叶1像索

1左L) 实线 寸

1

VII像索 l妇 寸

(px)

(px)

口-...匡 ccccc

卫1 ccccc

帮助Q!) [ 确定_J]［ 取消 ］［ 应用心

接下来定义li的背景色为浅灰色及下边框和内边距

f五enuul li的 CSS坟则定义 —因

分类 类型

臣上一 、

`i

`i

I

＿ ＿＿

＿ ＿＿ ＿＿ ＿＿

V

妇心 I

V样式CT):[I

V

VI像索如）

、户

粗细创）1

变体包）1

V行面叩: II像索(px)

V

修饰屯）口下凇 甩

口上划线 (Q)口删除线 心口闪烁屯）口无氓）

v1]大小写屯）:I

＿颜色（（），口 1

＿

帮助佴） 确定 [ 取消 ］［应用心

「一皿，enuul li的 CSS坟则定义 因

器

巴－』

蠲

=t::...B.

F3豆

者呆颜色贮，）卫 l#eee

者录图像辽）·一－

VI［浏览．

言 重茎屯）

附件(I):

水平位詈亿）·

垂宜位置叨

、f

V

VI像索如）

VI像索如）

帮助迅） 确定 l|． 取消 ］［应用心

这些属性设置完后，一个简单的纵向列表菜单初具模型了。因为导航菜单，需要链接到其它页面，下边把这些导航加上链接，然后在定义a的状态和鼠标划过状态。

要添加链接，先选择要添加链接的文字，然后在属性页面链接上输入要链接的页面址，这里输入个#，是个虚拟链接，不指向任何页面。

创建a的样式后，下面我们增加个交互效果，当鼠标划过链接文字时，让文字颜色变成红色，这时就需要用到a:hover这个伪类了

二、标签的默认样式

大多数标签都有自己的默认样式，比如body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，