網(wǎng)頁(yè)設(shè)計(jì)中導(dǎo)航欄列表的基本設(shè)計(jì)

前面幾章我們介紹了一下布局的基本代碼，今天創(chuàng)新互聯(lián)來(lái)看看網(wǎng)站設(shè)計(jì)步驟中列表的基本設(shè)計(jì)。列表的應(yīng)用是很廣泛的，可以說(shuō)大多數(shù)的網(wǎng)站中都有列表，只是表達(dá)的方式有些不一樣。
最常用的一種列表的表達(dá)方式就是導(dǎo)航，可以說(shuō)每個(gè)網(wǎng)站中都是具有導(dǎo)航的，而且一個(gè)好的導(dǎo)航列表可以給網(wǎng)站增添不少的色彩。
現(xiàn)在創(chuàng)新互聯(lián)就來(lái)看看一個(gè)簡(jiǎn)單的列表是如何產(chǎn)生的吧，首先先新建一個(gè)頁(yè)面，然后插入一個(gè)ID為menu的div，然后在設(shè)計(jì)視圖中選中文字，點(diǎn)擊工具欄的ul圖標(biāo)，也即是會(huì)自動(dòng)插入ul和li，然后修改文字內(nèi)容為你需要的內(nèi)容。做好這些以后，你在瀏覽器中會(huì)發(fā)現(xiàn)在內(nèi)容的周圍的空隙會(huì)很大，而且每一行的前端都是由一個(gè)點(diǎn)，這就是標(biāo)簽的默認(rèn)樣式造成的。
顯然這樣的效果我們是很不滿意的，那么我就需要調(diào)整它的效果。首先要在視圖中，選中我們要編輯的內(nèi)容，在點(diǎn)擊下端的ul新建CSS的規(guī)則，在其中就可以定義一下我們創(chuàng)建的列表的方框與列表屬性。接下來(lái)就要調(diào)整一下列表的全局，也就是文字設(shè)計(jì)、字體大小，間距等。在CSS樣式面板中點(diǎn)擊新建，在彈出的窗口中選擇標(biāo)簽，名稱選擇body，在這里就可以調(diào)整內(nèi)容的樣式了。如果想要調(diào)整列表的邊框及背景，那么給li定義一下CSS規(guī)則就可以了，做法同上。
接下來(lái)就是把這個(gè)列表中的內(nèi)容，加上鏈接。這個(gè)就不多說(shuō)，大家都知道。同時(shí)定義a的狀態(tài)和鼠標(biāo)劃過(guò)的狀態(tài)。在CSS中創(chuàng)建一個(gè)a規(guī)則，并調(diào)整當(dāng)鼠標(biāo)劃過(guò)鏈接文字時(shí)的顏色。在這里就要涉及到偽類，在這里直接調(diào)用就好。
對(duì)于CSS的初學(xué)者，大多數(shù)人都不知道使用子選擇器，這樣會(huì)影響效率。這是后就可以使用派生選擇器，就可以減少大量的class的定義。這個(gè)代碼如下：
#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è)樣式名來(lái)定義樣式，只需使用派生選擇器，從它的父元素處選擇即可，這樣能大大提高效率。

分享名稱：網(wǎng)頁(yè)設(shè)計(jì)中導(dǎo)航欄列表的基本設(shè)計(jì)
本文路徑：http://www.bm7419.com/news/88237.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站排名、微信公眾號(hào)、外貿(mào)建站、靜態(tài)網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)