web前端学习（二十七）——CSS3导航栏的相关设置

news/2025/2/26 7:41:45

1.CSS导航栏

垂直

水平

导航栏

熟练使用导航栏，对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

2.导航栏==链接列表 

作为标准的HTML基础一个导航栏是必须的，在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

  • list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
  • 移除浏览器的默认设置将边距（margin）和填充（padding）设置为0
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>CSS简单学习</title>
		<style type="text/css">
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
		</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>注意：这里我们用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url。</p>
	</body>
</html>

3.垂直导航栏

display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a:link,a:visited {
				display: block;
				padding: 4px;
				width: 120px;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				text-transform: uppercase;
				color: white;
				background-color: seagreen;
			}
			a:hover,a:active {
				background-color: limegreen;
			}
		</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>

4.激活当前导航条

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				width: 200px;
				background-color: lightgrey;
			}
			li a {
				display: block;
				color: #000000;
				padding: 6px 15px;
				text-decoration: none;
			}
			li a.active {
				background-color: green;
				color: white;
			}
			li a:hover:not(.active) {
				background-color: dimgray;
				color: white;
			}
		</style>
	</head>
	
	<body>
		<h2>垂直导航条</h2>
		<p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p>
		<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>

5.创建链接并添加边框

可以在 <li> or <a> 上添加 text-align:center 样式来让链接居中。

可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加 border-bottom 。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				width: 200px;
				background-color: whitesmoke;
				border: 1px solid dimgrey;
			}
			li a {
				display: block;
				color: #000000;
				padding: 6px 15px;
				text-decoration: none;
			}
			li {
				text-align: center;
				border-bottom: 1px solid dimgrey;
			}
			li:last-child {
				border-bottom: none;
			}
			li a.active {
				background-color: #008000;
				color: white;
			}
			li a:hover:not(.active) {
				background-color: dimgrey;
				color: white;
			}
		</style>
	</head>
	
	<body>
		<h2>垂直导航条</h2>
		<p>以下实例让每个链接居中，并给每个列表选项添加边框。</p>
		<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>

6.全屏高度的固定导航条

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			body {
				margin: 0;
			}
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				width: 15%;
				height: 100%;
				overflow: auto;
				position: fixed;
				background-color: darkgray;
			}
			li a {
				display: block;
				text-decoration: none;
				padding: 8px 15px;
				color: #000000;
			}
			li a.active {
				background-color: #008000;
				color: white;
			}
			li a:hover:not(.active) {
				background-color: dimgrey;
				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:15%; 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 15%. This is because the side navigation is set to 15% 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>

7.水平导航栏

有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: dodgerblue;
			}
			li {
				float: left;
			}
			li a {
				display: block;
				text-decoration: none;
				text-align: center;
				padding: 15px 16px;
				color: white;
			}
			/*li a:hover {
				background-color: skyblue;
			}*/
			li a:hover:not(.active) {
				background-color: skyblue;
				color: white;
			}
			.active {
				background-color: #008000;
				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>
			<!--
				<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>

将4个列表项换成代码中注释部分的时候，将会出现如下结果：👇👇👇

8.在导航条之间添加分割线

<li> 通过 border-right 样式来添加分割线。 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: red;
			}
			li {
				float: left;
				border-right: 1px solid papayawhip;
			}
			li:last-child {
				border-right: none;
			}
			li a {
				display: block;
				text-align: center;
				text-decoration: none;
				padding: 15px 16px;
				color: white;
			}
			li a:hover:not(.active) {
				background-color: orange;
				color: white;
			}
			.active {
				background-color: #1E90FF;
			}
		</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>

9.将导航栏固定在顶部（top：0;）或底部（bottom：0;）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			body {
				margin: 0;
			}
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				width: 100%;
				position: fixed;
				overflow: hidden;
				background-color: black;
				top: 0;
				/*bottom: 0;*/
			}
			li {
				float: left;
			}
			li a {
				display: block;
				text-align: center;
				text-decoration: none;
				padding: 14px 16px;
				color: white;
			}
			li a:hover:not(.active) {
				background-color: red;
				color: white;
			}
			.active {
				background-color: blue;
				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="padding:20px; margin-top:30px; background-color:#1abc9c; height:1500px;">
		<!-- 当使用代码第19行的注释时，可将上方div内联样式中的第二个换成margin-bottom:30px; 
			 此时运行结果网页的导航栏将位于底部 -->
			<h1>Fixed Top Navigation Bar</h1>
			<h2>Scroll this page to see the effect</h2>
			<h2>The navigation bar will stay at the top of the page while scrolling</h2>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
			<p>Some text some text some text some text..</p>
		</div>
	</body>
</html>

将代码中的第18行用第19行的注释替换，同时根据代码第51行的注释，修改div标签中的内容，即可得到如下的运行结果：👇👇👇

 


http://www.niftyadmin.cn/n/712246.html

相关文章

ABP官方文档翻译 7.2 Hangfire集成

ABP官方文档翻译 7.2 Hangfire集成

Hangfire集成 介绍ASP.NET Core集成ASP.NET MVC 5.x集成 面板授权介绍 Hangfire是一个综合的后台job管理器。你可以 把它集成到ABP&#xff0c;用来取代默认的后台job管理器。Hangfire可以使用相同的后台jobAPI。因此&#xff0c;你的代码与Hangfire是独立的。但是&#xff0c;…
阅读更多...
vscode还用装git_VScode 搭配Git

vscode还用装git_VScode 搭配Git

VScode搭配Git一、Visual Studio Code安装Windows版下载地址2、安装一般默认下一步即可3、安装完&#xff0c;默认语言为英文&#xff0c;需要安装中文语言&#xff0c;步骤如下(1)点击左侧的小方块(拓展)(2)搜索框输入“Chinese”,点击“Install”(3)稍等一会&#xff0c;软件…
阅读更多...
一步一步学习Redis——五大数据类型之哈希（Hash）的相关命令

一步一步学习Redis——五大数据类型之哈希（Hash）的相关命令

文章目录&#xff1a; 1.开篇 2.Redis哈希&#xff08;Hash&#xff09;的相关命令 2.1 HSET命令 语法 返回值 2.2 HGET命令 语法 返回值 2.3 HMSET命令 语法 返回值 2.4 HMGET命令 语法 返回值 2.5 HSETNX命令 语法 返回值 2.6 HDEL命令 语法 返回值 …
阅读更多...
从java中安装webolgc_Javaweb| 文件下载

从java中安装webolgc_Javaweb| 文件下载

后台&#xff1a;Conteoller/*** 下载文件* param fileurl* param session* param response* throws IOException*/RequestMapping("/download")public void getFile(String fileurl, HttpSession session, HttpServletResponse response)throws IOException {Strin…
阅读更多...
Git-命令的使用

Git-命令的使用

2019独角兽企业重金招聘Python工程师标准>>> 丢弃历史 如现有提交历史: A->B->C->D->E->F,欲丢弃 C 之前的提交历史使得历史记录变为: C->D->E->F,则此时:基于 C 创建一个根提交,可以使用 git commit-tree将 D,E,F 变基到刚创建的根提交上.…
阅读更多...
Java内部抽象类的匿名类初始化

Java内部抽象类的匿名类初始化

说在前面的话&#xff0c;以前写过一次这个变态代码&#xff0c;后来重构&#xff0c;把那个new的语法简化了&#xff0c;最近又要整&#xff0c;差点都想不起来了&#xff0c;留个文档把 1、下面这个案例更变态&#xff0c;抽象类还有一个个泛型类&#xff1a;首先内部抽象类的…
阅读更多...
matebook14支持触摸屏吗_2020款的matebook14增加了多点触控屏是最大亮点

matebook14支持触摸屏吗_2020款的matebook14增加了多点触控屏是最大亮点

华为matebook14终于获得了Windows的授权&#xff0c;而且更新十代酷睿处理器&#xff0c;更加值得一提的是&#xff0c;MateBook13/14版新增了触屏这一操作黑科技&#xff0c;也就是说&#xff0c;我们以后用的电脑也可以像手机一样&#xff0c;直接用手触屏操作。比如我们想放…
阅读更多...
简单邮箱源码java_简单的java实现发送电子邮件

简单邮箱源码java_简单的java实现发送电子邮件

这里实现用Java发送电子邮件&#xff0c;可以发送简单文本&#xff0c;或者html&#xff0c;再或者就是带附件了。首先就是需要两个包&#xff0c;我用的是apache中commons中的&#xff0c;下载地址http://commons.apache.org/可以去下载。需要的两个包为&#xff1a;mail.jar、…
阅读更多...
最新文章

Copyright @ 2022~2023