网页导航栏设计-优快云博客

本文链接：https://blog.youkuaiyun.com/github_40094105/article/details/78157063

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>navbar</title>
</head>
<body>
<ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>
<p>注意：这里我们用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url。</p>
</body>
</html>

预览

垂直导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a
{
    display:block;
    width:60px;
    background-color:red;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

<p>背景颜色添加到链接中显示链接的区域</p>
<p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>
</html>

display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
请务必指定元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    width: 200px;
    background-color: #f1f1f1;
}
li a
{
    display:block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none；
}
li a:hover
{
    background-color: #555;
    color:white;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

<p>背景颜色添加到链接中显示链接的区域</p>
<p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>
</html>

激活/当前导航条实例

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    width: 200px;
    background-color: #f1f1f1;
}
li a
{
    display:block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a.active
{
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active)
{
    background-color: #555;
    color:white;
    font-size: 150%;
}
</style>
</head>

<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

<p>背景颜色添加到链接中显示链接的区域</p>
<p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>
</html>

让每个链接居中，并给每个列表选项添加边框。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    width: 200px;
    background-color: #f1f1f1;
    border:1px solid #555;<!--ul只修改外边框-->
}
li
{
    text-align:center;
    border-bottom:1px solid #555;<!--修改的每个li上的下边框-->
}
li:last-child
{
    border-bottom:none;<!--修改的li上的最后一个元素的下边框-->
}     
li a
{
    display:block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a.active
{
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active)
{
    background-color: #555;
    color:white;
    font-size: 150%;
}
</style>
</head>

<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

<p>背景颜色添加到链接中显示链接的区域</p>
<p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>
</html>

全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    width: 25%;
    background-color: #f1f1f1;
    position:fixed;
    height:100%;/* 全屏高度 */
    overflow:auto;/* 如果导航栏选项多，允许滚动 */


}
li
{
    text-align:center;

}
li:last-child
{
    border-bottom:none;<!--修改的li上的最后一个元素的下边框-->
}     
li a
{
    display:block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a.active
{
    background-color: #4CAF50;
    color: white;
}
li a:hover:not(.active)
{
    background-color: #555;
    color:white;
    font-size: 150%;
}
</style>
</head>

<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>
</body>
</html>

水平导航栏

想链接到具有相同的大小，你必须使用浮动的方法
内嵌列表项
横向导航栏的方法之一是指定元素，上述代码是标准的内嵌:
li
{
display:inline;
}
display:inline; -默认情况下，

元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>navbar</title>
<style >
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    padding-top:6px;
    padding-bottom:6px;
}
li
{
    display: inline;
}
a:link,a:visited
{
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:6px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color: yellow;

    color: red;
}   
</style>
</head>
<body>
<ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#new">新闻</a></li>
    <li><a href="#connebt">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>
<p><b>注意:</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。 </p>

</body>
</html>

浮动列表项

在上面的例子中链接有不同的宽度。
对于所有的链接宽度相等，浮动

元素，并指定为元素的宽度：

float:left - 使用浮动块元素的幻灯片彼此相邻
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

将导航条最右边的选项设置右对齐 (float:right;)：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float: right"><a class="active" href="#about">关于</a></li>
</ul>

</body>
</html>

将导航条最右边的选项设置右对齐 (float:right;)：

添加分割线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a href="#about">关于</a></li>
</ul>

</body>
</html>

固定导航条

可以设置页面的导航条固定在头部或者底部：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position:fixed;
    top:0;
    width:100%;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a href="#about">关于</a></li>
</ul>

</body>
</html>

固定在底部

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position:fixed;
    bottom:0; 
    width:100%;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a href="#about">关于</a></li>
</ul>

</body>
</html>

灰色水平导航条

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f3f3f3;
    position:fixed;
    top:0; 
    width:100%;
    border: 1px solid #e7e7e7;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a href="#about">关于</a></li>
</ul>

</body>
</html>