作家
登录

DIV CSS制作的个性水平导航菜单实例

作者: 来源:www.28hudong.com 2012-11-19 22:49:22 阅读 我要评论

先看下效果: 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//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"" /></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> 最后提供打包下载:http://www.jb51.net/files/soft/jb51nav1107.rar

  推荐阅读

  学DIV CSS技术,如何入门?

引言: 引用一本书中的一段文字:“当我第一次开始学习汉语时,我的家庭老师老王给了我一本汉英字典、一本汉语语法书和一本初级教程。但是,他将这些书放 在一个书筐里,并说到下周才能派上用场。在第一周>>>详细阅读


本文标题:DIV CSS制作的个性水平导航菜单实例

地址:http://www.17bianji.com/kaifa2/CSS/17236.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)