CSS基础-13-垂直导航栏（详细创建过程）

玄德公笔记

已于 2022-11-18 23:53:52 修改

阅读量3.4k

点赞数 5

分类专栏： # CSS基础教程文章标签： css css3 html 垂直导航栏导航栏

于 2022-04-26 22:41:51 首次发布

本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123538193

版权

CSS基础教程专栏收录该内容

19 篇文章 3 订阅

订阅专栏

文章目录

前言
1. 最简导航栏
2 添加鼠标改变背景色
3 给首页添加颜色
4 加边框
- 4.1 思路
- 4.2 实际代码
5 全屏高度固定导航条
- 5.1 思路
- 5.2 实际代码

前言

一步一步做出一个完整的导航栏

1. 最简导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>hello world</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;
}
 
</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>

</body>
</html>

效果

在这里插入图片描述

2 添加鼠标改变背景色

< head > 的< style >中添加如下内容

/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

效果

3 给首页添加颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</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;
}
/* not(.active) 表示排除了a.active（即鼠标移到a.active的对象时不生效） */
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</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>

效果

首页添加了新的效果
切鼠标移动到首页时，该效果不变。

在这里插入图片描述

4 加边框

4.1 思路

问题
如果直接给每个 li 都加框的话，相邻li中间会有两条线，很难看

li {
    text-align: center;
    border: 1px solid #555;
}

因此，我没先给ul加个外框

ul {
    ……
    border: 1px solid #555;
}

再给每个 a 加下边框

li {
    ……
    border-bottom: 1px solid #555;
}

此时，最后一个a的下边框和 ul的下边框重合，我们去掉最后一个a的下边框：

4.2 实际代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

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

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</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>

效果

5 全屏高度固定导航条

5.1 思路

给body去掉外部距离

body {
    margin: 0;
}

设置 ul 为全屏高度

ul {
    ……
    height: 100%;
    overflow: auto;
}

5.2 实际代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

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;
}
</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>标题</h2> 
  <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>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>
</html>