web前端导航条制作

最新推荐文章于 2024-03-22 23:43:25 发布
最新推荐文章于 2024-03-22 23:43:25 发布
阅读量2.3k 收藏 32
点赞数 3
分类专栏： 百度导航条 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45442347/article/details/119937814
版权

以百度为例：

没有加超链接，如果有人要用加上就好了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#nav{
				height: 60px;
				background: rgba(0,0,0,0.2);
				padding-left: 24px;
			}
			#nav a{
				margin-right: 31px;
				margin-top: 19px;
				display: inline-block;
				color: rgba(255,255,255,.85);
				text-decoration: none;
			}
			#nav a:hover{
				color: #fff;
			}
			
			
			
			
			#nav2{
				height: 60px;
				background-color: rgba(0,0,0,0.2);
				list-style: none;
				padding-left: 24px;
			}
			#nav2 li{
				height: 60px;
				line-height: 60px;
				float: left;
				/* margin-top: 19px;*/
				margin-right: 31px;
			}
			#nav2 li a{
				color: rgba(255,255,255,0.8);
				text-decoration: none;
			}
			#nav2 li a:hover{
				color: #fff;
			}
			
			
			#nav3{
				list-style: none;
				padding-left: 24px;
				height: 60px;
				background-color: rgba(0,0,0,0.2);
				font-size: 0;
			}
			#nav3 li{
				font-size: 16px;
				height: 60px;
				line-height: 60px;
				display: inline-block;
				margin-right: 31px;
			}
			
			#nav3 li a{
				color: rgba(255,255,255,0.8);
				text-decoration: none;
			}
			#nav3 li a:hover{
				color: #fff;
			}
		</style>
	</head>
	<body>
		<h1>直接使用div+a做导航条</h1>
		<div id="nav">
			<a href="">新闻</a>
			<a href="">hao123</a>
			<a href="">地图</a>
			<a href="">直播</a>
			<a href="">视频</a>
			<a href="">贴吧</a>
			<a href="">学术</a>
			<a href="">更多</a>
		</div>
		<br>
		<br>
		<br>
		<br>
		<br>
		<h1>使用列表浮动</h1>
		<ul id="nav2">
			<li><a href="">新闻</a></li>
			<li><a href="">hao123</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>
			<li><a href="">更多</a></li>
		</ul>
		<br>
		<br>
		<br>
		<br>
		<br>
		<h1>使用列表+行内块</h1>
		<ol id="nav3">
			<li><a href="">新闻</a></li>
			<li><a href="">hao123</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>
			<li><a href="">更多</a></li>
		</ol>
		
		
		
	</body>
</html>

这是用三种方法写的：

可以根据实际自行参考

 

阿九icon
关注
  • 3
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
web前端入门到实战：CSS导航条菜单
软件开发-前端开发-IT
08-16 768
很多网页的导航条都会有小三角形，其实实现这个功能也挺简单。 拿菜鸟教程首页导航做个例子 首先写一个大的div_nav，而“首页”“菜鸟笔记”“菜鸟工具”“参考手册”等则作为div包含在div_nav中。div_nav背景色设置为对应的颜色。 背景色的设置代码如下： .blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{ colo...
导航条菜单制作
05-25
在前端开发中，导航条菜单是网页设计的重要组成部分，它为用户提供直观的页面跳转路径，帮助用户快速访问网站的不同区域。本主题聚焦于“导航条菜单制作”，将深入探讨如何利用jQuery、HTML等技术来创建高效且用户...
Web前端开发-简单导航栏实例
05-17
关于HTML中的导航栏的设计(夏季风格)~可以出现鼠标悬停效果变化~用div框起来，使用ul标签包含a。
制作web网页头部导航栏
热门推荐
yuwoxinanA3的博客
12-04 2万+
（1）新建HTML文件。写入代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> （2）网页头部导航栏的一堆按钮实际是由<ul>和<li>标签制作..
前端案例 - 导航条菜单的制作
Aelous_dp的博客
07-23 1484
每个网站都包含导航条菜单，在此做一些 HTML 和 CSS 基础回顾。 本文主要跟随课程完成导航栏菜单的制作，课程来源 imooc导航条菜单的制作。 推荐学习前端的朋友可以看看，简简单单一个小课程，对于刚有前端基础的人来说很友好，整体清晰易懂，逻辑通顺，后期稍微涉及一丢丢 JS，很不错。 垂直菜单栏 导航菜单用什么元素制作呢，通过之前学习的网页设计结构表现原则我们可以得知,导航目录条目性的语义 与 无序列表 非常接近，所以选用无序列表。 垂直菜单栏的整体结构如下: HTML 代码： <body&gt
用html和css制作一个简单的导航条
qq_40609754的博客
07-07 1万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航条</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <s...
BootStrap制作导航条实例代码
09-02
Bootstrap，由Twitter开发并开源，是一个流行的前端框架，主要用于快速构建响应式和移动优先的Web应用程序和网站。它提供了一系列预先设计的组件，包括布局、导航条、按钮、表格、模态框等，大大简化了网页开发过程...
30套HTML+CSS+JS精品网页模板 大学生期末大作业 Web前端网页制作
最新发布
05-06
HTML+CSS+JS精品网页模板，设置导航条、轮翻效果，鼠标滑动效果，自动弹窗，点击事件、链接等功能；适用于大学生期末大作业或公司网页制作。响应式网页，可以根据不同的设备屏幕大小自动调整页面布局； 支持如...
25套HTML+CSS+JS精品网页模板 大学生期末大作业 Web前端网页制作
05-06
HTML+CSS+JS精品网页模板25套，设置导航条、轮翻效果，鼠标滑动效果，自动弹窗，点击事件、链接等功能；适用于大学生期末大作业或公司网页制作。响应式网页，可以根据不同的设备屏幕大小自动调整页面布局； 支持如...
网页前端：导航菜单的制作
sky-stars的博客
11-22 2298
实验目的：（1）掌握有序列表和无序列表，在导航菜单中的工作过程；（2）导航菜单能够根据鼠标的悬浮进行样式的变化。实验内容：根据要求完成以下网页菜单：1、使用无序列表和超链接完成菜单；2、鼠标悬停菜单后，菜单样式发生变化。（1）掌握有序列表和无序列表，在导航菜单中的工作过程；（2）导航菜单能够根据鼠标的悬浮进行样式的变化。
十几种 网页导航栏
04-30
十几种不同的网页导航栏 ，各不相同,div + CSS +JS .
CSS web导航菜单模板
12-16
包含20个漂亮的纯CSS的web导航菜单
web前端使用HTML+CSS编写导航栏
m0_65992344的博客
03-22 928
HTML导航栏是网页中的一个重要组件
web前端 导航条的简单实现
weixin_41514525的博客
04-06 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style> *{ margin: 0px; padding: 0px; } ...
Web前端案例3-导航栏
William_fang的博客
04-14 5270
文章目录一.案例源码二.案例效果图三.知识点总结1.页面结构分析2.标签知识3.css知识 一.案例源码 navigation.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <link href="css/navigation.css" rel="stylesheet" type=
html导航栏圆角,怎么实现css圆角？
weixin_39838758的博客
06-07 1288
圆角边框是css3新增属性，在圆角边框出现之前，前端开发有的采用整块的圆角图片作为背景，下面我们就来介绍一些css圆角的实现方法。css3实现圆角边框：css中可以使用border-radius属性设置圆角边框。border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性。圆角边框(border-radius)的基本用法：圆角边框的最基本用法就是设置四个...
web端常见导航设计
weixin_43516258的博客
11-23 2585
导航作为网站或者平台的骨架，是产品设计中不容忽视的一环导航是内容或者功能的定位、导向与通道。
制作精美内容网页：网页复用与多媒体插入
"Web前端设计与开发技术课件，主要内容涉及网页复用、自制导航条、插入Flash动画、HTML5的Video和Audio以及网页特效的运用。本课件旨在教授如何利用Dreamweaver CC 2018创建精美内容网页，提高网页制作效率，并加入...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值