思路:
- 首先用HTMl定义一套列表机制,该列表机制均由a标签控制,如下:
<div id="menu">
<ul id="list">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">关于</a>
</li>
<li>
<a href="#">帮助</a>
</li>
</ul>
</div>
- 使用CSS样式放置在一行
list-style-type: none;
:去掉圆点
width: 100px;
:宽度
height: 50px;
:高度
line-height: 50px;
:行高
background-color:beige;
:背景色
text-align: center;
:文本居中
float: left;
:整一行上
text-decoration: none;
:去掉下划线
- 让导航栏动起来
<style>
#list li {
list-style-type: none;
width: 100px;
height: 50px;
line-height: 50px;
/*background-color: beige;*/
text-align: center;
float: left;
}
#list li:hover{
background-color: red;
}
#list li a {
text-decoration: none;
}
#menu{
width: 700px;
height: 50px;
background-color: beige;
margin: 0 auto;
}
</style>
创作不易,大侠请留步… 动起可爱的双手,来个赞再走呗 (๑◕ܫ←๑)