DIV CSS制作的個性水平導(dǎo)航菜單實例_CSS教程
先看下效果:
CSS樣式代碼:
以下為引用的內(nèi)容:
#pointermenu{
border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0;
}
#pointermenu ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 10px;
font: 12px 宋體;
background-color: black;
background: black url(../images/leftround.gif) bottom left no-repeat; /*optional left round corner*/
}
* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}
#pointermenu ul li{
display: inline;
}
#pointermenu ul li a{
float: left;
color: white;
font-weight: ;
padding: 2px 11px 7px 7px;
text-decoration: none;
background: url(../images/bbbbb.gif) bottom center no-repeat;
}
#pointermenu ul li a:visited{
color: white;
}
#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
color: white;
background-color: darkred;
}
#pointermenu ul li a#rightcorner{
padding-right: 0;
padding-left: 8px;
background: url(../images/rightround.gif) bottom right no-repeat; /*optional right round corner*/
}
HTML完整
以下為引用的內(nèi)容:
<!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" lang="gb2312" xml:lang="gb2312">
<head>
<title>站酷CSS代碼演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css/css.css" _fcksavedurl=""css/css.css"" _fcksavedurl=""css/css.css"" _fcksavedurl=""css/css.css"" />
</head>
<body>
<div id="pointermenu">
<ul>
<li><a href="#">主 頁</a></li>
<li><a href="#">自定菜單</a></li>
<li><a href="#" id="selected">自定菜單</a></li>
<li><a href="#">自定菜單</a></li>
<li><a href="#">自定菜單</a></li>
<li><a href="#">自定菜單</a></li>
<li><a href="#">自定菜單</a></li>
<li><a href="#" id="rightcorner"> </a></li>
</ul>
</div>
<br style="clear: left" />
</body>
</html>
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
- CSS教程7、CSS屬性結(jié)合起來使用[翻譯Htmldog]
- 實用CSS教程:從基礎(chǔ)開始(二)
- CSS大師Eric采訪實錄
- LevelsofCSSKnowledge-你是哪個等級的CSS開發(fā)人員
- 關(guān)于CSS樣式?jīng)_突排序的一個小試驗
- CSS進階:詳解CSS優(yōu)先級的讀法
- css教程:CSS定位屬性的應(yīng)用
- 應(yīng)用CSS的page-break-after屬性 實現(xiàn)WEB頁面強制分頁打印
- 列表UL、OL預(yù)設(shè)標(biāo)記在FF與IE下方式不同的試驗
- 由淺入深實踐學(xué)習(xí) Web 標(biāo)準(zhǔn)
猜你也喜歡看這些
- HTML表格標(biāo)記教程(16):標(biāo)題水平對齊屬性ALIGN
- 容易讓人迷惑的alt和title
- HTML表格標(biāo)記教程(7):背景顏色屬性BGCOLOR
- HTML表格標(biāo)記教程(41):表頭的寬度和高度屬性WIDTH、HEIGHT
- 總結(jié)XHTML代碼常見的應(yīng)用問題
- HTML頁面中標(biāo)簽的語義與使用位置
- HTML表格標(biāo)記教程(39):表頭的亮邊框色屬性BORDERCOLORLIGHT
- HTML表格標(biāo)記教程(35):跨列屬性COLSPAN
- CSS網(wǎng)頁布局應(yīng)該避免濫用div元素
- 網(wǎng)頁設(shè)計中文本輸入框的一些參數(shù)說明
- 相關(guān)鏈接:
- 教程說明:
CSS教程-DIV CSS制作的個性水平導(dǎo)航菜單實例。