效果圖如下：


　　HTML代碼我們就飄過吧，都成了老生常談了。不清楚大家會(huì)不會(huì)厭倦。但知道是需要多鞏固的，尤其是你認(rèn)為已經(jīng)把握了的知識(shí)，在實(shí)際操作的時(shí)候就很可能在這些小問題上出現(xiàn)問題。而且些微的變化往往形成完全不同的視覺效果，我們除了把握編碼的知識(shí)，更應(yīng)該熟悉網(wǎng)頁制作工作的樂趣，不嘮叨了，讓我們上路吧，看CSS代碼：


　　我們今天換個(gè)花樣，以代碼塊的形式向大家介紹各區(qū)域字母的意義何在：
　　1、整體布局聲明，文字大小及居中。m.dounai2.com原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。
　　2、聲明body的背景色，此例中，好象背景有無顏色并不重要，但我們還是這樣設(shè)置吧。
　　3、菜單列表UL的一些設(shè)置，寬度為700px，距頂20并左右居中對(duì)齊，底部不作聲明即設(shè)置成零。
　　　　背景色為#f60，我們那火紅的融爐就是它營(yíng)造的。設(shè)置填充，上下8px、左右12px。
　　4、菜單列表項(xiàng)LI的設(shè)置，內(nèi)聯(lián)對(duì)象并取消列表項(xiàng)預(yù)設(shè)標(biāo)記。
　　5、設(shè)置菜單鏈接元素、已訪問元素的樣式。m.dounai2.com原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。
　　　　向左浮動(dòng)，右邊距為8px，讓各“城”之間有一定的距離，不要“城城相連”。
　　　　設(shè)置填充上下2px、左右5px。取消鏈接文字的下劃線。
　　　　文字顏色設(shè)置為白色#fff。“砌城墻”外邊框1px的實(shí)線。
　　　　什么？邊框的顏色與背景色一樣了？確實(shí)是一樣了！
　　　　但這樣不會(huì)出問題，下面我們有一個(gè)小試驗(yàn)，假如去掉這個(gè)邊框的設(shè)置，
　　　　菜單會(huì)讓你有觸發(fā)“地震”的感覺，我們這樣設(shè)置是為了占位。
　　6、菜單鏈接的激活HOVER效果，文字顏色變了一點(diǎn)兒，“城墻”即外邊框成為白色。
　　7、菜單的當(dāng)前頁效果。文字顏色火紅火紅的，“城墻”即外邊框成為白色，內(nèi)部背景一片慘白。

　　看下面的去掉第五代碼塊邊框設(shè)置而觸發(fā)的“地震”！


　　下面是此例的最終效果，這樣的圍城，你進(jìn)不進(jìn)？