看不懂本节的请直接跳过,学习完JS与JQUERY基础后再回头,效果特好。
$(function(){
$('.nav>li').hover(
function(){
$('ul',this).stop().animate({'height':'120px'},500,'linear')
},
function(){
$('ul',this).stop().animate({'height':'0px'},500,'swing')
})
})
$(function(){
$('.nav>li').hover(
function(){
$('ul',this).stop().animate({'height':'120px'},500,'linear')
},
function(){
$('ul',this).stop().animate({'height':'0px'},500,'swing')
})
})
菜单<li>浮动后,<li>脱离文档流,导致<ul>将失去高度和宽度;如果需要对<ul>进行整体背景设置,首先要给<ul>定义宽、高
且不说用图片做圆角不是最好的方法,这个图片的宽已经固定了,不适合扩展,如果需要扩展,这种方法就不适用了,得设置多层背景嵌套达到圆角并且可以扩展的效果
2016-08-01
用border-radius写的,希望可以给大家参考
a{color:black; text-decoration: none;display: block;background-color: #ccc;height: 25px;
width: 100px;text-align: center;line-height: 25px;border-top-left-radius: 12px;
border-top-right-radius: 12px;}
a{color:black; text-decoration: none;display: block;background-color: #ccc;height: 25px;
width: 100px;text-align: center;line-height: 25px;border-top-left-radius: 12px;
border-top-right-radius: 12px;}
2016-07-29