-
background-position:xpos ypos
第一个值是水平位置，第二个值是垂直位置。
查看全部 -
加入JS，实现动态动画
查看全部 -
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}
.nav li{float:left}
.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); margin-left:1px;}
.nav li a.on, .nav li a:hover{ padding-bottpm:30px; color:#fff;background-position:0 -30px;}
</style>
</head>
<body>
<ul class="nav">
<li><a class="on" href="#">首 页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
查看全部 -
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
ul{ list-style:none; width:100px}
a{color:#333;text-decoration:none}
.nav li a{
display:block;
text-inline:20px;
height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;}
.nav li a:hover{ background-color:#F60; color:#fff}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
简版导航栏
查看全部 -
1、垂直菜单：ul取消list-style：none
2、因为最终实现结果是在a元素上所以，设置a就可以
3、A是内联元素，想要设置a元素，a首先要显示为行内块，才能对它就行设置
水平菜单：
除了以上内容
i设置float属性，且ul不能设置宽度
查看全部 -
li{float:left;} --浮动左对齐变成水平导航栏 --删除掉之前的文本缩进 text-indent:10px;查看全部 -
<style> *{margin:0;padding:0;font-size:14px;} --基本的样式清除 ul{list-style:none;width:100px} --清除掉无序列表样式,定义宽度为100像素 a{text-decoration:none} --去除a标签样式 li{height:30px;line-height:30;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:10px} --里面单独列表项高度,垂直居中,固定宽度,给其背景颜色,间距为1像素相互之间,文本缩进10px(文字向右移动10px) --如果把a标签换成块级元素之后可以把li的样式全都集成到a标签上 --也就是 a{text-decoration:none;display:block;height:30px;line-height:30;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:10px} a:hover{background-color:#f60;color:#fff} --鼠标经过的时候改变背景颜色和文字颜色 </style> <ul> <li><a href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul>查看全部 -
ul相当于li的父类，给ul设置宽度100px，每行只能显示1个li，就换行，现在有5个li，如果不去掉li的宽度的话，就将width设置为 li宽度*5 即可。
查看全部 -
通过a:hover,增加交互效果
查看全部 -
<script>
window.onload=function(){
var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover=function(){
//鼠标经过一级菜单，二级菜单动画下拉显示出来
var oSubNav=this.getElementsByTagName('ul')[0];
if(oSubNav){
var This=oSubNav;
clearInterval(This.time);
This.time=setInterval(function(){
This.style.height=This.offsetHeight+16+"px";
if(This.offsetHeight>=120)
{
clearInterval(This.time);
}
},30)
}}
//鼠标离开菜单，二级菜单动画收缩起来。
aLi[i].onmouseout=function(){
var osubNav=this.getElementsByTagName('ul')[0];
if(osubNav){
var This=osubNav;
clearInterval(This.time);
This.time=setInterval(function(){
This.style.height=This.offsetHeight-16+"px";
if(This.offsetHeight<=0){
clearInterval(This.time)
}},30)
}
}
}
}
</script>
查看全部 -
$(function(){
$('a').hover(
function(){
$(this).stop().animate({"width":"160px"},200);
}
function(){
$(this).stop().animate({"width":"120px"},200);
}
)
})
查看全部 -
window.onload=function(){
var aA=document.getElementsByTagName('a');
for(var i=0;i<aA.length;i++){
aA[i].onmouseover=function(){
clearInterval(this.time);
var This=this;
This.time=setInterval(function(){
This.style.width=This.offsetWidth+8+"px";
if(This.offsetWidth>=160){
clearInterval(This.time)}
},30) }}
aA[i].onmouseout=function(){
clearInterval(this.time);
var This=this;
This.time=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=120){
This.offsetWidth="120px";
clearInterval(This.time)}
},30) }}
}
查看全部 -
a:hover{height:40px;margin-top:-10px;line-height:40px}/*有原来高30px，到40px，且文字依然居中*/
查看全部 -
a:hover{background-position:0 -30px}/*背景向下移动30px*/
background-position 属性设置背景图像的起始位置。background-position: x% y% （左上角是 0% 0%。右下角是 100% 100%。
查看全部 -
ul{list-style:none;}/*清除圆点*/
a{text-decoration:none}/*清除下划线*/
text-indent:10px;/*文本缩进*/
需要将a标签设置为块元素，才能设高宽、hover效果 代码：a{display:block}
hover格式 a:hover{background:green;}查看全部
举报