如何做一个简单的导航栏
1、简单的使用<ul>来完成。
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="*">Home</a></li>
<li><a href="*">News</a></li>
<li><a href="*">Contact</a></li>
<li><a href="*">About</a></li>
</ul>
</body>
</html>
2、另外一种无边距的导航栏效果。这个样式当中，所有的导航链接位于浏览器的左面。
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</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、我们可以设置一个垂直导航栏，再为它加上一上背景色。
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="*">Home</a></li>
<li><a href="*">News</a></li>
<li><a href="*">Contact</a></li>
<li><a href="*">About</a></li>
</ul>
</body>
</html>
4、要使得上个例子中的垂直导航栏变成水平的，我们只要定义一下元素为内联就可以了。
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</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>
5、我们知道这个链接的宽度并不一样的，我们可以设置一个浮动效果，从而让链接在宽度上保持一致性。
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="*">Home</a></li>
<li><a href="*">News</a></li>
<li><a href="*">Contact</a></li>
<li><a href="*">About</a></li>
</ul>
</body>
</html>
6、在网页中插入一个图像框。有了各种的声明就能让图像的排列达到我们需要的效果。
div.img
{
margin:3px;
border:1px solid #bebebe;
height:auto;
width:auto;
float:left;
text-align:center;
}
