YPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”>
我们在制作HTML页面的时候。导航菜单是必不可少的功能，你知道css如何实现横向菜单吗？其实实现横向菜单的方法非常简单，现在我们就去看看具体内容吧。
要怎么实现下面的效果.只要在列表项之间避免换行就行了,所以要把
HTML和CSS代码如下:
复制代码
代码如下:
br> “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
content=”text/html; charset=utf-8″ />
listnav_horiz.css
复制代码
代码如下:
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容器,然后在里面添加一个列表:
复制代码
代码如下:
在#navigation 容器里添加一些基本的信息,如字体的大小.在CSS布局中这个容器还可能会添加一些额外的信息,如:确定这个导航在页面上的位置.
复制代码
代码如下:
#navigation {
font-size: 90%;
}
接下来在
-
对象,我们把默认的圆点清除和清除默认的缩进.
- 为内联元素,这样就避免了换行.
复制代码
代码如下:
#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.
css如何实现横向菜单？看完本文后你是否明白了呢？如果有疑问大家可以留言交流。
复制代码
代码如下:
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
现在是横向导航最重要的一部分,因为没有了这一步那就不叫横向了,^_^.设置