- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>純CSS+DIV實現的豎向菜單</title>
- <style>
- .menu{
- width:200px;
- }
- .menu a,.menu a:visited{
- text-decoration:none;/*文字無下滑線*/
- text-align:center;/*文字水平居中對齊*/
- color:#c00;/*紅色文字*/
- display:block;/*設置爲塊狀元素*/
- padding:4px;/*內邊距*/
- background:#FFF;/*背景色*/
- border: 1px solid #fff;/*與背景色相同邊框，防止跳動*/
- width:130px;
- position:relative;/*使用相對定位*/
- }
- .menu a:hover{
- border:solid 1px #c00;/*邊框顏色紅色*/
- }
- .menu a span{
- display:block;/*設置爲塊狀元素*/
- position:absolute;/*使用絕對定位*/
- width:0px;/*寬度爲0*/
- height:0px;/*高度爲0*/
- border:solid 8px #fff;/*設置默認邊框樣式*/
- top:4px;/*豎直方向的定位*/
- overflow:hidden;
- }
- .menu a span.left{
- border-left-color:#c00;
- left:8px;
- }
- .menu a span.right{
- border-right-color:#c00;
- right:8px;
- }
- </style>
- </head>
- <body>
- <div class="menu">
- <a href="#">
- <span class="left"></span>
- 首頁
- <span class="right"></span>
- </a>
- <a href="#">
- <span class="left"></span>
- 新聞
- <span class="right"></span> </a>
- <a href="#">
- <span class="left"></span>
- 產品
- <span class="right"></span>
- </a>
- </div>
- </body>
- </html>
純CSS+DIV實現的豎向菜單（簡單例子，提供學CSS的朋友學習）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.