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

分享名稱：網(wǎng)頁設計中導航欄列表的基本設計
本文路徑：http://chinadenli.net/news/88237.html

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

廣告

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