get新技能是需要付出行动的，即使看得再多也还是要动手试一试。今天小编跟大家分享的是DIV+CSS制作的个性水平导航菜单实例，一起来学习了解下吧！
先看下效果:
CSS样式代码:
#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完整
!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0 Transitional//EN"
"&;
html xmlns="&; lang="gb2312" &&;
head
title站酷CSS代码演示/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
link rel="stylesheet" type="text/css" href="css/&; _fcksavedurl=""css/&;" _fcksavedurl=""css/&;" /
/head
body
div id="pointermenu"
ul
lia href="#"主 页/a/li
lia href="#"自定菜单/a/li
lia href="#" id="selected"自定菜单/a/li
lia href="#"自定菜单/a/li
lia href="#"自定菜单/a/li
lia href="#"自定菜单/a/li
lia href="#"自定菜单/a/li
lia href="#" id="rightcorner" /a/li
/ul
/div
br style="clear: left" /
/body
/html
最后提供打包下载:
如果觉得《DIV+CSS制作的个性水平导航菜单实例》对你有帮助，请点赞、收藏，并留下你的观点哦！
