Navigation Bar
Proficient use of the navigation bar is very important for any website.
Using CSS you can transform into a beautiful navigation bar instead of a boring HTML menu.
Navigation bar = link list
As the basis of standard HTML, a navigation bar is necessary
. In our example we will build a standard HTML list navigation bar.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>
</body>
</html>
Vertical navigation bar
In the above code, we only need the style of the <a> element to create a vertical navigation bar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html> Example description:
display:block - Displays links to block elements, making the entire link area clickable (not just text). It allows us to specify the width
width:60px - block elements The default is maximum width. We need to specify a width of 60 pixels
Note: Please be sure to specify the width of the <a> element in the vertical navigation bar. If you omit the width, IE6 may have unexpected effects.
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Use inline or floated list items.
Both methods are fine, but if you want links to have the same size, you have to use the float method.
Inline list items
One of the ways to create a horizontal navigation bar is to specify the
element. The above code is Standard inline:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>Floating list items
In the above example the links have different widths.
For all links to have equal width, float the <li> element and specify it as the width of the <a> element:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p><b>注意:</b> 如果!DOCTYPE 没有定义, floating 可以产生意想不到的结果.</p>
<p><b>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>
</body>
</html>Example analysis:
float:left - slides using floating block elements next to each other
display:block - displays links to block elements, making the whole into a clickable link area (not just the text), it allows us Specify width
width:60px - Block elements are max-width by default. We want to specify a width of 60 pixels
Next Section