位置：首頁 > 設計 > 網頁設計

純css實現藍色圓角效果水平導航菜單代碼

網頁設計8.92K

這是一款可愛的藍色圓角水平導航菜單，用到幾張背景圖片，我覺得這款菜單挺實用，特別是用在個人博客中非常合適。在兼容性方面做的'也很好，幾乎兼容所有的瀏覽器。

　　運行效果截圖如下：

　　代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"">

<head>

<title>藍色圓角水平導航菜單</title>

<style>

margin:0;

padding:0;

}

body{

background:#fff;

color:#666;

font:12px/18px Tahoma, Arial, Helvetica, sans-serif;

}

#menu{

width:100%;

margin:15px;

}

#menu ul{

list-style:none;

}

#menu li{

list-style:none;

display:block;

float:left;

margin:0 2px;

}

#menu li a{

display:block;

float:left;

height:66px;

color:#fff;

text-transform:uppercase;

font-size:11px;

font-weight:bold;

background:url(images/menu_009_l.jpg) no-repeat left;

line-height:66px;

padding:0 0 0 9px;

text-decoration:none;

}

#menu li a span{

display:block;

float:left;

background:url(images/menu_009_r.jpg) no-repeat right;

height:66px;

color:#d2eeff;

line-height:66px;

padding:0 18px 0 8px;

}

#menu li a:hover{

display:block;

float:left;

background:url(images/menu_009_h_l.jpg) no-repeat left;

height:66px;

}

#menu li a:hover span{

display:block;

float:left;

background:url(images/menu_009_h_r.jpg) no-repeat right;

color:#fff;

height:66px;

}

#menu li a.current{

display:block;

float:left;

height:66px;

color:#fff;

text-transform:uppercase;

font-size:11px;

font-weight:bold;

background:url(images/menu_009_h_l.jpg) no-repeat left;

line-height:66px;

padding:0 0 0 9px;

text-decoration:none;

}

#menu li ent span{

display:block;

float:left;

background:url(images/menu_009_h_r.jpg) no-repeat right;

height:66px;

color:#fff;

line-height:66px;

padding:0 18px 0 8px;

}

糯米文學吧

純css實現藍色圓角效果水平導航菜單代碼

如何理解Javascript的caller,callee,call,apply區別

win2008 ASP顯示500內部錯誤不能顯示詳細錯誤的解決方法

asp.net 操作INI文件讀寫類實例代碼

網頁設計黃金配色原則是什麼

相關文章