css 横向菜单完成编码

2021-03-14 02:18 jianzhan
要如何完成下面的实际效果.要是在目录项之间防止换行就可以了,因此要把<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⑻" />
<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>


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;
}


剖析:

建立1个div器皿,随后在里边加上1个目录:

拷贝编码
编码以下:

<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 器皿里加上1些基础的信息内容,如字体样式的尺寸.在CSS合理布局中这个器皿还将会会加上1些附加的信息内容,如:明确这个导航栏在网页页面上的部位.

拷贝编码
编码以下:

#navigation {
font-size: 90%;
}

接下来在<ul>目标,大家把默认设置的圆点消除和消除默认设置的缩进.


拷贝编码
编码以下:

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}

如今是横指导航最关键的1一部分,由于沒有了这1步那就不叫横向了,^_^.设定<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:假如你想让文字与边框的间距大1点,那末你就要设定left padding和right padding.假如你想让项与项之间的间距增大,那末你也要设定left margin 和right margin.