导航栏

1.现在，让我们从列表中去掉圆点和外边距：

   ul
   {
   list-style-type:none;
   margin:0;
   padding:0;
   display:block;
   }


    list-style-type:none - 删除圆点。导航栏不需要列表项标记。
    把外边距和内边距设置为 0 可以去除浏览器的默认设定。

display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。

display:inline; 水平导航栏
    float:left;
    float:left - 使用 float 来把块元素滑向彼此。
    display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
    60px - 由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
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>

荣耀存于心，而非留于形我还在寻找，回家的路长路漫漫，唯剑做伴且随疾风前行，身后一许流星吾虽浪迹天涯，却未迷失本心