指导 2 - 简单的CSS滚动列表 - 步骤综合

介绍

以下一系列步骤仅仅是创建滚动效果的一种方法。这个方法有两个很关键的地方 - 将列表设置成块级和设置鼠标经过时的样式。

这个列表模型将会在所有的标准兼容浏览器中显示正常，除了以下个别情况。由于错误解析，在Win/IE5里显示时列表的宽度将减小。如果使用了标准兼容模式，那么该列表在Win/IE6和Mac/IE5中都能够正常显示。

CSS 代码
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}


HTML 代码
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

步骤 1 - 制作一个基本的列表

用一个无序列表开始。列表项都是可以点击的（都包含<a href="#"> </a>）。但是这并不是必需的。举个例子，“#”用来指向一个虚拟链接。

步骤 2 - 删掉列表项符号

设置"list-style-type"属性的值为"none"可以删掉HTML中的列表项符号。

#navcontainer ul { list-style-type: none; }

步骤 3 - 删掉内边距和外边距属性

标准HTML列表带有一定的左缩进。各个浏览器对此的缩进幅度也不尽相同。有的浏览器(Mozilla, Netscape, Safari)使用内边距设定所进的比例，而有的浏览器(Internet Explorer, Opera)却使用外边距。

为了删掉浏览器惯有的左缩进，我们设置列表的"UL"标签的内边距和外边距属性值均设为"0"。

margin: 0;
padding: 0;

步骤 4 - 块状显示列表项

列表项可以通过设置“display”属性的值为“block”来实现滚动效果。

#navcontainer a { display: block; }

步骤 5 - 添加背景颜色

我们在“a”标签上设置背景颜色。当然背景色要与字体颜色有足够的对比度。

color: #FFF;
background-color: #036;

步骤 6 - 设置列表宽度

为了使每一个列表项的整个块都能够被“a”标签覆盖，我们还需要设置以下列表的宽度。

width: 9em;

步骤 7 - 增大内边距

Add padding to the list items within the "a" state.

padding: .2em .8em;

步骤 8 - 文本装饰

您可能希望去掉文本的下划线。因为导航栏的位置和其他反馈机制能够很明显地被看作一组链接，所以我们经常要将导航栏中的链接文本中的下划线去掉。当然，您也应该注意修改标准超链接的行为会使可能无法意识到这些列表项是链接的用户感到困惑。

text-decoration: none;

步骤 9 - 添加滚动颜色

使用“a:hover”来设置二级背景色，作为滚动效果所使用的颜色。如果您现在用鼠标在列表上滚动，您将会看到滚动效果。

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}

步骤 10 - 设置列表项的间距

设置列表项之间的间距可以通过设置“LI”元素的外边距实现。本例我们为“LI”元素的底边距设置“0.2em”的距离。

#navcontainer li { margin: 0 0 .2em 0; }

完成！

还有许多的变化可以应用到这个列表方法中。您可以设置字体颜色，内边距宽度和背景颜色等来创建更广泛的列表样式。

变化 - 当前页面标记

有时您经常想想用户显示他们正在浏览哪一个页面。有许多办法可以实现这一功能。一个比较简单的办法是：

  1. add id="active" to the "LI" element associated with the current page
  2. duplicate the main rollover list rule set - "#navcontainer a"
  3. replace "#navcontainer" with "#active"
  4. change the background color
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0 0 .2em 0; }
#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}

#active a
{
display: block;
color: #FFF;
background-color: #600;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

变化 - 添加边框

使用内边距和边框可以产生无穷无尽的效果。一种简单的选择是为列表的不同边设置不同的边框颜色，然后为鼠标经过的列表项设置相反的颜色。这样就可以设置成经典的凹凸按钮效果。

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a
{
display: block;
color: #036;
background-color: transparent;
width: 9em;
padding: .2em .8em;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #036;
border-bottom: 1px solid #036;
}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
border-top: 1px solid #036;
border-left: 1px solid #036;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}

« 返回主目录

其他的Max Design 文章和演讲
相关链接 webstandardsgroup.org