1.CSS分类属性 (Classification)
CSS分类属性允许控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
（1）clear 设置一个元素的侧面是否允许其他的浮动元素。
（2）cursor 规定当指向某元素之上时显示的指针类型。
<html>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto</span><br />
<span style="cursor:crosshair">Crosshair</span><br />
<span style="cursor:default">Default</span><br />
<span style="cursor:pointer">Pointer</span><br />
<span style="cursor:move">Move</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:wait">wait</span><br />
<span style="cursor:help">help</span>
</body>
</html>
（3）display 设置是否及如何显示元素。
①显示元素：display:black;
②隐藏元素：display:none;
③内联元素：display:inline;
④块级元素：display:block;
⑤行内块级元素：display:inline-black;
（4）float 定义元素在哪个方向浮动。
（5）position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
（6）visibility 设置元素是否可见或不可见。
显示元素：visibility:visible;
隐藏元素：visibility:hidden;
2.导航栏
（1）导航栏 = 链接列表
导航栏需要标准的HTML作为基础。导航栏基本上是一个链接列表，因此使用<ul>和<li>元素是非常合适的：
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
（2）垂直导航栏
如需构建垂直导航栏，只需要定义<a>元素的样式，除了上面的代码之外：
a
{
display:block;
width:60px;
}
要始终规定垂直导航栏中<a>元素的宽度。如果省略宽度，会产生意想不到的结果。例如：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
（3）水平导航栏
有两种创建水平导航栏的方法。使用行内或浮动列表项。两种方法都不错，但是如果您希望链接拥有相同的尺寸，就必须使用浮动方法。
①行内列表项
除了上面的“标准”代码，构建水平导航栏的方法之一是将<li>元素规定为行内元素：
li
{
display:inline;
}
②对列表项进行浮动
在上面的例子中，链接的宽度是不同的。为了让所有链接拥有相等的宽度，浮动<li>元素并规定<a>元素的宽度：实例
li
{
float:left;
}
a
{
display:block;
width:60px;
}
水平导航案例：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>注释：</b>如果您只为a元素设置内边距（而不设置ul元素），那么链接会出现在ul元素之外。所以，我们为ul元素添加了top和bottom内边距。</p>
</body>
</html>