在網(wǎng)頁設(shè)計(jì)中定義菜單樣式

網(wǎng)頁設(shè)計(jì)時(shí),很多鏈接放在一起,就可以組成菜單,菜單是網(wǎng)站的導(dǎo)航中心,在每個(gè)頁面都會(huì)看見它,因此設(shè)計(jì)鏈接樣式,以及導(dǎo)航菜單樣式就成為網(wǎng)頁設(shè)計(jì)中很重要的組成部分。

菜單樣式風(fēng)格不一、種類繁多,頁面該用什么樣式,這個(gè)需要結(jié)合網(wǎng)頁設(shè)計(jì)風(fēng)格。之前曾經(jīng)介紹了按鈕樣式,下面就以按鈕樣式為基礎(chǔ),設(shè)計(jì)一個(gè)水平顯示的菜單樣式。

【操作步驟】

第1步,構(gòu)建網(wǎng)頁結(jié)構(gòu),在<body>標(biāo)簽中輸入以下內(nèi)容:

<div>    

<ul>        

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

<li><a href="#">國內(nèi)新聞</a></li>        

<li><a href="#">體育新聞</a></li>        

<li><a href="#">國際新聞</a></li>        

<li><a href="#">娛樂新聞</a></li>        

<li><a href="#">財(cái)經(jīng)新聞</a></li>    

</ul>

</div>

整個(gè)菜單結(jié)構(gòu)以無序列表為基礎(chǔ),使用<ul>和<li>標(biāo)簽配合,設(shè)計(jì)每個(gè)菜單項(xiàng),在每個(gè)菜單項(xiàng)中包含一個(gè)鏈接,可以看到,無序列表結(jié)構(gòu)呈現(xiàn)垂直顯示,并帶有項(xiàng)目符號(hào),每個(gè)項(xiàng)目以縮進(jìn)呈現(xiàn)。

第2步,定義網(wǎng)頁基本屬性,設(shè)置列表默認(rèn)樣式,清除項(xiàng)目符號(hào),并讓菜單文本居中顯示。

body {    margin:0px;    

padding:0px;    

font-size:16px;    

font-family:"宋體";

}div {    margin:10px auto auto 10px;}ul {    list-style-type:none;    

text-align:center;}li {    float:left;    margin-left:5px;}

在以上代碼中,首先定義了頁面邊界為0,清除頁邊距,統(tǒng)一字體大小為16像素,字體類型為宋體,為div元素定義左右margin為auto,上下為10像素。

第3步,定義按鈕樣式。

a:link, a:visited {/*鏈接正常狀態(tài)、被訪問過的樣式*/    

color: #000;    

display:block;    

width:100px;    

height:20px;    

line-height:20px;    

padding:4px 10px 4px 10px;    

background-color: #ffd8db;    

text-decoration: none;    

border-top: 1px solid #ece0e0;      /*邊框?qū)崿F(xiàn)陰影效果*/

 border-left: 1px solid #ece0e0;    

border-bottom: 1px solid #636060;    

border-right: 1px solid #636060;}a:hover {/*鼠標(biāo)經(jīng)過時(shí)的鏈接*/    

color:#821818;                     /*改變文字顏色*/    

padding:5px 8px 3px 12px;          /*改變文字位置*/    

background-color:#e2c4c9;          /*改變背景色*/    

border-top: 1px solid #636060;     /*邊框變換,實(shí)現(xiàn)“按下去”的效果*/    

border-left: 1px solid #636060;    

border-bottom: 1px solid #ece0e0;    

border-right: 1px solid #ece0e0;}

在上面代碼中定義鏈接在默認(rèn)狀態(tài)下顯示黑色,頂部邊框線和左側(cè)邊框線為淺色效果,而右側(cè)和底部邊框線顏色為深色。當(dāng)鼠標(biāo)經(jīng)過時(shí),則重新設(shè)置四邊邊框線顏色,把上下和左右邊框線顏色調(diào)換,這樣利用錯(cuò)覺就設(shè)計(jì)出了一個(gè)凸凹立體效果。

提示:網(wǎng)頁設(shè)計(jì)立體樣式的技巧就是借助邊框樣式的變化(主要是顏色的深淺變化)來模擬一種凸凹變化的過程,即營造一種立體變化效果。使用CSS設(shè)計(jì)立體效果的3種技巧如下。   

?利用邊框線的顏色變化來制造視覺錯(cuò)覺。可以把右邊框和底部邊框結(jié)合,把頂部邊框和左邊框結(jié)合,利用明暗色彩的搭配來設(shè)計(jì)立體變化效果。

   ?利用鏈接背景色的變化來營造凸凹變化的效果。鏈接的背景色可以設(shè)置相對(duì)深色效果,以營造凸起效果,當(dāng)鼠標(biāo)經(jīng)過時(shí),再定義淺色背景來營造凹下效果。   

?利用環(huán)境色、字體顏色(前景色)來烘托這種立體變化過程。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))