布局初步搭建起來，我開始填充里面的內(nèi)容。首先是定義logo圖片：

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、成都網(wǎng)站制作與策劃設(shè)計,屏山網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:屏山等地區(qū)。屏山做網(wǎng)站價格咨詢:18980820575

樣式表：#logo{MARGIN:0px;padding:0px;WIDTH:200px;HEIGHT:80px;}
頁面代碼：<divid=''logo''><atitle=''網(wǎng)頁設(shè)計師''href=''http://www.w3cn.org/''><imgheight=''80''alt=''鏈接到w3cn.org首頁''src=''images/logo_w3cn_200x80.gif''width=''200''/></a></div>

以上代碼現(xiàn)在應(yīng)該容易理解。先在CSS定義了一個logo的層，然后在頁面中調(diào)用它。需要說明的是，為了使網(wǎng)頁有更好的易用性，web標準要求大家給所有的、屬于正式內(nèi)容的圖片，加一個alt屬性。這個alt屬性是用來說明圖片的作用(當圖片不能顯示的時候就顯示替換文字)，所以不要只寫成無意義的圖片名稱。

接下來是定義菜單。

1.不用表格的菜單(縱向)
我們先來看菜單的最終效果：

什么是網(wǎng)站標準
使用標準的好處
怎樣過渡
相關(guān)教程
工具
資源及鏈接
通常方法我們至少嵌套2層表格來實現(xiàn)這樣的菜單，間隔線采用在td中設(shè)置背景色并插入1px高的透明GIF圖片實現(xiàn)；背景色的交替效果采用td的onmouseover事件實現(xiàn)。但查看本菜單的頁面代碼，你會看到只有如下幾句：

<divid=''menu''>
<ul>
<li><atitle=''網(wǎng)站標準''href=''http://www.w3cn.org/webstandards.html''>什么是網(wǎng)站標準</a></li>
<li><atitle=''標準的好處''href=''http://www.w3cn.org/benefits.html''>使用標準的好處</a></li>
<li><atitle=''怎樣過渡''href=''http://www.w3cn.org/howto.html''>怎樣過渡</a></li>
<li><atitle=''相關(guān)教程''href=''http://www.w3cn.org/tutorial.html''>相關(guān)教程</a></li>
<li><atitle=''工具''href=''http://www.w3cn.org/tools.html''>工具</a></li>
<li><atitle=''資源及鏈接''href=''http://www.w3cn.org/resources.html''>資源及鏈接</a></li>
</ul>
</div>

沒有用任何table,而用的是無序列<li>，整個菜單的效果實現(xiàn)的秘密完全在于id=''menu''，我們再來看CSS中關(guān)于menu的定義：

(1)首先定義了menu層的主要樣式:

#menu{
MARGIN:15px20px0px15px;/*定義層的外邊框距離*/
PADDING:15px;/*定義層的內(nèi)邊框為15px*/
BACKGROUND:#dfdfdf;/*定義背景顏色*/
COLOR:#666;/*定義字體顏色*/
BORDER:#fff2pxsolid;/*定義邊框為2px白色線條*/
WIDTH:160px;/*定義內(nèi)容的寬度為160px*/
}

(2)其次定義無序列表的樣式：

#menuul{
MARGIN:0px;
PADDING:0px;
BORDER:mediumnone;/*不顯示邊框*/
LINE-HEIGHT:normal;
LIST-STYLE-TYPE:none;

}
#menuli{BORDER-TOP:#FFF1pxsolid;MARGIN:0px;}

說明：這里用的是id選擇器的派生方法定義(參考第7天：CSS入門的介紹)了在menu層中的子元素<ul>和<li>的樣式。LIST-STYLE-TYPE:none一句表示不采用無序列表的默認樣式，即：不顯示小圓點（我們后面用自己的圖標來代替小圓點）。BORDER-TOP:#FFF1pxsolid;則定義了菜單之間的1px間隔線。

(3)定義onmouseover效果

#menulia{
PADDING:5px0px5px15px;
DISPLAY:block;
FONT-WEIGHT:bold;
BACKGROUND:url(images/icon_dot_lmenu.gif)transparentno-repeat2px8px;
WIDTH:100%;
COLOR:#444;
TEXT-DECORATION:none;
}
#menulia:hover{BACKGROUND:url(images/icon_dot_lmenu2.gif)#C61C18no-repeat2px8px;
COLOR:#fff;}

解釋如下：

''display:block;''表示將標簽a當作塊級元素來顯示，使得鏈接變成一個按鈕；
''BACKGROUND:url(images/icon_dot_lmenu.gif)transparentno-repeat2px8px;''這一句定義了替代li的小圓點的圖標。''transparent''指背景為透明，''2px8px''指定圖標的位置是距左邊2px，距上邊8px。這一句也可以拆分寫成四句：''BACKGROUND-IMAGE:url(images/icon_dot_lmenu.gif);BACKGROUND-POSITION:2px8px;BACKGROUND-REPEAT:no-repeat;BACKGROUND-COLOR:transparent;''
''#menulia:hover''定義了當鼠標移動到鏈接上以后的顏色變化和小圖標變化。
ok，不用表格的菜單就這樣實現(xiàn)了。大家可以明顯感覺到，原來寫在HTML里的表現(xiàn)樣式全部剝離放到CSS文件里去了。頁面代碼節(jié)約了大半。通過CSS要修改菜單樣式就很簡單了。

2.不用表格的菜單(橫向)
上面是縱向的菜單,如果要顯示橫向菜單，用li也可以嗎？當然是可以的，下面給出代碼，效果就在本頁頂部:

頁面代碼

<divid=''submenu''>
<ul>
<liid=''one''><atitle=''首頁''href=''http://www.w3cn.org/''>Home</a></li>
<liid=''two''><atitle=''關(guān)于我們''href=''http://www.w3cn.org/aboutus.html''>關(guān)于我們</a></li>
<liid=''three''><atitle=''網(wǎng)站標準''href=''http://www.w3cn.org/webstandards.html''>網(wǎng)站標準</a></li>
<liid=''four''><atitle=''標準的好處''href=''http://www.w3cn.org/benefits.html''>標準的好處</a></li>
<liid=''five''><atitle=''怎樣過渡''href=''http://www.w3cn.org/howto.html''>怎樣過渡</a></li>
<liid=''six''><atitle=''相關(guān)教程''href=''http://www.w3cn.org/tutorial.html''>相關(guān)教程</a></li>
<liid=''seven''><atitle=''工具''href=''http://www.w3cn.org/tools.html''>工具</a></li>
<liid=''eight''><atitle=''資源及鏈接''href=''http://www.w3cn.org/resources.html''>資源及鏈接</a></li>
<liid=''nine''><atitle=''常見問題''href=''http://www.w3cn.org/faq.html''>常見問題</a></li>
</ul>
</div>

樣式表代碼

#submenu{
MARGIN:0px8px0px8px;
PADDING:4px0px0px0px;
BORDER:#fff1pxsolid;
BACKGROUND:#dfdfdf;
COLOR:#666;
HEIGHT:25px;}

#submenuul{
CLEAR:left;
MARGIN:0px;
PADDING:0px;
BORDER:0px;
LIST-STYLE-TYPE:none;
TEXT-ALIGN:center;
DISPLAY:inline;
}

#submenuli{
FLOAT:left;
DISPLAY:block;
MARGIN:0px;
PADDING:0px;
TEXT-ALIGN:center}

#submenulia{
DISPLAY:block;
PADDING:2px3px2px3px;
BACKGROUND:url(images/icon_dot_lmenu.gif)transparentno-repeat2px8px;
FONT-WEIGHT:bold;
WIDTH:100%;
COLOR:#444;
TEXT-DECORATION:none;
}

#submenulia:hover{
BACKGROUND:url(images/icon_dot_lmenu2.gif)#C61C18no-repeat2px8px;
COLOR:#fff;}

#submenuulli#oneA{WIDTH:60px}
#submenuulli#twoA{WIDTH:80px}
#submenuulli#threeA{WIDTH:80px}
#submenuulli#fourA{WIDTH:90px}
#submenuulli#fiveA{WIDTH:80px}
#submenuulli#sixA{WIDTH:80px}
#submenuulli#sevenA{WIDTH:60px}
#submenuulli#eightA{WIDTH:90px}
#submenuulli#nineA{WIDTH:80px}

以上代碼不逐一分析了。橫向菜單的關(guān)鍵在于：定義<li>樣式時的''FLOAT:left;''語句。另外注意UL定義中的DISPLAY:inline;一句表示將li強制作為內(nèi)聯(lián)對象呈遞，從對象中刪除行，通俗講就是li不換行。實現(xiàn)橫向排列。你也可以象例子中定義每個子菜單的寬度，控制菜單的間隔。好了，你也可以動手試試，用li實現(xiàn)各種各樣的菜單樣式。

Tips:如果你子菜單的寬度總和大于層的寬度，菜單會自動折行，利用這個原理可以實現(xiàn)單個無序列表的2列或者3列排版，這是原來HTML很難實現(xiàn)的。

當前標題：html網(wǎng)頁制作中不用表格的菜單設(shè)計
URL地址：http://aaarwkj.com/article36/egocpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、云服務(wù)器、面包屑導(dǎo)航、電子商務(wù)、搜索引擎優(yōu)化、用戶體驗

廣告

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