创建一个纯CSS的水平导航条

日期：2007年9月18日作者：查看:[大字体中字体小字体]

    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;

    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
}
div#navbar2 li {
    list-style-type: none;
    display: inline;
}
div#navbar2 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#navbar2 lia:link {
    color: #FFF:
}
div#navbar2 lia:visited {
    color: #CCC;
}
div#navbar2 lia:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #3366FF;
}

Div#navbar2样式会设置包含有导航条链接的div的尺寸和背景。

Div#navbar2 ul样式包含有margin和padding声明，以强制取代被分配给无序列表的缺省空白，并设置文字的整体格式。White-space: nowrap声明会保证列表显示在一个水平的行里，即使浏览器的窗口太窄而无法显示整个行。

这个技巧真正的秘密就在div#navbar2 li样式里。List-style-type: none声明会删除通常用来标记每个列表项目的Bullet；而display: inline声明则能够让列表项目在页面上从左向右浮动，而不会让每个项目显示在单独的行里。

这个技巧的另外一个关键元素是div#navbar2 li a规则。Text-decoration: none声明会删除链接常用的下划线，而padding: 7px 10px声明则用来控制导航条里链接（之间）的空白。左侧和右侧间隙用来控制水平间隔，而我们需要顶部和底部间隙，让它们把滚动效果（以及按钮的可点击区域）的彩色背景充满整个导航条。你还可以加入左侧和右侧空白值，如果你想要在按钮之间加入更多空白的话。

最后，:link, :visited和:hover伪类（pseudoclasse）的规则会设置用于滚动效果的颜色变化。

你可以改变这个基本的技巧，以创建很多不同的导航条效果，包括流行的“目录选项卡”样式。

（出处：网侠）
上一页 [1] [2]
创建一个纯CSS的水平导航条相关文章：
·如何免费创建QQ群
·奋斗十年（南下打工仔的创业回忆））
·解决ActiveX部件不能创建对象的有效方法
·创建一个纯CSS的水平导航条
·为DataGrid创建自定义列控件
·如何创建自己的网站
·创建SvcHost.exe调用的服务原理与实践
·《FM2006》国外玩家的球员推荐+原创心得体会（后防篇）
·创新名言集锦
·在Linux 和FireWire上创建自己的RAC 集群
创建一个纯CSS的水平导航条相关软件
·创世纪：企业王国
·实创启动工具光盘 V4.0
·信长之野望11天下创世
·乐创MJP Player V2.2
·新思创OA协同网络办公自动化系统 V2006.1
·经典创意绿色主题宽屏壁纸集一(含3种尺寸)
·音乐创作大师 DX V1.04 汉化版
·日本Surfers ParadiseCG创作比赛2004作品壁纸集一
·第一创业集成版 V5.56
·虚拟DOS引导系统创建工具 V4.7

上一篇:用CSS缩写给你的网站加速

下一篇:用JSTL实现JSP应用程序快速开发

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

创建一个纯CSS的水平导航条

精品推荐

热点TOP10

特别推荐