詳解一級導(dǎo)航的制作
發(fā)布時(shí)間：2017-01-10 14:23:32 作者：Samcc 
我要評論
我要評論本文主要分享了簡單導(dǎo)航欄的制作方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
今天分享一下簡單導(dǎo)航欄的制作方法：
第一步：引入css樣式表，新建一個(gè)id為nav的層，使用<ul>、<li>、<a>標(biāo)簽來制作完成效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/yiji.css"/>
</head>
<body>
<div id="nav">
<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>
</div>
</body>
</html>
第二步設(shè)置CSS樣式：
1.設(shè)置nav的屬性
#nav{
width: 500px;
height: 50px;
border: 1px solid red;
}
展示效果如下所示：
2.清除<ul>標(biāo)簽前面自帶的點(diǎn)
#nav ul{
list-style: none;
}
3.設(shè)置<ul>下包含的<a>標(biāo)簽的屬性
#nav ul li a{
width: 98px;
height: 50px;
float: left;
border: 1px solid red;
text-align: center;
line-height: 50px;
text-decoration: none;
}
4.設(shè)置鼠標(biāo)滑過效果
#nav ul li a:hover{
background-color: #ABCDEF;
}
最終效果：
完整HTML代碼部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/yiji.css"/>
</head>
<body>
<div id="nav">
<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>
</div>
</body>
</html>
完成CSS樣式代碼部分：
*{
margin: 0;
padding: 0;
}
#nav{
width: 500px;
height: 50px;
border: 1px solid red;
margin: 30px;
}
#nav ul{
list-style: none;
}
#nav ul li a{
width: 98px;
height: 50px;
float: left;
border: 1px solid red;
text-align: center;
line-height: 50px;
text-decoration: none;
}
#nav ul li a:hover{
background-color: #ABCDEF;
}
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
- 這篇文章主要為大家詳細(xì)介紹了css制作黑色經(jīng)典導(dǎo)航下拉菜單的相關(guān)代碼，大氣簡單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-15
- 這篇文章主要介紹了基于CSS制作天藍(lán)色導(dǎo)航菜單 ，效果非常清新，時(shí)尚大方，為網(wǎng)站增添亮點(diǎn)，感興趣的小伙伴們可以參考一下2016-03-08
- 本篇文章給大家分享基于html和CSS3制作簡單側(cè)邊導(dǎo)航欄，效果簡單大方，需要的朋友可以從參考下2016-02-25
- 這篇文章主要介紹了基于CSS3制作立體效果導(dǎo)航菜單的相關(guān)資料,需要的朋友可以參考下2016-01-12
本篇文章給大家分享基于html和CSS3制作酷炫的導(dǎo)航欄，效果非常美觀，需要的朋友可以從參考下2015-09-23基于css3的屬性transition制作菜單導(dǎo)航效果
這篇文章主要為大家介紹了基于css3的屬性transition制作菜單導(dǎo)航效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)動態(tài)改變背景滑塊的功能,基于css3的屬性transition實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的2015-09-01- 這篇文章主要介紹了使用CSS3制作響應(yīng)式導(dǎo)航菜單的方法,這種菜單在移動端的網(wǎng)頁制作中也經(jīng)常能夠用到,需要的朋友可以參考下2015-07-12
- 本文介紹了使用css3制作動感導(dǎo)航條示例，純CSS沒有使用JS，沒有圖片的導(dǎo)航條。用到了CSS3的Transition、box-shadow、linear-gradient2014-01-26
純CSS3制作的鼠標(biāo)懸停動態(tài)導(dǎo)航菜單效果(無js)
無需任何JS代碼即可實(shí)現(xiàn)菜單項(xiàng)的鼠標(biāo)懸停動態(tài)效果，高貴典雅，不可多得2013-07-17
CSS3+jQuery制作的鼠標(biāo)滑過帶有動態(tài)效果的一級導(dǎo)航菜單
雖然只是一個(gè)一級導(dǎo)航菜單，但是可以通過JS代碼控制鼠標(biāo)滑過菜單時(shí)的動態(tài)展示效果2013-06-24
