1.用ul和li的结构,在li中嵌套a标签
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">帮助</a></li>
</ul>
2.
竖向:设置display的值为block
横向:inline-block(横向),这样做是为了使行内元素a变为块级元素从而设置其的高度和宽度,宽度也决定了每个导航 链接的间距
3.设置ul中的li向左浮动,如果有父级包含块的问题,记住在父级包含块中设置overflow:auto;
4.让文字居中,去掉下划线,项目符号等
竖向:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul li a{
display: block;
height: 2em;
line-height: 2em;
color: #0836B9;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">帮助</a></li>
</ul>>
</body>
</html>
横向:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul li {
float: left;
list-style: none;
}
ul li a{
display: block;
width: 6em;
height:3em;
line-height: 3em;
text-align: center;
color:#F4F2F2;
border-left: 1px solid #c8c8c8;
background:#564E4E;
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">帮助</a></li>
</ul>
</body>
</html>