垂直菜单设计
同样的先写HTML结构
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">售后</a></li>
</ul>
</body>
在其中加入css样式
这里本来是设置的块级元素li的样式,由于块级元素只有一个a,就直接将a设置为块级元素,然后对a写鼠标经过事件
a:HOVER{background-color: red;color: #fff;}
当鼠标经过的时候,a的背景颜色变为red,文本颜色变为白色
下面是样式,其中text-indent是内部缩进,保持了a的大小不变,只是对内部进行缩进
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 14px;
}
ul {
list-style: none;
width: 100px
}
a {
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
width: 100px;
background-color: #ccc;
margin-bottom:1px;
text-indent: 10px;
}
a:HOVER{background-color: red;color: #fff;}
li {
}
</style>
水平菜单设计
将上面的css中li设置为左浮动(float:left),然后要将ul的width删除后才能看到效果,因为ul的width只有100px,而a中的width就为100px,即便是左浮动,因为占据了父类的全部空间,因此仍然显示的是垂直排列,浮动的原理是,将块级元素变成行级元素,并按照浮动的方法排列,当排满一行后,就会移到下一行中
其中将text-indent改为了text-align:center(即文字相对文字的外边界居中)