创建水平导航实例
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
background-color:#cccccc;
padding:10px;
width:300px;
}
a:hover{
background-color:green;
}
</style>
</head>
<body>
<h1>水平导航实例</h1>
<ul>
<li><a href="https://www.dwoke.com">Home</a></li>
<li><a href="https://www.dwoke.com" >News</a></li>
<li><a href="https://www.dwoke.com">Contact</a></li>
<li><a href="https://www.dwoke.com">About</a></li>
</ul>
<p>display: inline; 删除每个列表项之前和之后的换行符，才能显示在一行。</p>
</body>
</html>
运行效果：
评论