萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS教程: 雙斜角橫線菜單
CSS教程: 雙斜角橫線菜單
在這個案例中，將制作如圖1所示的菜單。鼠標指針經過某個菜單項時，顯示灰色背景色，同時在上下兩側各產生一條帶有斜角的橫線。
該實例文件位於網頁CSS教程資源中的“第7章\02\bevel-navi.htm”。
圖1 雙斜角橫線菜單效果
在這個案例中，需要重點考慮的是這個帶有斜角的橫線是如何產生的。
一、基本設置
本案例和上一個案例相同的HTML結構如下。
XML/HTML 代碼復制內容到剪貼板- <body>
- <div id="menu">
- <a href="#"> Home</a>
- <a href="#"> Contact Us</a>
- <a href="#"> Web Dev</a>
- <a href="#"> Web Design</a>
- <a href="#"> Map</a>
- </div>
- </body>
對於#menu容器的設置如下。WANGYEXX.COM
折疊展開CSS 代碼復制內容到剪貼板- #menu { /*對menu層設置*/
- width:9em; /*寬度*/
- margin:0 auto; /*水平居中*/
- font-family:Arial; /*字體*/
- font-size:14px; /*字號*/
- border:solid 1px #aaa; /*細灰色邊框*/
- }
在對#menu的設置中，寬度使用的足相對單位em，而不像上一個例子，使用像素作為單位，代碼如下。
折疊展開CSS 代碼復制內容到剪貼板- #menu a, #menu a:visited { /*設置菜單選項*/
- display:block; /*設置為塊級元素*/
- text-decoration:none; /*無下劃線*/
- color:#000; /*黑色文字*/
- height:1.4em; /*高度*/
- border:0.5em solid #fff; /*白色*/
- }
- #menu a:hover {
- color:#fff; /*白色文字*/
- background-color:#aaa; /*深灰色背景色*/
- border-color:#ddd #aaa; /*上下邊框淺灰色，左右與背景色相同*/
- }
使用相對單位的優勢是，當訪問者在浏覽器中調整了文字的大小，#menu容器的大小可以自動調整，以適應文字大小的變化。
此外，還為#menu容器設置了1個像素寬的灰色的邊框，代碼為：
折疊展開CSS 代碼復制內容到剪貼板- border:solid 1px #aaa; /*細灰色邊框*/
二、菜單項設置
菜單項沒有鼠標指針經過時效果的設置方法與上一節的案例相似，代碼如下。
折疊展開CSS 代碼復制內容到剪貼板- #menu a, #menu a:visited { /*設置菜單選項*/
- display:block; /*設置為塊級元素*/
- text-decoration:none; /*無下劃線*/
- color:#000; /*黑色文字*/
- height:1.4em; /*高度*/
- border:0.5em solid #fff; /*白色*/
- }
與上個案例的不同之處在於，這裡為了使菜單項的文字之間有一定空白，並且使文字在菜單項中豎直居中，沒有采用padding來實現，而是用了line-height屬性。當line-height屬性設置為1.4em時，文字的上下會各產生0.2em的空白。
注意：這裡不能使用height屬性。如果使用height屬性代替line-height屬性。可以看到，文字將在豎直方向靠上對齊，而不是豎直居中了，這不是所期望的效果。
接下來，就要實現在鼠標指針經過時產生的背景色和邊框了。在前面正常狀態下的CSS代碼中有如下一行設置。
折疊展開CSS 代碼復制內容到剪貼板- border:0.5em solid #fff; /*白色*/
對鼠標指針經過效果設置如下。
折疊展開CSS 代碼復制內容到剪貼板- #menu a:hover {
- color:#fff; /*白色文字*/
- background-color:#aaa; /*深灰色背景色*/
- border-color:#ddd #aaa; /*上下邊框淺灰色，左右與背景色相同*/
- }
可以看出，這個邊框在鼠標指針未經過之前就已經存在了，只是和背景色相同，所以看不出是邊框。而當鼠標指針經過時，邊框的顏色發生改變，邊框就顯現出來了。
思考：最後請讀者思考一下，為什麼這裡顯示出的上下兩條邊框是斜角的，而7.1節案例中的左右兩條邊框不是這樣的呢？
答案是，7.1節的案例中設置了左右兩條邊框寬為4px，上下邊框為O；而在這個案例中，雖然左右邊框在鼠標指針經過和不經過時的顏色不同，但實際上它們是存在寬度的，因此在水平和豎直的邊框接角的位置，就產生了斜角。
