【CSS 13】长文总结 navbar导航栏 垂直 水平 行内 浮动 响应式 overflow: hidden

最新推荐文章于 2024-05-05 10:55:46 发布
最新推荐文章于 2024-05-05 10:55:46 发布
阅读量999 收藏 3
点赞数 1
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62629457/article/details/131442802
版权

CSS

navbar 导航栏

易用的导航对于任何网站都很重要
通过使用 CSS 可以将无聊的 HTML 菜单转换为美观的导航栏

导航栏 = 链接列表
导航栏需要标准 HTML 作为基础
在我们的实例中，将用标准的 HTML 列表构建导航栏
导航栏基本上就是链接列表，因此使用

  • 和
  • 元素会很有意义

<!DOCTYPE html>
<html>
<body>

<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#news">News</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

<p class="note"><span>注释:</span>将href="#'用于测试链接，在实际网站中使用的是URL</p>
</body>
</html>

从列表中删除项目符号及其默认的外边距和内边距（填充）

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
/*
list-style-type: none; - 删除项目符号，导航条不需要列表项标记

设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置

上例中的代码是垂直和水平导航栏中使用的标准代码
*/

vertical navbar 垂直导航栏

/* 
构建垂直导航栏可以在列表中设置 <a> 元素的样式

背景色被添加到链接以显示链接区域
注意整个链接区域都是可单击的而不仅仅是文本 display: block
*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 60px;
}

li a {
	display: block;
	width: 60px;
	background-color: #dddddd;
}

/*
display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）

width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度
*/

垂直导航栏实例
创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色

<!DOCTYPE html>
<html>
<head>
<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;
}

/*Change the link color on hover*/
li a:hover {
	background-color: #555;
	color: white;
}

</style>
</head>
<body>

<h1>垂直导航栏</h1>

<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#news">News</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

</body>
</html>

当前导航链接
向当前链接添加 “active” 类，以使用户知道他/她在哪个页面上

<!DOCTYPE html>
<html>
<head>
<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;
}
</style>
</head>
<body>

<h1>垂直导航栏</h1>
<p>在此例中创建一个具有绿色背景色和白色文本的 "active" 类<br>该类将添加到 "Home" 链接</p>

<ul>
	<li><a class="active" href="#home">Home</a></li>
	<li><a href="#news">News</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

</body>
</html>

居中链接以及添加边框

/*
把 text-align:center 添加到 <li> 或 <a>，使链接居中
将 border 属性添加到 <ul>，在导航栏周围添加边框
如果还希望在导航栏内添加边框，请为所有 <li> 元素添加 border-bottom，最后一个元素除外
*/

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: #555;
	color: white;
}

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

全高固定垂直导航栏
创建全高的“粘性”侧面导航

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; /*margin也行，但是显示效果会不同，可以自己尝试*/
	text-decoration: none;
}

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

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

/*
尝试滚动此区域，并查看 sidenav 如何粘在页面上
此 div 元素的左外边距为 25％。这是因为侧导航栏被设置为 25％ 宽
如果删除这个外边距，则 sidenav 将叠加到该 div 上

还要注意，我们已为 sidenav 设置 overflow：auto
如果 sidenav 太长时（例如，如果其中有超过 50 个链接），会添加滚动条
*/

horizontal navbar 水平导航栏

有两种创建水平导航栏的方法：使用行内或浮动列表项

/*
行内列表项
构建水平导航栏的一种方法是，除了“标准”代码外，还要将 <li> 元素指定为 inline：
*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li {
	display: inline;	
}

/*
display: inline; - 默认情况下，<li> 元素是块元素
在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行
*/

浮动列表项

/*
创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接规定布局
如果未指定 !DOCTYPE，则浮动项目可能会产生意外结果
背景色被添加到链接以显示链接区域
整个链接区域都是可单击的，而不仅仅是文本
overflow:hidden 被添加到 ul 元素，以防止 li 元素超出列表

float: left; - 使用 float 使块元素滑动为彼此相邻
display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）
padding: 8px; - 使块元素更美观
background-color: #dddddd; - 为每个元素添加灰色背景色

如需全宽的背景色，请将 background-color 添加到 <ul> 而不是每个 <a> 元素
*/

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

li {
	float: left;
}

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

li a:hover {
	background-color: #555;
	color: white;
}

水平导航栏实例
创建具有深色背景色的基础水平导航栏，并在用户将鼠标移到链接上方时改变链接的背景色

<!-- 
ul中的margin是调整ul块级元素距离页面的外边距
ul中的padding则是调整ul块级元素与其子元素的内边距，删掉之后还会由于子元素外边距的存在而含有间隙距离

overflow: hidden 这句代码非常重要
-->
<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>

右对齐链接
通过将列表项向右浮动来右对齐链接（float:right;）

<!DOCTYPE html>
<html>
<head>
<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">Home</a></li>
	<li><a href="#news">News</a></li>
	<li><a href="#contact">Contact</a></li>
	<li style="float: right"><a class="active" href="#about">About</a></li>
</ul>
</body>
</html>

边框分隔栏

/*
将 border-right 属性添加到 <li>，以创建链接分隔符
*/

/* 
为所有列表项添加灰色右边框，最后一项（last-child）除外 */
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;
	text-decoration: none;
	padding: 14px 16px;
}

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

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

固定导航栏
使导航栏保持在页面的顶部或底部，即使用户滚动页面也是如此

/*
固定的顶部导航栏
滚动页面以查看效果
页面滚动时导航栏将位于页面顶部
*/
body {
	margin: 0;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	position: fixed;
	top: 0; /*否则会留有上部空隙*/
	/* bottom: 0;  固定在底部 */
	/* 固定定位在移动设备上可能无法正常工作 */
	width: 100%;
}

li {
	float: left;
}

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

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

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

粘性导航栏

/*
为 <ul> 添加 position: sticky;，以创建粘性导航栏
粘性元素会根据滚动位置在相对和固定之间切换
它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）

Internet Explorer、Edge 15 和更早版本不支持粘性定位
Safari 需要 -webkit- 前缀
还必须指定 top、right、bottom 或 left 至少之一，以使粘性定位起作用
*/

body {
	font-size: 28px;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
}

li {
	float: left;
}

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

li a:hover {
	background-color: #111;
}

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

响应式上导航栏

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}

ul.topnav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
}

ul.topnav li {float: left;}

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

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

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

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {
	ul.topnav li.right,
	ul.topnav li {float: none;}
}
</style>
</head>
<body>

<ul class="topnav">
	<li><a class="active" href="#home">Home</a></li>
	<li><a href="#news">News</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
</ul>

<div style="padding: 0 16px;">
	<h1>响应式顶部导航栏实例</h1>
	<p>此示例使用媒体查询在屏幕尺寸小于或等于 600 像素时垂直堆叠 topnav</p>
	<p>之后将学到有关媒体查询和响应式 Web 设计的更多知识</p>
	<p><b>调整浏览器窗口大小来查看效果</b></p>
</div>

</body>
</html>

overflow: hidden

overflow: hidden 拥有三个作用

  1. 超出边框部分隐藏
  2. 清除浮动
  3. 解决边框塌陷

1
overflow: scroll 显示滚动条
overflow: auto 超出显示滚动条

2
当不给父级元素设置高度的时候，其内部元素浮动后会导致下面的元素顶上
这是因为子元素浮动后脱离标准流，从而不占位，而父元素检测不到子元素的大小，高度为0

Zanebla
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery垂直导航菜单带筛选代码js代码.zip
05-15
jQuery垂直导航菜单，带筛选导航菜单的功能，带二级三级树形结构菜单，动画交互流畅，非常不错的源码，值得收藏。
Navbar-css-html:基本HTML + Css响应式导航栏
04-07
Navbar-css-html 基本HTML + Css响应式导航栏 基本的响应式导航栏
CSS技能点--垂直导航栏实例
程序员大阳
07-21 2310
垂直导航栏可以说是相当常见，尤其是在一些管理系统中，左侧往往是一个垂直导航栏，便于用户快速切换菜单。 本篇就来实现一个简单的垂直导航栏
CSS 导航栏
梁辰兴的博客
09-20 1504
CSS导航栏是网站中一个基本的组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。CSS导航栏一般由选项列表、子选项列表和搜索框等组成。选项列表是可以点击的链接，子选项列表是鼠标滑过选项列表时出现的更详细的列表，搜索框便于用户搜索目标内容。除此之外，还可以添加LOGO等元素来增加导航栏的个性化。CSS可以设置导航栏的各种外观，包括背景色、宽度、高度、边框等，通过调整这些属性可以使得导航栏更加美观易用。
CSS学习笔记——ul样式overflow:hidden在设置水平导航栏中的作用
Jane的博客
12-24 1353
参考：https://www.zhihu.com/question/30797901/answer/1463648152 水平导航栏可以用 float 实现：几个浮动的元素放到一起，如果有空间，它们将彼此相邻。实例如下： ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; /*它的作用是什么？*/ background-color: #777; } ul li { flo
CSS基础学习--18 导航栏
yyxhzdm的博客
06-18 2430
如果要在每个选项上添加边框，可以在每个 元素上添加。导航条基本上是一个链接列表，所以使用 和 元素非常有意义。这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。对于所有的链接宽度相等，浮动 元素，并指定为 元素的宽度。接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。在我们的例子中我们将建立一个标准的 HTML 列表导航栏。我们只需要 元素的样式，建立一个垂直的导航栏。在上面的例子中链接有不同的宽度。
CSS基础-14-水平导航栏（示例及详细创建过程）
运维玄德公
04-26 1034
1. 内联列表实现 2. 浮动列表实现 3. 添加边框 3.1 思路 3.2 实际效果 4. 添加分割线 5. 固定导航栏
CSS基础-13-垂直导航栏（详细创建过程）
运维玄德公
04-26 3217
1. 最简导航栏 2 添加鼠标改变背景色 3 给首页添加颜色 4 加边框 4.1 思路 4.2 实际代码 5 全屏高度固定导航条 5.1 思路 5.2 实际代码
PHP基础学习第十一篇（CSS垂直导航栏、水平导航栏、下拉菜单、提示工具）
xiaomoge__的博客
10-04 1822
CSS垂直导航栏、水平导航栏、下拉菜单、提示工具的总体设置
纵向导航css设置主要属性,CSS 导航
weixin_39924486的博客
08-04 375
CSS 导航GUI下有一个导航栏或导航系统，可帮助访问者访问信息。它是网页上的UI元素，其中包含网站其他部分的链接。导航栏通常以水平链接列表的形式显示在页面顶部。可以将其放置在徽标或标题的下方，但应始终将其放置在网页的主要内容之前。使用易于使用的导航对于网站很重要。它在网站中起着重要作用，因为它允许访问者快速访问任何部分。让我们详细讨论水平导航栏和垂直导航栏。水平导航栏水平导航栏是水平链接列表，通...
深度长文：我对CQRS/EventSourcing架构的思考
02-20
微服务架构现在很热，到处可以看到各大互联网公司的微服务实践的分享总结。但是，我今天的分享和微服务没有关系，希望可以带给大家一些新的东西。如果一定要说微服务和CQRS架构的关系，那我觉得微服务是一种边界思维...
万字长文：产品经理你必须掌握的用户体验五大层
02-25
今天为大家带来的是用户体验五大层，网上多见的都是一些概念、或者笼统的介绍。今天谈一下自己的浅薄见解。首先在进行战略定位的时候，要问自己、团队、企业几个基本问题。我们有什么资源？（资金、人脉、团队、技术...
挑战一轮大厂后的面试总结 (含六个方向) – css 篇
01-20
在去年底开始换工作，直到现在算是告了一个段落，断断续续的也面试了不少公司，现在回想起来，那段时间经历了被面试官手撕，被笔试题狂...面试总结：javascript 面试点汇总(万字长文)(已完成) 强烈大家看看这篇，面试中
【纯html+css垂直导航栏代码】
weixin_52218117的博客
07-18 4474
【纯html+css垂直导航栏代码】
html页脚导航栏,Rails 建立 navbar(导航栏) 与 footer(页脚)
weixin_36106852的博客
06-04 412
安装 BootstrapStep 1. 挂上 bootstrap-sass 这个 gemGemfilegem 'bootstrap-sass'执行 bundle install(注意：修改完 Gemfile 都要执行 bundle install)Step 2. 将 Bootstrap 的 CSS 套件装进专案里面在终端输入 mv app/assets/stylesheets/applicatio...
浮动和定位
KaisonYi的博客
04-10 1140
浮动的定义 因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间 浮动元素并不是完全的脱离文档流 注意和absolute不同 块级元素浮动宽度收缩 浮动元素使得块级元素进行宽的收缩，也使得行...
CSS导航栏的实现（水平的、垂直的、固定的、粘贴的、响应式，下拉菜单导航栏实现案例）
热门推荐
qq_30906791的博客
11-03 1万+
0. 导航栏 创建导航栏之前需要掌握列表的样式以及链接的样式，因为：导航栏=链接列表，链接列表使用到列表和超链接 1. 垂直导航栏 垂直导航栏使用到的是垂直列表 设置导航栏的背景色为gray灰色 设置正常字体为黑色，悬停字体为白色 设置导航栏悬停时更改背景色为green绿色 将列表项中的超链接设置为有合适长度和宽度的元素 添加激活列表项始终是背景色为green绿色，字体白色 将超链接中的的文本内容居中 添加超链接的边框 在原来导航栏的基础上可以将导航栏设置为高度百分之百，宽度固定 创建具有灰色背景色
css导航栏_CSS：创建导航栏
cunfen6312的博客
07-28 990
css导航栏 CSS：创建导航栏 (CSS: Creating Navigation Bars) Every website needs a navgation bar to help visitors navigate around the website. This is generally accomplished by putting a top horizontal navigatio...
CSS 选择器知识点总结
最新发布
weixin_40348267的博客
05-05 953
但是记得不可滥用!选择器是 CSS 中的关键部分，允许你精确地定位和样式化特定的元素或元素组。这篇文章的内容是 CSS 的选择器，这是写页面样式的第一步，知道 CSS 有哪些选择器是每个前端工程师必会的内容之一。：没有特定性或源代码顺序的概念，但需要注意的是某些样式属性具有继承性，例如字体属性，它们可以从父元素继承到子元素。这些是 CSS 的常用选择器，将这些选择器组合起来使用，或者是嵌套使用可以改变选择器的权重。a：内联样式（在元素的 style 属性中定义的样式）的数量（权重值最高，值为1000）。
android studio怎么放入长文
08-30
你可以将长文放入Android Studio中的多种方式，以下是其中几种常见的方法： 1. 创建一个文本文件：在项目结构中，右键点击你想要放置长文的目录，选择 "New" -> "File"。然后给文件命名，并将长文的内容粘贴到新...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zanebla

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值