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

站长资源 2024/11/24 佚名

70 1538 70

DDR爱好者之家 Design By 杰米

解决方案

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Lists as navigation</title>

content="text/html; charset=utf-8" />

</head>

<body>

<ul>

<li><a href="#">Recipes</a>

<ul>

<li><a href="#">Starters</a></li>

<li><a href="#">Main Courses</a></li>

<li><a href="#">Desserts</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Buy Online</a></li>

</ul>

</div>

</body>

</html>

#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代码：

<ul>

<li><a href="#">Recipes</a>

<ul>

<li><a href="#">Starters</a></li>

<li><a href="#">Main Courses</a></li>

<li><a href="#">Desserts</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Buy Online</a></li>

</ul>

用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,导航栏,第二篇

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“用CSS开发时髦的导航栏第二篇”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

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

解决方案

讨论

CSS渐变文本效果的两种方法比较

用CSS开发时髦的导航栏图例教程

评论“用CSS开发时髦的导航栏第二篇”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接