前端笔记HTML5+CSS3——导航栏navigator

最新推荐文章于 2023-12-23 23:46:51 发布
最新推荐文章于 2023-12-23 23:46:51 发布
阅读量1.6k 收藏 13
点赞数 3
分类专栏： HTML+CSS 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42294351/article/details/112257378
版权

文章目录

导航栏一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,div,ul,li{
				margin: 0;
				padding: 0;
			}
			#nav{/*设置最外面的div属性*/
				width: 960px;/*宽*/
				height: 35px;/*高*/
				background-color: #E7E7E7;/*背景颜色*/
				margin: 0 auto;/*div对齐方式居中*/
				margin-top: 30px;/*上边距*/
			}
			#nav ul{/*设置大框架div里面ul标签的属性*/
				width: 960px;/*宽*/
				height: 35px;/*高*/
			}
			#nav ul li{/*设置ul里面的li标签的属性*/
				float: left;/*左浮动*/
				list-style: none;/*去掉圆点*/
				/*width: 100px;*/
				background-color: #E7E7E7;
				height: 35px;
				text-align: center;/*水平居中*/
				line-height: 35px;/*垂直居中*/
				/*padding: 0 10px;/* 上下  左右*/
				/*border: 1px solid #000; /*边框*/
			}
			#nav ul li a{/*设置li里面a标签的属性*/
				font-size: 14px;/*大小*/
				color: #8790A1;
				text-decoration: none;/*去掉超链接下划线*/
				display: block;/*内联元素变为块元素*/
				float:left;
				height: 35px;
				padding: 0 10px;
			}
			#nav ul li a:hover{/*设置a标签的鼠标触碰效果，鼠标放上去出现效果*/
				background-color: #85CE02;
				color: #ffffff;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<!--ul>(li>a)*6 按tab-->
			<ul>  
				<li><a href="#">阿里巴巴</a></li>
				<li><a href="#">腾讯</a></li>
				<li><a href="#">百度</a></li>
				<li><a href="#">小米</a></li>
				<li><a href="#">今日头条</a></li>
				<li><a href="#">微软</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述

导航栏二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,div,ul,li{
				margin: 0;
				padding: 0;
			}
			#nav{
				width: 960px;
				height: 35px;
				background-color: #E7E7E7;
				margin: 0 auto;/*居中*/
				margin-top: 30px;
			}
			#nav ul{
				width: 960px;
				height: 35px;
				
			}
			#nav ul li{
				float: left;
				list-style: none;/*去掉圆点*/
				/*background-color: #E7E7E7;*/
				background-image: url(img/nav_back2.jpg);
				height: 35px;
				text-align: center;/*水平居中*/
				line-height: 35px;/*垂直居中*/
			}
			#nav ul li a{
				font-size: 14px;/*大小*/
				color: #8790A1;
				text-decoration: none;/*去掉超链接下划线*/
				display: block;/*变为块元素*/
				float:left;
				height: 35px;
				padding: 0 10px;
			}
			#nav ul li a:hover{/*鼠标放上去出现效果*/
				background-color: #646464;
				color: #ffffff;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<!--ul>(li>a)*6 按tab-->
			<ul>  
				<li><a href="#">阿里巴巴</a></li>
				<li><a href="#">腾讯</a></li>
				<li><a href="#">百度</a></li>
				<li><a href="#">小米</a></li>
				<li><a href="#">今日头条</a></li>
				<li><a href="#">微软</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述

导航栏三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,div,ul,li{
				margin: 0;
				padding: 0;
			}
			#nav{
				width: 960px;
				height: 35px;
				background-color: #E7E7E7;
				margin: 0 auto;/*居中*/
				margin-top: 30px;
			}
			#nav ul{
				width: 960px;
				height: 35px;
				
			}
			#nav ul li{
				float: left;
				list-style: none;/*去掉圆点*/
				background-color: #646464;
				/*background-image: url(img/nav_back2.jpg);*/
				height: 35px;
				text-align: center;/*水平居中*/
				line-height: 35px;/*垂直居中*/
				margin-right: 1px;
			}
			#nav ul li a{
				font-size: 14px;/*大小*/
				color: #FFF;
				text-decoration: none;/*去掉超链接下划线*/
				display: block;/*变为块元素*/
				float:left;
				height: 35px;
				padding: 0 10px;
			}
			#nav ul li a:hover{/*鼠标放上去出现效果*/
				background-color: #E7E7E7;
				color: #8790A1;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<!--ul>(li>a)*6 按tab-->
			<ul>  
				<li><a href="#">阿里巴巴</a></li>
				<li><a href="#">腾讯</a></li>
				<li><a href="#">百度</a></li>
				<li><a href="#">小米</a></li>
				<li><a href="#">今日头条</a></li>
				<li><a href="#">微软</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述

导航栏四

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,div,ul,li{
				margin: 0;
				padding: 0;
			}
			#nav{
				width: 960px;
				height: 35px;
				background-color: #E7E7E7;
				margin: 0 auto;/*居中*/
				margin-top: 30px;
				border-radius: 5px;
			}
			#nav ul{
				width: 960px;
				height: 35px;
				border-radius: 5px;
			}
			#nav ul li{
				float: left;
				list-style: none;/*去掉圆点*/
				background-color: #E7E7E7;
				/*background-image: url(img/nav_back2.jpg);*/
				height: 35px;
				text-align: center;/*水平居中*/
				line-height: 35px;/*垂直居中*/
				margin-right: 1px;
			}
			#nav ul li a{
				font-size: 14px;/*大小*/
				color: #8790A1;
				text-decoration: none;/*去掉超链接下划线*/
				display: block;/*变为块元素*/
				float:left;
				height: 35px;
				padding: 0 10px;
			}
			#nav ul li a:hover{/*鼠标放上去出现效果*/
				background-color: #85CE02;
				color: #FFF;
				font-size: 15px;
				border-radius: 5px;/*圆角*/
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<!--ul>(li>a)*6 按tab-->
			<ul>  
				<li><a href="#">阿里巴巴</a></li>
				<li><a href="#">腾讯</a></li>
				<li><a href="#">百度</a></li>
				<li><a href="#">小米</a></li>
				<li><a href="#">今日头条</a></li>
				<li><a href="#">微软</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果
在这里插入图片描述

lesin X
关注
专栏目录
HTML5+CSS3实例源码（包含20个）
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们共同为网页设计师和开发者提供了丰富的功能和优雅的样式控制。此压缩包包含20个精心设计的HTML5与CSS3实战示例，旨在帮助学习者更好地理解和应用这两种技术。 HTML5...
html5的navigator,React Native中Navigator组件的使用教程
weixin_36438989的博客
07-02 748
Navigator导航器，该组件控制不同场景之间的切换。它通过路由对象来分辨不同的场景。renderScene 方法，接收route、navigator参数，并据此渲染场景。configureScene 属性export default class SampleComponent extends React.Component {render() {let defaultName = 'First...
html浏览器状态栏控制,HTML5+规范：navigator(管理浏览器运行环境信息)
weixin_35969684的博客
05-31 2111
navigator用于管理运行环境信息1、方法1.1、checkpermission: 检查运行环境的权限string plus.navigator.checkpermission( permission );说明：向检查当前程序的权限状态，不触发权限相对应的功能api的调用。参数：permission: ( permissionnames) 必选 要检查的权限名称返回值：string : 可返回...
页面跳转_小程序里页面跳转的两种方式
weixin_29179311的博客
01-11 519
我们在小程序里做页面跳转有两种方式•1，借助navigator组件•2，借助wx.自带方法，在点击的时候做页面跳转 如下图所示的几个wx.方法19-1，navigator实现页面跳转navigator其实和我们html里的a标签有点像，也是为了实现页面跳转的。官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/naviga...
html5+ navigator-浏览器运行环境
wlor的博客
10-09 2755
navigator-浏览器运行环境 navigator用于管理浏览器运行环境信息 方法： checkPermission: 检查运行环境的权限 closeSplashscreen: 关闭应用启动界面 hasSplashscreen: 查询应用启动界面是否已关闭 updateSplashscreen: 更新程序启动界面 createShortcut: 创建应用快捷方式 hasShortcut: 查...
【前端WEB】2、使用HTML+CSS+JS实现网页侧边导航栏效果（原创含源码）
weixin_52938153的博客
12-23 7339
侧边导航栏是现代网页设计中常用的一种元素，它通过优化页面结构，使用户能够轻松访问网站的不同部分。我们将通过具体的例子来展示如何创建一个具有良好用户界面和交互体验的侧边导航栏。以上就是今天要讲的内容，本文仅仅简单介绍了HTML前端页面的侧边栏的使用，而CSS提供了具体的样式，可以自己进行调节，JS实现了当用户点击侧边按钮即跳转。如需其他示例或有问题欢迎评论！！本人看到都会回复。
HTML5 + CSS3 标准课件 PPT
02-17
HTML5和CSS3是现代网页开发的两大核心技术，它们极大地扩展了Web开发的潜力和表现力。本标准课件PPT全面涵盖了这两个领域的关键知识点，旨在帮助学习者深入理解和掌握这些技能。 首先，HTML5（超文本标记语言第五版...
HTML5+CSS3第五天.xmind
最新发布
08-08
HTML5+CSS3知识总结： canvas坐标： 画图的基本步骤： 1.创建画布 2.获取画布 3.开始路径规划 4.规定画笔颜色 5.规定画笔粗细 6.开始作画 7.路径闭合 8.绘制描边 9.颜色填充 将图片画到画布上： 1.创建...
HTML5+CSS样式从入门到精通
11-27
HTML5和CSS是现代网页开发的核心技术，它们的结合使得开发者能够创建出功能丰富、视觉效果出众的网页。本资源“HTML5+CSS样式从入门到精通”旨在为初学者提供一套全面的学习路径，帮助他们从零基础快速掌握这两项...
疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码
11-19
6.5　CSS 3新增的伪类选择器 176 6.6　在脚本中修改显示样式 195 6.7　本章小结 197 第7章　字体与文本相关属性 198 7.1　字体相关属性 199 7.2　CSS 3支持的颜色表示方法 205 7.3　文本相关属性 206 7.4　CSS 3新增...
【HTML&&CSS】设置导航栏
小吉妙妙屋
06-12 2019
详细讲解网页的导航栏的设置方法
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-05 9045
一、盒子测量及样式 1、总体盒子测量及样式 2、左侧盒子测量及样式 3、中间盒子测量及样式 4、右侧盒子测量及样式 二、横版导航栏代码示例 1、HTML 标签结构 2、CSS 样式 3、显示效果
使用 HTML、CSS 和 JavaScript 创建侧边栏导航菜单
我的博客，不一样的自我表达
05-23 647
在本教程中，我们将使用 HTML、CSS 和 JavaScript 创建侧边栏导航菜单。元素定位在浏览器窗口之外，因此在加载页面时它是不可见的。该元素的样式已被设计为填充页面的整个宽度，并在左右边距上填充一些内容。如果您的侧边栏需要不同的宽度，则需要将230pxCSS 中的所有实例替换为您需要的宽度。接下来是包含虚拟内容的元素和一个将在单击时切换侧边栏可见性的元素。这就是本教程的全部内容，您现在应该有一个侧边栏导航菜单的工作示例。如果您喜欢本教程，为什么不考虑关注我的时事通讯，以便在新教程发布时得到通知。
HTML导航栏的四种制作方法
热门推荐
lovey030821的博客
10-17 15万+
1.首先，大家可以直接使用html5中的导航栏标签&lt;nav&gt;&lt;/nav&gt; 具体代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航栏&lt;/title&gt; &lt;/
HTML5+CSS3小实例：全屏导航栏菜单
艾恩小灰灰的博客
05-01 1184
HTML5+CSS3实现全屏导航栏菜单，悬停在右上角的小图标，点击以圆形扩散的方式绽开全屏导航栏，这种方式的导航栏很吸睛，运用也越来越广，赶紧学起来呀！ 效果： 源码： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="
侧边导航栏（抽屉式设计）界面 (html + css)
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
HTML5网页设计小案例：网页导航栏的设计
weixin_63279307的博客
08-02 1万+
HTML5网页设计小案例：网页导航栏的设计
HTML5+CSS3小实例：3D导航栏
艾恩小灰灰的博客
12-28 260
实例：3D导航栏。技术栈：HTML+CSS。
HTML+CSS制作导航栏
qq_64867440的博客
10-13 4811
1.1效果展示。
Web前端开发详解：CSS+DIV技术与应用
"本文主要介绍了前端开发中的关键技术——CSS+DIV，以及相关的Web前端技术，如HTML、JavaScript等。文章详细阐述了CSS的作用和特点，强调了CSS与DIV结合使用对于网页布局和样式控制的重要性。此外，还提到了前端开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

lesin X

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

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

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

打赏作者

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

抵扣说明：

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

余额充值