域名注冊(cè) 網(wǎng)站制作
您現(xiàn)在的位置:首頁 >> 網(wǎng)站建設(shè) >> 內(nèi)容

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

時(shí)間:2014/11/18 15:15:21 點(diǎn)擊:350

摘要:十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單,包含以下內(nèi)容和知識(shí)點(diǎn):一、縱向列表 二、標(biāo)簽的默認(rèn)樣式 三、css派生選擇器 四、css選擇器的分組 五、縱向二級(jí)列表 六、相對(duì)定位和...

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+CSS 縱向?qū)Ш讲藛渭岸?jí)彈出菜單,包含以下內(nèi)容和知識(shí)點(diǎn):

一、縱向列表
二、標(biāo)簽的默認(rèn)樣式
三、css派生選擇器
四、css選擇器的分組
五、縱向二級(jí)列表
六、相對(duì)定位和絕對(duì)定位

一、縱向列表

縱向列表或稱為縱向?qū)Ш,?a href="http://m.onedealspecials.com/tags-100.html" target="_blank">網(wǎng)站的產(chǎn)品列表中應(yīng)用比較廣泛,如淘寶網(wǎng)左側(cè)的淘寶服務(wù),今天我們就學(xué)習(xí)一下縱向?qū)Ш降闹谱?

先新建一個(gè)頁面,然后插入一個(gè)ID為menu的div,然后在設(shè)計(jì)視圖中選中文字,點(diǎn)擊工具欄的ul圖標(biāo),即會(huì)自動(dòng)插入ul和li,然后修改文字內(nèi)容為你需要的內(nèi)容。

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

<div id="menu">

<ul>

<li>首頁</li>

<li>網(wǎng)頁版式布局</li>

<li>div+css教程</li>

<li>div+css實(shí)例</li>

<li>常用代碼</li>

<li>站長雜談</li>

<li>技術(shù)文檔</li>

<li>資源下載</li>

<li>圖片素材</li>

</ul>

</div>

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

從預(yù)覽的效果上看,四周都有很大的空隙,而且每一行前邊還有個(gè)點(diǎn),這是因?yàn)闃?biāo)簽的默認(rèn)樣式造成的,下面我們需要?jiǎng)?chuàng)建樣式表把標(biāo)簽的默認(rèn)樣式給清除掉

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

生成的css代碼如下:

<style type="text/css">

#menu ul { list-style: none; margin: 0px; padding: 0px; }

</style>

下面我們定義一下全局的字體,字號(hào),行距等,點(diǎn)擊css樣式面板上的新建按鈕,在彈出的窗口中選擇器類型選擇標(biāo)簽,名稱選擇body,然后在css編輯器中設(shè)置如下圖所示屬性

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

body全局樣式定義后,下面我們給#menu定義一個(gè)灰色的1px邊框及寬度,然后把li定義下背景色和下邊框及內(nèi)邊距等

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
接下來定義li的背景色為淺灰色及下邊框和內(nèi)邊距

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

這些屬性設(shè)置完后,一個(gè)簡單的縱向列表菜單初具模型了。因?yàn)閷?dǎo)航菜單,需要鏈接到其它頁面,下邊把這些導(dǎo)航加上鏈接,然后在定義a的狀態(tài)和鼠標(biāo)劃過狀態(tài)。

要添加鏈接,先選擇要添加鏈接的文字,然后在屬性頁面鏈接上輸入要鏈接的頁面址,我這里輸入個(gè)#,是個(gè)虛擬鏈接,不指向任何頁面。

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
創(chuàng)建a的樣式后,下面我們?cè)黾觽(gè)交互效果,當(dāng)鼠標(biāo)劃過鏈接文字時(shí),讓文字顏色變成紅色,這時(shí)就需要用到a:hover這個(gè)偽類了

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

這里的a:hover屬于偽類,在下一章節(jié)時(shí)會(huì)詳細(xì)講解

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

源代碼如下:

<!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=gb2312" />

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width: 100px; border: 1px solid #CCC; }

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="@#">首頁</a></li>

<li><a href="#">網(wǎng)頁版式布局</a></li>

<li><a href="#">div+css教程</a></li>

<li><a href="#">div+css實(shí)例</a></li>

<li><a href="#">常用代碼</a></li>

<li><a href="#">站長雜談</a></li>

<li><a href="#">技術(shù)文檔</a></li>

<li><a href="#">資源下載</a></li>

<li><a href="#">圖片素材</a></li>

</ul>

</div>

</body>

</html>

二、標(biāo)簽的默認(rèn)樣式

大多數(shù)標(biāo)簽都有自己的默認(rèn)樣式,比如第二天課程中遇到的body默認(rèn)外邊距,另外本例中ul前的圓點(diǎn)及左側(cè)的內(nèi)邊距,另h1-h6字體大小各不相同,em默認(rèn)為斜體,strong表示粗體。正因?yàn)橛羞@些默認(rèn)樣式,一個(gè)設(shè)計(jì)合理的頁面,即使沒有加載樣式,也能讓用戶很容易閱讀。但此時(shí)這些默認(rèn)樣式對(duì)我們沒用,所以需要清除掉,為了方便,建議用標(biāo)簽重定義方式,這樣可以很簡單地把全局的樣式給統(tǒng)一起來。另外頁面中的圖片添加鏈接后會(huì)默認(rèn)添加個(gè)邊框,ul默認(rèn)情況下會(huì)在列表前添加圓點(diǎn),這些都是需要去掉的。

body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }

ul { list-style: none; }

img { border-style: none; }

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

這里選擇器類型選擇復(fù)合內(nèi)容,我用的是dw最新cs5版本,比之前章節(jié)用的cs3版本中更合理了,把ID和偽類分開了。然后在選擇器名稱中輸入我們常用的帶默認(rèn)樣式的標(biāo)簽,中間以英文逗號(hào)分隔

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

下面對(duì)img標(biāo)簽進(jìn)行重定義,清除圖片有鏈接時(shí)默認(rèn)的邊框

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

下邊設(shè)置全局ul標(biāo)簽?zāi)J(rèn)的圓點(diǎn)為無

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

這樣就很簡單把常用標(biāo)簽的默認(rèn)樣式給清除掉了,如果需要邊距的話再重新定義,也避免了各個(gè)瀏覽器對(duì)標(biāo)簽?zāi)J(rèn)樣式解析差異造成頁面顯示不一樣的問題。

三、css派生選擇器

CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。派生選擇器可以幫助你節(jié)約大量的class定義。我上邊的例子中應(yīng)用了些派生選擇器如下的css代碼

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

#menu ul和#menu ul li即為派生選擇器,如果我們把前邊的#menu去掉,那么將是對(duì)ul標(biāo)簽重定義,重定義的屬性將應(yīng)用到全局,而前邊加上#menu后,將是定義ID為menu元素內(nèi)ul的樣式,設(shè)置它的樣式只對(duì)#menu下的ul生效,不對(duì)它之后的ul生效,這個(gè)有點(diǎn)像編程中的局部變量,而直接定義ul則相當(dāng)于全局變量。#menu ul li 是定義ID為menu元素內(nèi)ul下的li,派生選擇器可以使我們不用再給每個(gè)li定義一個(gè)樣式名來定義樣式,只需使用派生選擇器,從它的父元素處選擇即可,這樣能大大提高效率。

四、css選擇器的分組

你可以對(duì)選擇器進(jìn)行分組,這樣,被分組的選擇器就可以分享相同的聲明。用逗號(hào)將需要分組的選擇器分開。在下面的例子中,我們對(duì)所有的標(biāo)題元素進(jìn)行了分組。所有的標(biāo)題元素都是綠色的,p段落、div分區(qū)、span都是20像素字體。

h1,h2,h3,h4,h5,h6 {

color: green;

}

p,div,span{

font-size:20px;

}

五、縱向二級(jí)列表

二級(jí)菜單即指當(dāng)鼠標(biāo)放到一級(jí)菜單上后,會(huì)彈出相應(yīng)的二級(jí)菜單,移去鼠標(biāo)后自動(dòng)消失,我們接著上邊的例子進(jìn)行修改,代碼如下:

<div id="menu">

<ul>

<li><a href="@#">首頁</a></li>

<li><a href="#">網(wǎng)頁版式布局</a>

<ul>

<li><a href="#">自適應(yīng)寬度</a></li>

<li><a href="#">固定寬度</a></li>

</ul>

</li>

<li><a href="#">div+css教程</a>

<ul>

<li><a href="#">新手入門</a></li>

<li><a href="#">視頻教程</a></li>

<li><a href="#">常見問題</a></li>

</ul>

</li>

<li><a href="#">div+css實(shí)例</a></li>

<li><a href="#">常用代碼</a></li>

<li><a href="#">站長雜談</a></li>

<li><a href="#">技術(shù)文檔</a></li>

<li><a href="#">資源下載</a></li>

<li><a href="#">圖片素材</a></li>

</ul>

</div>

接下來修改css樣式表,先修改#menu ul li,給其增加一個(gè) position:relative;屬性

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

然后定義ID為menu下ul下里內(nèi)的ul樣式如下:

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
定義display:none后,默認(rèn)狀態(tài)下將隱藏

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

定義#menu ul li ul的position: absolute; left: 100px; top: 0px;,那么它將以相對(duì)于它父元素li的上為0,左為100的位置顯示。最后我們?cè)O(shè)置當(dāng)鼠標(biāo)劃過后顯示下級(jí)菜單的樣式

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單

#menu ul li:hover ul這個(gè)樣式比較難理解,它的意思是定義ID為menu下ul下li,當(dāng)鼠標(biāo)劃過時(shí)ul的樣式,這里設(shè)置為display:block,指的是鼠標(biāo)劃過時(shí)顯示這塊內(nèi)容,這也實(shí)現(xiàn)我們今天想要的效果。其中的:hover和前邊說的鏈接一樣,同屬于偽類,但有一點(diǎn)注意,目前IE6只支持a的偽類,其它標(biāo)簽的偽類不支持,所以要想在IE6下也顯示正確,需要借助js來實(shí)現(xiàn),我們定義一個(gè)類.current (自己命名,需和JS中相同)的屬性為display:block;然后當(dāng)鼠標(biāo)劃過后,用JS給當(dāng)前l(fā)i添加上這個(gè)樣式上,根據(jù)css的優(yōu)先級(jí):指定的高于繼承的原則,就實(shí)現(xiàn)了IE6下的正確顯示。所以需要加上JS和樣式#menu ul li.current ul { display:block;}。

#menu ul li.current ul { display:block;}

<!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=gb2312" />

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("menu");

var allli = navRoot.getElementsByTagName("li")

for (i=0; i<allli.length; i++) {

node = allli[i];

node.onmouseover=function() {

this.className+=" current";

}

node.onmouseout=function() {

this.className=this.className.replace(" current", "");

}

}

}

}

window.onload=startList;

//--><!]]></script>

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

img { border-style: none; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }

#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }

#menu ul li.current ul { display:block;}

#menu ul li:hover ul { display:block;}

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#">首頁</a></li>

<li><a href="#">網(wǎng)頁版式布局</a>

<ul>

<li><a href="#">自適應(yīng)寬度</a></li>

<li><a href="#">固定寬度</a></li>

</ul>

</li>

<li><a href="#">div+css教程</a>

<ul>

<li><a href="#">新手入門</a></li>

<li><a href="#">視頻教程</a></li>

<li><a href="#">常見問題</a></li>

</ul>

</li>

<li><a href="#">div+css實(shí)例</a></li>

<li><a href="#">常用代碼</a></li>

<li><a href="#">站長雜談</a></li>

<li><a href="#">技術(shù)文檔</a></li>

<li><a href="#">資源下載</a></li>

<li><a href="#">圖片素材</a></li>

</ul>

</div>

</body>

</html>

最終顯示效果如下:

十天學(xué)會(huì)web標(biāo)準(zhǔn)div+css 縱向?qū)Ш讲藛渭岸?jí)彈出菜單
上節(jié)課講解塊級(jí)元素和內(nèi)聯(lián)元素時(shí)提到display,今天用到了display:block;和display:none;值為none時(shí)表示將這個(gè)元素隱藏,為block時(shí)表示將它的隱藏狀態(tài)改為顯示狀態(tài)詳細(xì)介紹請(qǐng)參考css手冊(cè)

六、相對(duì)定位和絕對(duì)定位

§ 定位標(biāo)簽:position

§ 包含屬性:relative(相對(duì)) absolute(絕對(duì))

1.position:relative; 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位,首先它將出現(xiàn)在它所在的位置上。然后通過設(shè)置垂直或水平位置,讓這個(gè)元素"相對(duì)于"它的原始起點(diǎn)進(jìn)行移動(dòng)。(再一點(diǎn),相對(duì)定位時(shí),無論是否進(jìn)行移動(dòng),元素仍然占據(jù)原來的空間。因此,移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框)

2.position:absolute; 表示絕對(duì)定位,位置將依據(jù)瀏覽器左上角開始計(jì)算。 絕對(duì)定位使元素脫離文檔流,因此不占據(jù)空間。普通文檔流中元素的布局就像絕對(duì)定位的元素不存在時(shí)一樣。(因?yàn)榻^對(duì)定位的框與文檔流無關(guān),所以它們可以覆蓋頁面上的其他元素并可以通過z-index來控制它層級(jí)次序。z-index的值越高,它顯示的越在上層。)

3.父容器使用相對(duì)定位,子元素使用絕對(duì)定位后,這樣子元素的位置不再相對(duì)于瀏覽器左上角,而是相對(duì)于父窗口左上角

4.相對(duì)定位和絕對(duì)定位需要配合top、right、bottom、left使用來定位具體位置,這四個(gè)屬性只有在該元素使用定位后才生效,其它情況下無效。另外這四個(gè)屬性同時(shí)只能使用相鄰的兩個(gè),不能即使用上又使用下,或即使用左,又使用右

文章出處:標(biāo)準(zhǔn)之路 編輯:楊雨晨思

轉(zhuǎn)載請(qǐng)保留原文地址: http://m.onedealspecials.com/show-340.html

責(zé)編:王麗 作者:不詳 來源:網(wǎng)絡(luò)