繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS实例教程:制作网站横向导航
- CSS样式表
- CSS中的text-shadow属性
- 利用CSS3特性和浏览器中的工具进行网页设计
- 使用CSS3将你的网站设计推向未来
- 网页设计师福音：CSS网格布局生成器
- CSS教程：汇总让IE6崩溃的几种方法
- CSS教程：快速提升设计可读性和维护性
- HTML5和CSS3给网站设计带来出色效果
- CSS选择器大全
- TypeSelect实现网页嵌入字体
- CSS样式表尽量放到网页头部
- CSS3的优势以及网页设计师如何使用CSS3技术
- CSS样式表中引用图片地址在各浏览器中的差异
- 5种给CSS样式表瘦身减肥的方法
- 英文教程:50个网页制作中应用的CSS技巧
- 用CSS3将你的设计带入下个高度
- CSS教程:新的图像替换方法
- 创造100%功能自适应css布局的行之有效的方法
- 轻松搞定IE的CSS制作网页技巧3则
- 网页设计应该熟知的CSS 3.0技术
- 制作网页常用的50种CSS工具
CSS样式表 中的 CSS实例教程:制作网站横向导航
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-03 浏览: 60 ::
收藏到网摘: n/a
在上面一节我们讲到的是垂直的导航.但是大多网站用的还是横向的导航,那么就来跟我学下横向导航是如何实现的.
要怎么实现下面的效果.只要在列表项之间避免换行就行了,所以要把<li>转换为内联.
HTML和CSS代码如下:
=============================
<!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>
body {
padding: 1em;
}
#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;
}
=============================
分析:
创建一个div容器,然后在里面添加一个列表:
================================
<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布局中这个容器还可能会添加一些额外的信息,如:确定这个导航在页面上的位置.
===============================
#navigation {
font-size: 90%;
}
=================================
接下来在<ul>对象,我们把默认的圆点清除和清除默认的缩进.
============================
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
============================
现在是横向导航最重要的一部分,因为没有了这一步那就不叫横向了,^_^.设置<li>为内联元素,这样就避免了换行.
=========================
#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;
}
=========================
PS:如果你想让文本与边框的距离大一点,那么你就要设置left padding和right padding.如果你想让项与项之间的距离变大,那么你也要设置left margin 和right margin.
评论 (0) All
