-
菜單<li>浮動(dòng)后,<li>脫離文檔流,導(dǎo)致<ul>將失去高度和寬度;如果需要對(duì)<ul>進(jìn)行整體背景設(shè)置,首先要給<ul>定義寬、高。查看全部
-
基本的樣式清除: *{margin:0;padding:0} 無序列表圓點(diǎn)去除: ul{list-style:none} 下劃線去除: a{text-decoration:none} 文本縮進(jìn)標(biāo)簽 text-indent 不會(huì)影響總體寬度(padding會(huì)) 需要將a標(biāo)簽設(shè)置為塊元素,才能設(shè)高寬、hover效果 代碼:a{display:block} hover格式 a:hover{}查看全部
-
text-indent:向中縮進(jìn)文本位置,不改變整li的大小。 將行內(nèi)元素a轉(zhuǎn)換為塊級(jí)元素便于設(shè)置高寬,減少代碼查看全部
-
用無序列表構(gòu)建菜單<ul> <li><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> ...... </ul>查看全部
-
height與line-height設(shè)置成一樣,文字就會(huì)垂直居中;其實(shí)不是行高line-height與文字高h(yuǎn)eight一樣就能讓文字居中,而是應(yīng)該這樣理解,字符本來就在行高內(nèi)垂直居中了,只是行高與文字的盒子高度不等,導(dǎo)致不能在盒子里垂直居中,如果我們把行高line-height與盒子的height設(shè)置為一樣大,意思就是行高的平行線與盒子的上下邊重合了,這時(shí)字符當(dāng)然仍是在行高內(nèi)垂直居中,但也順便在盒子內(nèi)垂直居中。查看全部
-
水平菜單;菜單<li>浮動(dòng)后,<li>脫離文檔流,導(dǎo)致<ul>將失去高度和寬度;如果需要對(duì)<ul>進(jìn)行整體背景設(shè)置,首先要給<ul>定義寬、高。查看全部
-
backgroud-position中的像素值x y,其參照原點(diǎn)是標(biāo)簽的左上角,x為正值向原點(diǎn)右移相應(yīng)像素單位,y為正值則向下移查看全部
-
利用js展開二級(jí)標(biāo)題查看全部
-
(一)offsetWidth總結(jié): 1.offsetWidth屬性可以返回對(duì)象的padding+border+width屬性值之和,style.width返回值就是定義的width屬性值。 2.offsetWidth屬性僅是可讀屬性,而style.width是可讀寫的。 3.offsetWidth屬性返回值是整數(shù),而style.width的返回值是字符串。 4.style.width僅能返回以style方式定義的內(nèi)部樣式表的width屬性值。 (二)CSS方式 a{transition:width 0.5 ease} a:hover{width:130px;}查看全部
-
text-indent 文字縮進(jìn)查看全部
-
無序列表小圓點(diǎn)去除:ul{list-style:none}查看全部
-
height與line-height設(shè)置成一樣,文字就會(huì)垂直居中查看全部
-
菜單<li>浮動(dòng)后,<li>脫離文檔流,導(dǎo)致<ul>將失去高度和寬度;如果需要對(duì)<ul>進(jìn)行整體背景設(shè)置,首先要給<ul>定義寬、高查看全部
-
text-indent 文字縮進(jìn)查看全部
-
<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> 作者: qq_lby_03422380 鏈接:http://idcbgp.cn/article/14877 來源:慕課網(wǎng)查看全部
舉報(bào)
0/150
提交
取消