004 纵向导航菜单及二级弹出菜单.pptVIP

纵向导航菜单及二级弹出菜单 * 内容和知识点： ■ 纵向列表 ■ 标签的默认样式 ■ css派生选择器 ■ css选择器的分组 ■ 纵向二级列表 ■ 相对定位和绝对定位 一、纵向列表 纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务等，今天我们就学习一下纵向导航的制作 先新建一个页面，然后插入一个ID为menu的div，然后在设计视图中选中文字，点击工具栏的ul图标，即会自动插入ul和li，然后修改文字内容为你需要的内容。 div id=menu ul li首页/li li网页版式布局/li lidiv+css教程/li lidiv+css实例/li li常用代码/li li站长杂谈/li li技术文档/li li资源下载/li li图片素材/li /ul /div 生成的css代码如下： style type=text/css #menu ul { list-style: none; margin: 0px; padding: 0px; } /style 下面我们定义一下全局的字体，字号，行距等，点击css样式面板上的新建按钮，在弹出的窗口中选择器类型选择标签，名称选择body，然后在css编辑器中设置如下图所示属性 body全局样式定义后，下面我们给#menu定义一个灰色的1px边框及宽度，然后把li定义下背景色和下边框及内边距等 接下来定义li的背景色为浅灰色及下边框和内边距 这些属性设置完后，一个简单的纵向列表菜单初具模型了。因为导航菜单，需要链接到其它页面，下边把这些导航加上链接，然后在定义a的状态和鼠标划过状态。 要添加链接，先选择要添加链接的文字，然后在属性页面链接上输入要链接的页面址，我这里输入个#，是个虚拟链接，不指向任何页面。 创建a的样式后，下面我们增加个交互效果，当鼠标划过链接文字时，让文字颜色变成红色，这时就需要用到a:hover这个伪类了 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / style type=text/css body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width: 100px; border: 1px solid #CCC; } #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; } /style /head body div id=menu ul lia href=@#首页/a/li lia href=#网页版式布局/a/li lia href=#div+css教程/a/li lia href=#div+css实例/a/li lia href=#常用代码/a/li lia href=#站长杂谈/a/li lia href=#技术文档/a/li lia href=#资源下载/a/li lia href=#图片素材/a/li /ul /div /body /html 二、标签的默认样式 大多数标签都有自己的默认样式，比如body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。 body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px;