-
background-position:xpos ypos
第一個(gè)值是水平位置，第二個(gè)值是垂直位置。
查看全部 -
加入JS，實(shí)現(xiàn)動(dòng)態(tài)動(dòng)畫
查看全部 -
<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="#">產(chǎn)品展示</a></li>
? ? <li><a href="#">售后服務(wù)</a></li>
? ? <li><a href="#">聯(lián)系我們</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="#">產(chǎn)品展示</a></li>
? ? <li><a href="#">售后服務(wù)</a></li>
? ? <li><a href="#">聯(lián)系我們</a></li>
? </ul>
簡版導(dǎo)航欄
查看全部 -
1、垂直菜單：ul取消list-style：none
2、因?yàn)樽罱K實(shí)現(xiàn)結(jié)果是在a元素上所以，設(shè)置a就可以
3、A是內(nèi)聯(lián)元素，想要設(shè)置a元素，a首先要顯示為行內(nèi)塊，才能對(duì)它就行設(shè)置
水平菜單：
除了以上內(nèi)容
i設(shè)置float屬性，且ul不能設(shè)置寬度
查看全部 -
li{float:left;} --浮動(dòng)左對(duì)齊變成水平導(dǎo)航欄 --刪除掉之前的文本縮進(jìn)?text-indent:10px;查看全部 -
<style> ??????*{margin:0;padding:0;font-size:14px;} ??????--基本的樣式清除 ??????ul{list-style:none;width:100px} ??????--清除掉無序列表樣式,定義寬度為100像素 ??????a{text-decoration:none} ??????--去除a標(biāo)簽樣式 ??????li{height:30px;line-height:30;width:100px;background-color:#ccc;margin-bottom:1px;text-indent:10px} ??????--里面單獨(dú)列表項(xiàng)高度,垂直居中,固定寬度,給其背景顏色,間距為1像素相互之間,文本縮進(jìn)10px(文字向右移動(dòng)10px) ?????? ??????--如果把a(bǔ)標(biāo)簽換成塊級(jí)元素之后可以把li的樣式全都集成到a標(biāo)簽上 ??????--也就是 ??????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} ??????--鼠標(biāo)經(jīng)過的時(shí)候改變背景顏色和文字顏色 </style> <ul> ????<li><a?href="#">首??頁</a></li> ????<li><a?href="#">新聞快訊</a></li> ????<li><a??href="#">產(chǎn)品展示</a></li> ????<li><a??href="#">售后服務(wù)</a></li> ????<li><a??href="#">聯(lián)系我們</a></li> </ul>查看全部 -
ul相當(dāng)于li的父類，給ul設(shè)置寬度100px，每行只能顯示1個(gè)li，就換行，現(xiàn)在有5個(gè)li，如果不去掉li的寬度的話，就將width設(shè)置為 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(){
? ? ? ? ? ? //鼠標(biāo)經(jīng)過一級(jí)菜單，二級(jí)菜單動(dòng)畫下拉顯示出來
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)
}}
? ? ? ? //鼠標(biāo)離開菜單，二級(jí)菜單動(dòng)畫收縮起來。
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}/*背景向下移動(dòng)30px*/
background-position 屬性設(shè)置背景圖像的起始位置。background-position:?x% y%? ? ??（左上角是 0% 0%。右下角是 100% 100%。
查看全部 -
ul{list-style:none;}/*清除圓點(diǎn)*/
a{text-decoration:none}/*清除下劃線*/
text-indent:10px;/*文本縮進(jìn)*/
需要將a標(biāo)簽設(shè)置為塊元素，才能設(shè)高寬、hover效果 ? 代碼：a{display:block}
hover格式 ? a:hover{background:green;}查看全部
舉報(bào)