亚洲成a×人片在线观看,一区二区三区在线观看亚洲电影,哈尔滨丰满老熟妇乱乱

首頁免費課導(dǎo)航條菜單的制作筆記

導(dǎo)航條菜單的制作

            
                江老實
            
            Web前端工程師
                    
                難度初級
            
                時長23分
            
                學(xué)習(xí)人數(shù)
            
綜合評分9.53
                            1004人評價
                        查看評價
                                9.8
                                內(nèi)容實用
                            
                                9.4
                                簡潔易懂
                            
                                9.4
                                邏輯清晰

最熱最新

慕用8339455

菜單<li>浮動后，<li>脫離文檔流，導(dǎo)致<ul>將失去高度和寬度；如果需要對<ul>進行整體背景設(shè)置，首先要給<ul>定義寬、高。

查看全部

0 采集收起來源：練習(xí)題
2020-07-21
qq_慕姐1447727 03:46

去除下劃線為

查看全部

0 采集收起來源：垂直菜單的制作
2020-06-29
十點碎覺

文字移動建議用text-indent（文本縮進），如果用padding-left會導(dǎo)致總寬度也發(fā)生改變
list-style:none;清除無序列表中的圓點
ext-indent 文本縮進
list-style：none；去掉圓點
text-decoration：none；去掉下劃線
<a>標(biāo)簽的設(shè)置關(guān)鍵是將標(biāo)簽設(shè)置為塊元素
display：block；轉(zhuǎn)化為塊元素，可以設(shè)置長寬屬性
a:hover{} 鼠標(biāo)放上去的隱藏效果

查看全部

0 采集收起來源：垂直菜單的制作
2020-04-03
慕標(biāo)7124478

導(dǎo)航菜單伸縮效果:高度增加margin-top:-10px;

查看全部

0 采集收起來源：伸縮菜單的制作——改變高度
2020-03-22
qiug

菜單<li>浮動后，<li>脫離文檔流，導(dǎo)致<ul>將失去高度和寬度；如果需要對<ul>進行整體背景設(shè)置，首先要給<ul>定義寬、高。

查看全部

0 采集收起來源：練習(xí)題
2019-12-09
幕布斯3023211
1. 去掉ul寬度
2. li設(shè)置為float
查看全部

0 采集收起來源：水平菜單的制作
2019-10-25
慕九州8525486

list-style:none;清除無序列表中的圓點

查看全部

1 采集收起來源：垂直菜單的制作
2019-10-17
和櫻

文字移動建議用text-indent（文本縮進），如果用padding-left會導(dǎo)致總寬度也發(fā)生改變

查看全部

1 采集收起來源：垂直菜單的制作
2019-10-11
和櫻
敲著敲著代碼會突然忘記為什么a要變成block，第一章的1-1說了，變成塊元素的話可以直接在a元素上定義width，height等等
以下是代碼部分解析
```
<!DOCTYPE?html?><html><head><meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/><title>導(dǎo)航菜單</title><style?type="text/css">*{margin:0;padding:0;text-size:14px}ul{????list-style-type:none;????border-bottom:5px?solid?#f60;????height:50px;/*ul的高度變成50px，默認(rèn)是0，效果相當(dāng)于把橙色那條線向下移了*/????padding-left:30px;/*整體往右*/}a{color:#333;text-decoration:none;}ul?li{????float:left;????margin-top:20px;/*將“首頁新聞快訊...”的字向下移*/}a{????display:block;????width:120px;????height:30px;????line-height:30px;????text-align:center;}a.on,?a:hover{????color:#fff;????background:#f60;????height:40px;/*先將框變大，但是它是向下增大的*/????margin-top:-10px;/*再將框上移*/????line-height:45px;/*最后將字進行稍微的移動。height=line-height:垂直居中，height>line-height:偏上，height<line-height:偏下*/}</style></head><body><ul>????<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></html>
```
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>導(dǎo)航菜單</title>
<style type="text/css">
*{margin:0;padding:0;text-size:14px}
ul{
? ? list-style-type:none;
? ? border-bottom:5px solid #f60;
? ? height:50px;/*ul的高度變成50px，默認(rèn)是0，效果相當(dāng)于把橙色那條線向下移了*/
? ? padding-left:30px;/*整體往右*/
}
a{color:#333;text-decoration:none;}
ul li{
? ? float:left;
? ? margin-top:20px;/*將“首頁新聞快訊...”的字向下移*/
}
a{
? ? display:block;
? ? width:120px;
? ? height:30px;
? ? line-height:30px;
? ? text-align:center;
}
a.on, a:hover{
? ? color:#fff;
? ? background:#f60;
? ? height:40px;/*先將框變大，但是它是向下增大的*/
? ? margin-top:-10px;/*再將框上移*/
? ? line-height:45px;/*最后將字進行稍微的移動。height=line-height:垂直居中，height>line-height:偏上，height<line-height:偏下*/
}

</style>
</head>
<body>
<ul>
? ? <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>
</html>
查看全部

0 采集收起來源：編程練習(xí)
2019-10-11
和櫻

background-position:0 -30px與0 30px效果一樣的原因是：背景圖像的設(shè)置默認(rèn)是左上角對齊，并且對圖像進行平鋪，所以對于height：60px 來說圖片y軸上+30和-30顯示的部分都是一樣的。
在.nav li a內(nèi)加上no-repeat，即（background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg)no-repeat;）那就會發(fā)現(xiàn)只有-30px可以，30px就沒背景了。

查看全部

0 采集收起來源：編程練習(xí)
2019-10-11
征服宇宙的大super 05:03
ext-indent 文本縮進
list-style：none；去掉圓點
text-decoration：none；去掉下劃線
<a>標(biāo)簽的設(shè)置關(guān)鍵是將標(biāo)簽設(shè)置為塊元素
display：block；轉(zhuǎn)化為塊元素，可以設(shè)置長寬屬性
a:hover{} 鼠標(biāo)放上去的隱藏效果
```
li{float:left;}
--浮動左對齊變成水平導(dǎo)航欄
--刪除掉之前的文本縮進?text-indent:10px;
```
圓角css代碼：border-radius:4px 4px 3px 3px
查看全部

1 采集收起來源：垂直菜單的制作
2019-08-28
慕沐457181

window.onload=function(){
? ? var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
? ? ? ? ? ? //鼠標(biāo)經(jīng)過一級菜單，二級菜單動畫下拉顯示出來
? ? ? ? var oSubNav = this.getElementsByTagName('ul')[0];
? ? ? ? clearInterval(oSubNav.time);
? ? ? ? if(oSubNav){
? ? ? ? ? ? oSubNav.time = setInterval(function(){
? ? ? ? ? ? ? ? ? ? oSubNav.style.height = oSubNav.offsetHeight + 20 + "px";
? ? ? ? ? ? ? ? ? ? if(oSubNav.offsetHeight >= 120){
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(oSubNav.time);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },30);
? ? ? ? }
}
? ? ? ? //鼠標(biāo)離開菜單，二級菜單動畫收縮起來。
? ? ? ? aLi[i].onmouseout = function(){
? ? ? ? ?var oSubNav = this.getElementsByTagName('ul')[0];
? ? ? ? ?clearInterval(oSubNav.time);
? ? ? ? ?if(oSubNav){
? ? ? ? ? ? oSubNav.time = setInterval(function(){
? ? ? ? ? ? ? ? ? ? oSubNav.style.height = oSubNav.offsetHeight - 20 + "px";
? ? ? ? ? ? ? ? ? ? if(oSubNav.offsetHeight == 0){
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(oSubNav.time);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },30);
? ? ? ? }
}

}
}

查看全部

1 采集收起來源：編程挑戰(zhàn)
2019-08-19
膨脹的西紅柿

解析：菜單<li>浮動后，<li>脫離文檔流，導(dǎo)致<ul>將失去高度和寬度；如果需要對<ul>進行整體背景設(shè)置，首先要給<ul>定義寬、高。

查看全部

0 采集收起來源：練習(xí)題
2019-08-17
緣來 05:06

<a>標(biāo)簽原本是行內(nèi)元素，可以設(shè)置text-align，但是不能設(shè)置寬度和高度，當(dāng)<a>標(biāo)簽設(shè)置為塊級元素，會同時具有行內(nèi)元素和塊級元素的特征，即可設(shè)置text-align，又能設(shè)置寬高。

查看全部

0 采集收起來源：垂直菜單的制作
2019-06-25
Dreamway 01:07

為什么加了line-height可以垂直居中呢？

查看全部

0 采集收起來源：伸縮菜單的制作——水平方向
2019-06-24
waitseen

<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)過一級菜單，二級菜單動畫下拉顯示出來
var aUl = this.getElementsByTagName("ul")[0]; //注意this.getElementsByTagName要用this，this指aLi標(biāo)簽
if (aUl) {
var This = aUl;
clearInterval(This.time);
This.time = setInterval(function() {
This.style.height = This.offsetHeight + 16 + "px";
if (This.offsetHeight >= 120) {
console.log("aaaaaaaaaa");
clearInterval(This.time);
}
}, 30);
}
};
//鼠標(biāo)離開菜單，二級菜單動畫收縮起來。
aLi[i].onmouseout = function() {
var aUl = this.getElementsByTagName("ul")[0];
if (aUl) {
var This = aUl;
clearInterval(This.time);
This.time = setInterval(function() {
This.style.height = This.offsetHeight - 16 + "px";
if (This.offsetHeight <=0) {
console.log("bbbbbbb");
clearInterval(This.time);
}
}, 30);
}
};
}
};
</script>

查看全部

0 采集收起來源：編程挑戰(zhàn)
2019-06-21
weibo_莫寧愿_0

<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)過一級菜單，二級菜單動畫下拉顯示出來
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)離開菜單，二級菜單動畫收縮起來。
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>

查看全部

0 采集收起來源：編程挑戰(zhàn)
2019-06-12
weibo_莫寧愿_0

改變a標(biāo)簽的高度height:40px，這樣是向下增加的，再設(shè)置margin-top為負(fù)值，向反方向移動margin-top:-10px，但文字也向上移動，可設(shè)置a標(biāo)簽line-height:40px

查看全部

0 采集收起來源：伸縮菜單的制作——改變高度
2019-06-12
weibo_莫寧愿_0

圓角css代碼：border-radius:4px 4px 3px 3px

查看全部

0 采集收起來源：圓角菜單的制作
2019-06-12
weibo_莫寧愿_0

ext-indent 文本縮進
list-style：none；去掉圓點
text-decoration：none；去掉下劃線
<a>標(biāo)簽的設(shè)置關(guān)鍵是將標(biāo)簽設(shè)置為塊元素
display：block；轉(zhuǎn)化為塊元素，可以設(shè)置長寬屬性
a:hover{} 鼠標(biāo)放上去的隱藏效果

查看全部

0 采集收起來源：垂直菜單的制作
2019-06-12
qq_慕的地7443362 00:50

非法違規(guī)發(fā)放噶

查看全部

0 采集收起來源：垂直菜單的制作
2019-05-08
panpanPandas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>導(dǎo)航菜單</title>
<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:inline-block;?
? ? text-indent: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>

</body>
</html>

查看全部

0 采集收起來源：編程練習(xí)
2019-05-07
你是漂亮的天藍(lán)色

若使第一個菜單和當(dāng)鼠標(biāo)移動到菜單上顯示的效果相同，可以給鏈接<a>設(shè)置一個class="on"，然后對a.on和a:hover同時設(shè)置樣式
想讓鼠標(biāo)移到菜單上時，菜單高度增加，就需要在a:hover里設(shè)置高度height:40px;?
再設(shè)置margin-top:-10px;若不設(shè)置這一句，它的高度是向下增加的

查看全部

0 采集收起來源：編程練習(xí)
2019-04-19
你是漂亮的天藍(lán)色

菜單<li>浮動以后，<li>脫離文檔流，導(dǎo)致<ul>將失去高度和寬度；如果需要對<ul>進行整體背景設(shè)置，首先要給<ul>定義寬、高。

查看全部

0 采集收起來源：練習(xí)題
2019-04-19
你是漂亮的天藍(lán)色

創(chuàng)建水平導(dǎo)航欄或菜單
在垂直菜單的基礎(chǔ)上，對<li>設(shè)置樣式：float:left;
對<ul>將其寬度值設(shè)置去掉,不過好像不去掉也沒影響

查看全部

0 采集收起來源：編程練習(xí)
2019-04-19