横向菜单

#nav ul{
background:red;
height:51px;
line-height:51px;
text-align:center;
}

#nav ul li{
display:inline;
background:yellow;
height:51px;-------------这里的高度对li没有影响,那要怎么样才能使得每个li被调高了呢。
width:100px;
}

所以可以用先进的方法
#nav ul li{
display:inline-block;-------变成块。但是这个只有ie8支持
background:yellow;
height:51px;
width:100px;
}

所以解决方法是: 不用inline.....不用inline那么他就是block....然后再让block浮动即可。如果不浮动的话,区块就是一行

#nav ul li{
background:url(../images/rlink.jpg) no-repeat right center; ----在右边的中间加上一个分割符
height:51px;
width:124px;
float:left;
}

#nav ul li.end{
width:123px;
background:none;----最后一个分隔符是不要的。。。所以背景设置为none
}

#nav {
width:867px;
height:51px;
background:url(../images/linkbg.jpg); ----这张图片是一个小小的竖线,然后布满整个区域
}


#nav ul li a{ //a默认的是inline,所以只有点在文字链接上面才有反映,点在其他区域没有反映
display:inline-block; -----变成块,这样在这个区域上点击都有反映 而且都ie6,7,8都支持
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值