效果圖如下：


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


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

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


　　下面是此例的最終效果，這樣的圍城，你進不進？