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>

效果

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

CSS技能点--垂直导航栏实例
点此查看所有教程.项目.源码导航文章目录 1. 背景 2. 实现过程 2.1 创建ul导航栏 2.2 优化列表样式 2.3 设置导航栏整体风格 2.4 优化超级链接样式 2.5 添加图标 2.6 ...
css:动画高级垂直导航栏王者荣耀导航栏
垂直导航栏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
【纯html+css垂直导航栏代码】
纯html+css垂直导航栏代码 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
前端组件从零之垂直导航栏
今天继续组件文章的分享.结合上一次讲到的水平导航栏,今天就讲讲垂直导航栏.其实原理和水平导航栏原理其实差不多类似,那么就来谈谈. 说到垂直导航栏,用到最多的地方就是电商网页,特别像淘宝,天猫,京东,苏 ...
使用html，css实现简单的导航栏
标题:使用html,css实现简单的导航栏一.实现过程首先通过ul,li实现一个无序列表,添加背景得到如图所示的样式[文档流] 让li浮动,使得垂直排列–>水平排列,[注意需要开启bfc,让 ...
水平导航栏和垂直导航栏
效果图: 垂直导航栏: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
html+css实现页面顶部导航栏
最终效果如下: 接下来,我将从html和css两大部分,逐步为您讲解制作过程目录 Html 实现布局创建父栏目创建子栏目插入外部样式表,为接下来的css编辑做准备 Css 实现样式排布文本, ...
php导航条css代码生成器,怎么使用css代码制作网站导航栏？（示例）
本篇文章主要给大家介绍关于如何用css做导航栏的相关知识,希望对有需要的朋友有所帮助.对于任何一个网站来说,导航栏的存在是至关重要的,那么如果仅仅只是用html做出枯燥乏味的导航菜单,效果肯定是不佳的 ...
直播app开发搭建，纯css/html实现侧边导航栏
直播app开发搭建,纯css/html实现侧边导航栏 css代码: *{margin: 0px;padding: 0px;}#box{position: absolute;height: 300px; ...

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

文章目录

前言

1. 最简导航栏

2 添加鼠标改变背景色

3 给首页添加颜色

4 加边框

4.1 思路

4.2 实际代码

5 全屏高度固定导航条

5.1 思路

5.2 实际代码

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

最新文章

热门文章