網頁設計中導航欄列表的基本設計

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

分享名稱：網頁設計中導航欄列表的基本設計
本文路徑：http://m.kartarina.com/news/88237.html

成都網站建設公司_創新互聯，為您提供微信小程序、網站排名、微信公眾號、外貿建站、靜態網站、標簽優化

廣告

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