使用CSS做出一個(gè)嵌套導(dǎo)航.
我要評(píng)論使用CSS可以創(chuàng)建一個(gè)更有吸引力的導(dǎo)航,因?yàn)镃SS沒有和文本混合在一起,所以確保了導(dǎo)航的可訪問性和使那些手持設(shè)備也可以讀出.在這個(gè)教程里我們將看到一個(gè)基于CSS的導(dǎo)航.基于CSS的網(wǎng)站會(huì)加快網(wǎng)頁加載的時(shí)間,這樣基于圖像的導(dǎo)航將漸漸的被淘汰掉.
導(dǎo)航的結(jié)構(gòu)
先看效果圖:
導(dǎo)航的本質(zhì)是讓瀏覽者更好的訪問你的網(wǎng)站,所以要建立有意義的語義.使CSS和語義相符合,為了以后方便維護(hù).注意要避免現(xiàn)有瀏覽器的不兼容.
解決方案
下面是導(dǎo)航的HTML和CSS的代碼,效果如圖.
這是創(chuàng)建導(dǎo)航的HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav1.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
使用CSS給上面代碼添加效果
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
分析:
先創(chuàng)建一個(gè)無序列表的導(dǎo)航條,并做好導(dǎo)航鏈接.
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
然后用一個(gè)div把這個(gè)無序列表包含起來.
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
在瀏覽器中顯示默認(rèn)的樣式.
接下來我們要做的第一件事是給這個(gè)div定義寬度.
===================
#navigation {
width: 200px;
}
=====================
給列表添加樣式,去掉默認(rèn)的圓點(diǎn)和清除填充.
========================
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
========================
在瀏覽器中顯示:
給li標(biāo)簽添加一個(gè)下劃線
==========================
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
==============================
給鏈接添加樣式:
===============================
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
=============================
在上面可以看到這個(gè)CSS是添加了左右邊框,并且使對(duì)象塊狀,這樣做的效果使鏈接看起來像一個(gè)按扭.這種效果看起來像是給導(dǎo)航添加一個(gè)圖片似的.
使用CSS創(chuàng)建一個(gè)沒有圖像和javascript的導(dǎo)航.
導(dǎo)航功能常常具有翻轉(zhuǎn)的效果:比如說一個(gè)瀏覽者把鼠標(biāo)放在按扭上,按扭就會(huì)顯示出另一張圖片,來突出效果.要實(shí)現(xiàn)這個(gè)效果,則要兩張圖像和javascript.
解決方案:
使用CSS來創(chuàng)建上面的那個(gè)效果比用圖像來創(chuàng)建要簡單的多.在CSS要現(xiàn)實(shí)翻轉(zhuǎn)這個(gè)效果用到 hover偽類選擇器.
我們給上面的事例加個(gè)翻轉(zhuǎn)的效果:
=============================
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
=============================
效果如圖:
我們可以看到使用CSS來實(shí)現(xiàn)這個(gè)效果是非常簡單的.在這個(gè)例子里我只是改下翻轉(zhuǎn)的背景的顏色.你可以在翻轉(zhuǎn)時(shí)改變邊框,和文字的顏色.
在現(xiàn)代的瀏覽器中,比如說IE7,你可以給任何對(duì)象添加:hover偽類選擇器.但是在IE6以下版本卻不能這樣使用.
在老式的版本中只充許錨文本可以點(diǎn)擊,因此用戶只能點(diǎn)擊到文字,而不是背景.
我們?nèi)绾谓鉀Q這個(gè)問題,這里有一個(gè)黑客的方法:擴(kuò)大鏈接的寬度.
===============
* html #navigation li a {
width: 100%;
}
=============================
如何使用CSS創(chuàng)建一個(gè)副導(dǎo)航
到目前為止例子所建的是一個(gè)水平的導(dǎo)航,但有時(shí)我們需要在水平下添加一個(gè)副導(dǎo)航.我們給例子再增加嵌套并添加其CSS樣式.
============================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_sub.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
============================
效果如圖:
分析:
嵌套列表是一個(gè)很好的方式來描述導(dǎo)航系統(tǒng).在這個(gè)例子我們用了第一個(gè)列表來表示主菜單,而子菜單則包含在主菜單的下面.這樣如沒有CSS樣式,結(jié)構(gòu)也是非常的清晰.
在主菜單<li>對(duì)象包含一個(gè)列表:
============================
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
===========================
在html中如果沒有添加CSS的話,那么嵌套列表將繼續(xù)主菜單的CSS樣式,靠左邊浮動(dòng),所以要添加個(gè)空白,與主菜單有一定的距離.
=========================
#navigation ul ul {
margin-left: 12px;
}
=======================
接下來我們?cè)俳o嵌套里的<li><a>對(duì)象添加樣式.
========================
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin: 0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
相關(guān)文章
CSS實(shí)現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果
這篇文章主要介紹了CSS實(shí)現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨2020-02-05純css多種方法實(shí)現(xiàn)div中單行文字、多行文字及嵌套div垂直水平居中
經(jīng)常遇到要居中的問題，水平居中問題比較好解決，而垂直居中問題因?yàn)関ertical-align經(jīng)常失效，下面與大家分享下幾個(gè)不錯(cuò)的解決方法2014-04-24LESS 讓css也支持變量，運(yùn)算符，include,嵌套規(guī)則等等
最近在網(wǎng)上看到1個(gè)很有意思的CSS擴(kuò)展，這里介紹給大家。LESS 最早是1個(gè)ruby的gem，用于擴(kuò)展css的語法，用了LESS后，可以在css中使用變量，運(yùn)算符，include,嵌套規(guī)則等等。2010-07-04- 網(wǎng)頁制作Webjx文章簡介：簡單學(xué)習(xí)css組合與CSS嵌套的寫法. CSS組合 你不必重復(fù)有相同屬性的多個(gè)選擇符，你只要用英文逗號(hào)（,）隔開選擇符就可以了2009-04-02
CSS 即將支持嵌套,SASS/LESS 等預(yù)處理器該何去何從
隨著 CSS 自定義屬性（CSS Variable）的大規(guī)模兼容，到如今 CSS 即將支持嵌套，一些預(yù)處理器的核心功能已經(jīng)被 CSS 原生支持，這是否表示 SASS/LESS 等預(yù)處理器已無用武之地2021-08-10
