当前位置:编程学习 > html/css >>

CSS实例:UL li打造CSS横向菜单蓝色地平线

>   在前面的文章中学习《用列表ul制作CSS横向菜单的基础知识》http://www.fun52.com/article.asp?id=395。以及《CSS实例教程:UL制作CSS横向菜单蓝绿色调》http://www.fun52.com/article.asp?id=396。我们发现了一些问题,这些菜单的链接相距太远了。而且浏览器窗口有一定距离的空白,更重要的是宽度问题。我们今天就来解决这些问题制作“蓝色地平线”。
  HTML代码与前面的一样,我们就不再重复了。我们看CSS代码。

 
* {
      margin:0;
      padding:0;
}
#nav {
      background:#06c;
      float:left;
      width:100%;
}
#nav li {
      display: inline;
      list-style-type: none;
}
#nav li a:link,#nav li a:visited {
      float:left;
      padding:5px 12px;
      color:#fff;
      text-decoration: none;
      background:#06c;
      border-right: 1px solid #fff;
}
#nav li a:hover {
      background:#060;
}
  首先是整体布局声明。利用通配符“*”表示在不特别声明的情况下,默认所有元素的边距及填充均为零。
  我们设置UL无序列表nav的背景色为#06c,向左浮动,宽度是100%。这两段代码定义以后,我们的菜单就能紧靠着浏览器窗口了,并且它的宽度是100%。
  菜单的列表项li定义为display:inline;内联(行内)将li限制在一行来显示及设置列表项预设标记为无;
  我们接着往下看链接区域的代码意义,link、visited状态:
  链接元素向左浮动,填充上下为5px、左右为12px。
  文字颜色为白色,去除链接下划线。背景色#06c与上面的相同。
  我们定义了右边框线:1px、实线、白色#fff。这一句很重要,它明确的划分了菜单链接之间的距离。这一句话是缩下的形式。
  完整的写应该是:(关于更多缩写代码知识请参考fun52.com的其它文章)

 
第 1 2 页
补充:Css教程,高级应用 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,