第1步 - 从简单的无序列表开始
在本练习中，我们想要一个简单的无序列表并将其转换为水平导航栏。
我们将从一个简单的无序列表开始。UL使用ID选择器（id =“navlist”）进行样式设置。在本教程中，使用了一个明显的名称来帮助说明这一点，但可以使用任何名称。但是，最好根据类别的含义来命名类，而不是它们的外观。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<ul id=navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
第2步 - 删除子弹
要删除HTML列表项目符号，请将“list-style-type”设置为“none”。为了定位特定的UL，我们使用“ul＃navlist”，否则页面上的所有UL都会受到影响。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
list-style-type:none;/*new codes*/
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
第3步 - 删除填充和边距
标准HTML列表具有一定量的左缩进。每个浏览器的金额各不相同。有些浏览器使用填充（Mozilla，Netscape，Safari），其他浏览器使用边距（Internet Explorer，Opera）来设置缩进量。
要在所有浏览器中一致地删除此左缩进，请将“UL”的填充和边距都设置为“0”。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;/*new codes*/
margin:0;/*new codes*/
list-style-type:none;
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
第4步 - 显示内联
要强制列表成一行，请应用“display：inline;” 到“李”。要定位特定列表，我们使用“ul＃navlist li”。这意味着我们希望在UL中定位LI元素，使用名为“navlist”的ID进行样式设置。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
}
ul#navlist li {
display:inline;/*new codes*/
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
第5步 - 浮动“a”状态
当列表项转换为内联时，它们的左边缘有一定量的填充，无法删除。要使列表项彼此相邻而没有任何间隙，必须将它们设置为“float：left”。在这个阶段，我们无法看到差距已经结束。
浮动元素时也需要宽度 - 除非它是图像。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
}
ul#navlist li {
display:inline;
}
ul#navlist li a {
float:left;/*new codes*/
width:5em;
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
第6步 - 添加背景颜色
此时，可以应用背景颜色和文本颜色。有许多颜色组合可以使用。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
}
ul#navlist li {
display:inline;
}
ul#navlist li a {
float:left;
width:5em;
color:#fff;/*new codes*/
background-color:#036;/*new codes*/
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
步骤7 - 将填充添加到“a”状态
要将每个列表项放入框中，我们需要将填充添加到“a”状态。在这种情况下，我们使用简写规则。顶部和底部的填充设置为0.2em，左侧和右侧的填充设置为1em。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
}
ul#navlist li {
display:inline;
}
ul#navlist li a {
float:left;
width:5em;
color:#fff;
background-color:#036;
padding:0.2em 1em;/*new codes*/
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
第8步 - 删除文本修饰
此时，您可能希望删除文本下划线。通常的做法是导航不要有下划线，因为它们的位置和其他反馈机制使它们更明显地成为链接。但是，您应该知道修改标准超链接行为（例如下划线）可能会让某些用户感到困惑，他们可能没有意识到该项是链接。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
}
ul#navlist li {
display:inline;
}
ul#navlist li a {
float:left;
width:5em;
color:#fff;
background-color:#036;
padding:0.2em 1em;
text-decoration:none;/*new codes*/
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
步骤9 - 添加边框以分隔列表项
边框设置在列表项的右侧以将它们分开。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
}
ul#navlist li {
display:inline;
}
ul#navlist li a {
float:left;
width:5em;
color:#fff;
background-color:#036;
padding:0.2em 1em;
text-decoration:none;
border-right:1px solid #fff;/*new codes*/
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
第10步 - 添加翻转颜色
使用“a：hover”设置第二种背景颜色，作为翻转状态。如果您现在滚动列表，您将看到翻转工作。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
}
ul#navlist li {
display:inline;
}
ul#navlist li a {
float:left;
width:5em;
color:#fff;
background-color:#036;
padding:0.2em 1em;
text-decoration:none;
border-right:1px solid #fff;
}
ul#navlist li a:hover {/*new codes*/
background-color:#369;
color:#fff;
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
步骤11 - 浮动UL
要将整个列表放入导航栏，我们需要为UL着色并将其拉伸到浏览器窗口的整个宽度。在我们这样做之前，我们需要将“float：left”应用于UL - 否则它将不会显示。因此，将float应用于UL并将宽度设置为“100％”。
浮动元素时也需要宽度 - 除非它是图像。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
float:left;/*new codes*/
width:100%;/*new codes*/
}
ul#navlist li {
display:inline;
}
ul#navlist li a {
float:left;
width:5em;
color:#fff;
background-color:#036;
padding:0.2em 1em;
text-decoration:none;
border-right:1px solid #fff;
}
ul#navlist li a:hover {
background-color:#369;
color:#fff;
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
步骤12 - 向UL添加背景颜色
此时，可以将背景颜色和文本颜色应用于UL。有许多颜色组合可以使用。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul#navlist {
padding:0;
margin:0;
list-style-type:none;
float:left;
width:100%;
color:#fff;/*new codes*/
background-color:#036;/*new codes*/
}
ul#navlist li {
display:inline;
}
ul#navlist li a {
float:left;
width:5em;
color:#fff;
background-color:#036;
padding:0.2em 1em;
text-decoration:none;
border-right:1px solid #fff;
}
ul#navlist li a:hover {
background-color:#369;
color:#fff;
}
</style>
</head>
<body>
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
</body>
</html>效果图如下：
