CSS navigation bar

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

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

CSS navigation bar

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]