我要色综合色综合久久,久久国产Av无码一区二区老太,一个人看的www视频免费

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

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

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

最熱最新

qq_花草組合_0
```
一個圓角背景的導(dǎo)航欄菜單制作
```
查看全部

0 采集收起來源：圓角菜單的制作
2018-11-30
Ap10043知行合一

不懂·····

查看全部

1 采集收起來源：圓角菜單的制作
2018-11-07
慕妹7474039

制作伸縮菜單——改變高度
在鼠標懸停與點擊時設(shè)定，margin-top: -10px;? line-height: 10px; 可以使菜單（包括文字）向上變高10px。

查看全部

0 采集收起來源：伸縮菜單的制作——改變高度
2018-10-31
慕妹7474039

背景圖片沿y軸向上移動30px（水平方向不動）

background-position:0 -30px

查看全部

0 采集收起來源：編程練習(xí)
2018-10-31
慕妹7474039

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

查看全部

0 采集收起來源：練習(xí)題
2018-10-31
慕妹7474039

將垂直導(dǎo)航條菜單改為水平時，用float:left;
并且刪去?文本縮進，使用text-align:center?使文字相對于父容器li居中顯示。

查看全部

0 采集收起來源：編程練習(xí)
2018-10-31
慕妹7474039

? ? ? 通常用?無序列表<ul><li><a href="#"></a></li></ul>來制作（表單）導(dǎo)航條，將a設(shè)置成塊級元素display:block;就可以設(shè)置寬度、高度和其他了。
? ? ? 要想導(dǎo)航條里的文字（鏈接）居中顯示，一般不用padding-left: 10px;這樣設(shè)置會自動增加了盒子寬度；而是使用?文字縮進 text-indent:10px;

查看全部

0 采集收起來源：編程練習(xí)
2018-10-31
慕斯1123771

background-position
背景位置

查看全部

0 采集收起來源：編程練習(xí)
2018-10-17
MuAmi

css實現(xiàn)多好，現(xiàn)在又不是講js的課
<!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;}
a{color:#333;text-decoration:none}
.nav li{ float:left;}
.nav li a{ display:block; text-align: center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-bottom:1px;transition: width 1s;}
.nav li a:hover{ background-color:#F60; color:#fff;width: 140px;transition: width 1s;}
</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 采集收起來源：伸縮菜單的制作——水平方向
2018-09-28
慕移動0269542

記住第五節(jié)，用的是js

查看全部

0 采集收起來源：伸縮菜單的制作——水平方向
2018-09-21
大衛(wèi)同學(xué)

<!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>動畫菜單</title>
<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
a { color: #333; text-decoration: none }
ul{ list-style: none; }
.nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;}
.nav li { float: left; position:relative; height:30px; width:120px }
.nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; }
.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}
.subNav li a{ background:#ddd }
.subNav li a:hover{ background:#efefef}
</style>
<script>
window.onload=function(){
? ? var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover=function(){
? ? ? ? ? ? //鼠標經(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)

}}

? ? ? ? //鼠標離開菜單，二級菜單動畫收縮起來。

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>

</script>
</head>
<body>
<ul class="nav">
? ? <li><a href="#">一級菜單</a>
? ? <ul class="subNav">
? ? ? ? <li><a href="#">二級菜單</a></li>
? ? ? ? ? ? <li><a href="#">二級菜單</a></li>
? ? ? ? ? ? <li><a href="#">二級菜單</a></li>
? ? ? ? ? ? <li><a href="#">二級菜單</a></li>
? ? ? ? </ul>
? ? </li>
? ? <li><a href="#">一級菜單</a>
? ? <ul class="subNav">
? ? ? ? <li><a href="#">二級菜單</a></li>
? ? ? ? ? ? <li><a href="#">二級菜單</a></li>
? ? ? ? ? ? <li><a href="#">二級菜單</a></li>
? ? ? ? ? ? <li><a href="#">二級菜單</a></li>
? ? ? ? </ul>
? ? </li>
? ? <li><a href="#">一級菜單</a></li>
? ? <li><a href="#">一級菜單</a></li>
? ? <li><a href="#">一級菜單</a></li>
</ul>
</body>
</html>

查看全部

0 采集收起來源：編程挑戰(zhàn)
2018-09-19
大衛(wèi)同學(xué)

<!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;}
a{color:#333;text-decoration:none}
ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;}
ul li{float:left; margin-top:20px;}
a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}
a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px;? margin-top:-10px;}
</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í)
2018-09-19
大衛(wèi)同學(xué)

<!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;}
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{ background-position:0 -30px; color:#fff;}
</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>
</html>

查看全部

0 采集收起來源：編程練習(xí)
2018-09-18
大衛(wèi)同學(xué)

<!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;}
a{color:#333;text-decoration:none}
.nav li{ float:left;}
.nav li a{ display:block; text-align:center; 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í)
2018-09-18
Honey汐瑤

background-position 用法: 1、background-position：0 0；等于background-position:left top；（左上角） 2、background-position：100% 100%；等于background-position:right bottom；（右下角） 3、background-position：-70px -40px；(以左上角為0 0點坐標，向左偏移70px,向上偏移40px) 4、background-position：70px 40px；(以左上角為0 0點坐標，向右偏移70px,向下偏移40px) 5、background-position：0 -30px;（以左上角為0 0點坐標，水平方向不動,向上偏移30px） 6、background-position：50% 50%；等于background-position：center center；（居中顯示）

查看全部

1 采集收起來源：編程練習(xí)
2018-09-12