纵向导航菜单及二级弹出菜单-Web标准(div+css)教程

敖游
2016-03-06
来源:遨游建站



  


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

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

  


  


  


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

  


  


  这里的a:hover属于伪类,在下一章节时会详细讲解

  


  源代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/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>

  <li><a href="@#">首页</a></li>

  <li><a href="#">网页版式布局</a></li>

  <li><a href="#">div+css教程</a></li>

  <li><a href="#">div+css实例</a></li>

  <li><a href="#">常用代码</a></li>

  <li><a href="#">站长杂谈</a></li>

  <li><a href="#">技术文档</a></li>

  <li><a href="#">资源下载</a></li>

  <li><a 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; padding: 0px; font-size: 12px; font-weight: normal; }

  ul { list-style: none; }

  img { border-style: none; }

  


  这里选择器类型选择复合内容,我用的是dw最新cs5版本,比之前章节用的cs3版本中更合理了,把ID和伪类分开了。然后在选择器名称中输入我们常用的带默认样式的标签,中间以英文逗号分隔

  


  


  下面对img标签进行重定义,清除图片有链接时默认的边框

  


  


  下边设置全局ul标签默认的圆点为无

  


  


  这样就很简单把常用标签的默认样式给清除掉了,如果需要边距的话再重新定义,也避免了各个浏览器对标签默认样式解析差异造成页面显示不一样的问题。

  三、css派生选择器

  CSS初学者不知道使用子选择器是影响他们效率的原因之一。派生选择器可以帮助你节约大量的class定义。我上边的例子中应用了些派生选择器如下的css代码

  #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; }

  #menu ul和#menu ul li即为派生选择器,如果我们把前边的#menu去掉,那么将是对ul标签重定义,重定义的属性将应用到全局,而前边加上#menu后,将是定义ID为menu元素内ul的样式,设置它的样式只对#menu下的ul生效,不对它之后的ul生效,这个有点像编程中的局部变量,而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li,派生选择器可以使我们不用再给每个li定义一个样式名来定义样式,只需使用派生选择器,从它的父元素处选择即可,这样能大大提高效率。

  四、css选择器的分组

  你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的,p段落、div分区、span都是20像素字体。

  h1,h2,h3,h4,h5,h6 {

  color: green;

  }

  p,div,span{

  font-size:20px;

  }

  五、纵向二级列表

2  /  3
阅读441
分享
写评论...