使用CSS开发时髦的导航栏(三)

转载 2007年09月18日 12:15:00
如何使用CSS和列表构造一个水平菜单?
到目前为止,我们能够处理垂直导航栏了这种导航栏在一个中间是主要内容的网站左边或右边很容易被看到。然而,导航栏也常常被做成水平菜单紧挨在文本上方。
解决方案
8显示的这种类型的导航栏可以用CSS样式化的列表实现。li元素必须被设置成inline(内联)显示,这样可以避免每个列表元素换行显示。
navigation_css-horizontal-list.png
8:水平菜单导航栏
这是产生这个显示效果的HTMLCSS代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_horiz.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></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 {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
讨论
为了产生水平导航栏,我们从创建一个和前面垂直导航栏ID一样的列表开始:
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
象我们在垂直导航栏做的一样,我们样式化#navigation容器,给它设置一些基本的字体信息。如果页面完全是CSS布局的话,这个ID可能还会包含一些确定导航栏在页面位置的样式:
#navigation {
font-size: 90%;
}
ul元素的样式里面,我们移除掉列表在浏览器显示时的标志位和缩进:
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
下面是把li元素的显示从垂直变换到水平的属性:
#navigation li {
display: inline;
}
在我们把display属性设定为inline之后,这个列表显示出来象图9一样:
navigation_list-menu-horizontal.png
9disply:inline的列表显示
我们剩下的工作是样式化导航栏的链接:
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
如果你想像我这样,在每个链接外面创建一个框,记得为了在文本和它的容器边缘留更多的空隙,你必须在链接左面和右边设定更多的padding,为了在导航栏各个项目间增加更多空隙,你必须增加链接左边和右边的margins
 

相关文章推荐

使用html和css制作水平导航栏nav

使用html和css制作水平导航栏nav的方法及其效果: 1、li设置float:left; (1)代码片段:... *{ margin:0; ...

纯css使用transform实现同心圆导航栏菜单

最近遇到客户来了一个我没遇到过的需求。那就是制作一个同心圆菜单栏。因为公司没有其他人指导我,所以我自己在网上搜索了很久,最后是根据(http://www.w3cplus.com/css3/buildi...

看书《DIV+CSS商业案例与网页布局开发精讲》_制作站点导航栏_随手笔记

一、文本导航栏 (1)文本导航栏的效果主要由背景图片和文字的链接效果来控制,   文本导航栏一般使用标签或直接使用标签控制 (2)[1]  标签是列表标签,它是将整个导航栏作为一个列表进...

纯css导航栏,适合新手

iOS开发之导航栏Navigation Controller的使用

正如在android开发中在界面顶端会有一个Action Bar一样,在iOS中也会在上方会有一个导航栏,这个导航栏可以进行返回,显示本页标题等功能。我在之前两篇博客中提到的2种返回方式都需要编写代码...

css导航栏

纯html+css导航 *{     margin:0;     padding:0; } .clear:after {     clear: both;   ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)