效果圖如下：


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


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

　　看下面的去掉第五代碼塊邊框設置而觸發的“地震”！


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