当前位置:  编程技术>WEB前端

用CSS开发时髦的导航栏第二篇

    来源: 互联网  发布时间:2014-10-04

    本文导语:  解决方案 在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持CSS。 为了产生多级导航栏,我们创建一个嵌套的列表,为这些新的列表项样式化颜色、...

解决方案

在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持CSS。

为了产生多级导航栏,我们创建一个嵌套的列表,为这些新的列表项样式化颜色、边界和链接属性:

Lists as navigation

#navigation {

width: 200px;

}

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

}

#navigation li {

border-bottom: 1px solid #ED9F9F;

}

#navigation li a:link, #navigation li a:visited {

font-size: 90%;

display: block;

padding: 0.4em 0 0.4em 0.5em;

border-left: 12px solid #711515;

border-right: 1px solid #711515;

background-color: #B51032;

color: #FFFFFF;

text-decoration: none;

}

#navigation li a:hover {

background-color: #711515;

color: #FFFFFF;

}

#navigation ul ul {

margin-left: 12px;

}

#navigation ul ul li {

border-bottom: 1px solid #711515;

margin:0;

}

#navigation ul ul a:link, #navigation ul ul a:visited {

background-color: #ED9F9F;

color: #711515;

}

#navigation ul ul a:hover {

background-color: #711515;

color: #FFFFFF;

}

 

增加这些以后的显示效果如图4。

图4. 包含子菜单的导航栏

讨论

嵌套列表是用来描述我们正在做的导航栏系统的好办法。第一个列表包含站点的主要部分,在Recipes下面的子列表显示了Recipes范围之内的子部分。即使没有任何CSS样式,列表的结构依然清晰且容易理解,就象你在图5看到的一样。

图5:没有使用样式,包含子菜单的导航栏

下面是我们用来在主要项目的li元素里面标记这个简单的嵌套列表的HTML代码:

用HTML,如果简单的使用本文前面的CSS,不做任何修改的话,导航菜单的显示将如图6。由于li元素继承主菜单的样式,子列表将呈现出主导航栏一样的样式。

图6:采用默认样式表子菜单导航栏

为了让嵌套的列表呈现出它是一个子菜单而不是主导航栏一部分的效果,让我们增加一个样式规则:

#navigation ul ul {

margin-left: 12px;

}

这个规则将缩进嵌套列表,让它在主菜单的右边界对齐,象图7显示的这样:

图7:带有缩进规则的导航栏

最后让我们给嵌套表里面的li和a元素增加一些简单的样式以便完善效果:

#navigation ul ul li {

border-bottom: 1px solid #711515;

margin: 0;

}

#navigation ul ul a:link, #navigation ul ul a:visited {

background-color: #ED9F9F;

color: #711515;

}

#navigation ul ul a:hover {

background-color: #711515;

color: #FFFFFF;

}


    
 
 

您可能感兴趣的文章:

  • CSS网页布局入门教程9:用CSS设计网站导航——横向导航
  • xhtml+css制作不规则导航
  • 快速制作CSS导航菜单教
  • CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
  • 纯CSS实现标签导航制作
  • CSS网页布局入门教程12:纵向导航菜单
  • 一个自动居中的导航条实例与相关问题 DIV+CSS
  • 利用jquery动画特效和css打造的侧边弹出垂直导航
  • 用CSS开发时髦的导航栏图例教程
  • 比较漂亮的一个导航条的效果DIV+CSS
  • CSS网页布局入门教程10:带当前标识的标签式横向导航
  • DIV+CSS 简单的导航条
  • CSS仿淘宝首页导航条布局效果
  • CSS3+Js实现响应式导航条
  • 仿客齐集首页导航条DIV+CSS+JS [代码实例]
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • CSS 开发框架 Compass CSS
  • 快速开发CSS的框架 CSScaffold
  • 客齐集OEM的CSS解析与开发经验
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • Articles iis7站长之家
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3