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

文章目录

前言
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>

效果

posted on 2022-04-26 22:42 运维开发玄德公阅读(65) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS基础-14-水平导航栏（示例及详细创建过程）

· HTML基础-09-布局（使用＜div＞实现，使用＜table＞实现）

· 8-2·100 css导航栏垂直导航栏

· 静态页面的导航栏制作

· 制作导航栏并用CSS美化

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术