导航栏制作

最新推荐文章于 2024-02-03 15:57:49 发布
最新推荐文章于 2024-02-03 15:57:49 发布
阅读量344 收藏 2
点赞数 1
文章标签： html css 导航栏制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37244548/article/details/106126351
版权

目标制作：

步骤：

1，制作一个url的li列表，因为每个导航都是一个超链接，所以要加上超链接a，因为字体颜色是白色的，所以看不到

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 因为超链接a的字体是白色 */
			a{
				color: white;
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<nav >
<ul>
			<li><a href="#">淘宝首页1</a></li>
			<li><a href="#">淘宝首页2</a></li>
			<li><a href="#">淘宝首页3</a></li>
			<li><a href="#">淘宝首页4</a></li>
			<li><a href="#">淘宝首页5</a></li>
			<li><a href="#">淘宝首页6</a></li>
			<li><a href="#">淘宝首页7</a></li>
			<li><a href="#">淘宝首页8</a></li>
			<li><a href="#">淘宝首页9</a></li>
		</ul>
</nav>
	</body>
</html>

 

2， 设置nav的宽和高，以及背景颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 因为超链接a的字体是白色 */
			a{
				color: white;
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			.nav-top{
				/* width不要超过1366px */
				width: 1300px;
				/* 居中 */
				margin:auto;
				border: 1px solid red;
				height: 66px;
				/* 这里的背景颜色可以使用工具捕获 */
				background-color:#2A3C5C;
			background-image:url(img/666.png) ;			
			}
		</style>
	</head>
	<body>
		<nav class="nav-top">
<ul>
			<li><a href="#">淘宝首页1</a></li>
			<li><a href="#">淘宝首页2</a></li>
			<li><a href="#">淘宝首页3</a></li>
			<li><a href="#">淘宝首页4</a></li>
			<li><a href="#">淘宝首页5</a></li>
			<li><a href="#">淘宝首页6</a></li>
			<li><a href="#">淘宝首页7</a></li>
			<li><a href="#">淘宝首页8</a></li>
			<li><a href="#">淘宝首页9</a></li>
		</ul>

    </nav>
	</body>
</html>

3， 设置ul的宽和高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 因为超链接a的字体是白色 */
			a{
				color: white;
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			.top-nav>ul{
				width: 1300px;
				height: 66px;
			 	border: 1px solid red; 
			}
			.nav-top{
				/* width不要超过1366px */
				width: 1300px;
				/* 居中 */
				margin:auto;
				border: 1px solid red;
				height: 66px;
				/* 这里的背景颜色可以使用工具捕获 */
				background-color:#2A3C5C;
			background-image:url(img/666.png) ;			
			}
		</style>
	</head>
	<body>
/*语义化标签都是div*/
		<nav class="nav-top">
<ul>
			<li><a href="#">淘宝首页1</a></li>
			<li><a href="#">淘宝首页2</a></li>
			<li><a href="#">淘宝首页3</a></li>
			<li><a href="#">淘宝首页4</a></li>
			<li><a href="#">淘宝首页5</a></li>
			<li><a href="#">淘宝首页6</a></li>
			<li><a href="#">淘宝首页7</a></li>
			<li><a href="#">淘宝首页8</a></li>
			<li><a href="#">淘宝首页9</a></li>
		</ul>

    </nav>
	</body>
</html>

 4，通过计算设置li标签的宽和高，以及设置浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 因为超链接a的字体是白色 */
			a{
				color: white;
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			/* 设置a标签字体 */
			nav.nav-top a{
				font-size: 23px;
				font-weight: bold;
				}
			.nav-top>ul{
				width: 1300px;
				height: 66px;
			 	border: 1px solid red; 
			}
			.nav-top>ul>li{
				width: 144px;
				/* 设置手势标志 */
				cursor: pointer;
				height: 66px;
				float: left;
				
				
				}
				
				
				
			.nav-top{
				/* width不要超过1366px */
				width: 1300px;
				/* 居中 */
				margin:auto;
				border: 1px solid red;
				height: 66px;
				/* 这里的背景颜色可以使用工具捕获 */
				background-color:#2A3C5C;
			background-image:url(img/666.png) ;			
			}
			
		</style>
	</head>
	<body>
		<nav  class="nav-top">
			<ul>
				<li><a href="#">淘宝首页1</a></li>
				<li><a href="#">淘宝首页2</a></li>
				<li><a href="#">淘宝首页3</a></li>
				<li><a href="#">淘宝首页4</a></li>
				<li><a href="#">淘宝首页5</a></li>
				<li><a href="#">淘宝首页6</a></li>
				<li><a href="#">淘宝首页7</a></li>
				<li><a href="#">淘宝首页8</a></li>
				<li><a href="#">淘宝首页9</a></li>
			</ul>
		</nav>
	</body>
</html>

 5,其他属性的添加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style type="text/css">
				
			*{
				/* 通用标签 */
				margin: 0;
				padding: 0;
			}
			a{
				/* 通用标签 */
				color: white;
				text-decoration: none;
			}
			nav.nav-top a{
				font-size: 23px;
				font-weight: bold;
				
			}
			.nav-top{
				/* width不要超过1366px */
				width: 1300px;
				/* 居中 */
				margin:auto;
				/* border: 1px solid red; */
				height: 66px;
				background-color:#2A3C5C;
				background-image:url(img/666.png) ;
			}
			a:hover{
				text-decoration: underline;
				color: #FF0000;
			}
			.nav-top>ul{
				width: 1300px;
				height: 66px;
			 	border: 1px solid red; 
			}
			.nav-top>ul>li{
				width: 144px;
				cursor: pointer;
				height: 66px;
				/* margin-top:16px ; */
				/* 文字居中 */
				text-align: center;
				/* border: 1px solid red; */
				/* display: inline-block; */
				/* float最开始是用来决定文字和图片的环绕关系的，现在也可以用来块元素的横向排列 */
				float: left;
				line-height: 66px;
				
			}
			.nav-top>ul>li:hover{
				background: darkred;
			}
			/* nth-child(2n-1)可以接受表达式表示奇数 */
			/* 也能接受odd，even两个单词 */
			.nav-top>ul>li:nth-child(3),.nav-top>ul>li:nth-child(6){
				border-right: 1px solid white;
			}
			
			/* 通用标签 */
			ul,ol{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<nav class="nav-top">
			<!-- 语义化标签本身就是div -->
			<ul>
				<li><a href="#">导航1</a></li>
				<li><a href="#">导航2</a></li>
				<li><a href="#">导航3</a></li>
				<li><a href="#">导航4</a></li>
				<li><a href="#">导航5</a></li>
				<li><a href="#">导航6</a></li>
				<li><a href="#">导航7</a></li>
				<li><a href="#">导航8</a></li>
				<li><a href="#">导航9</a></li>
			</ul>
		</nav>
	</body>
</html>

我就呵呵了。。。
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简易导航条制作
09-12
在网页设计中，导航条（Navigation Bar）是一个至关重要的元素，它帮助用户在网站的不同页面之间轻松跳转，提供良好的用户体验。本教程将探讨如何创建一个简易的导航条，你可以通过查看提供的网页源代码来进一步了解...
实战经验（1）——头部导航栏制作技巧
weixin_45604020的博客
07-03 5160
一般网页logo不只是一个图片那么简单，它可以给用户提供网页跳转到首页的功能，更重要的是搜索引擎优化让百度搜索名更靠前。搜索框是一个供用户输入的表单框，需要用到input标签，至于搜索按钮就是一个背景图可用a标签或button标签制作。用户头像包含图片和文字，点击头像或文字都可以跳转到相应页面。导航栏其实就是几个超链接，目的就是为了跳转页面。
导航栏的制作
WYF857446152的博客
04-14 4335
我们在看到一些网页的布局中，浮动总是离不开身影，浮动目的为了完成实现水平布局，有一个良好的布局，背后一定藏着一个良好的思维，请看思维导图 浮动为了实现水平布局的完成，在使用浮动之后元素脱离了文档流，使元素可以实现水平布局 这时就通过float：left/right；进行自己想要的布局。 浮动的特性：1.所有标签同排显示2.行标签适应所有CSS特性3.默认内容撑开盒子宽高4.元素脱离文档流 加入了浮动之后，网页布局还有许多为了不影响以后的布局，所以一般我们要清除浮动防止父级元素无法检测到子级的存在，高
简单创建导航栏的步骤
Red_coralDown的专栏
03-06 642
// ViewController.m #import "ViewController.h" #import "SecondViewController.h" @interface ViewController () { SecondViewController *_secondView; } @end @implementation ViewController - (void
＜CSS＞一级导航栏和二级导航栏
Snowyufly的博客
07-18 1万+
二级导航栏的制作
手把手教你制作网页导航栏
m0_56329037的博客
05-01 3万+
手把手教你制作网页导航栏 众所周知，导航栏是网页的重要组成部分，本篇文章将会带你由浅入深的制作导航栏，子菜单，样式风格变化等。 导航栏的重要部分——ul标签 在导航栏中的文字，都是以无序列表 ul 和 li 标签实现的。 下面通过几个小例子来为大家介绍如何实现网页导航栏的制作。 1.用ul标签做一个简单般的菜单样式，首先在一个div盒子里创建一个无序列表，如图所示 运行结果如下图所示： 2.之后我们可以让列表横过来，需要用到css的浮动样式也就是float标签。 我们需要让它向左浮动如图所示： 运行结果如
兼做美工之导航条制作过程分享
09-25
标题中的“兼做美工之导航条制作过程分享”指的是一个关于如何设计和实现网页导航条的经验分享。在这个过程中，作者特别提到了CSS编写和浏览器兼容性问题，特别是与IE6相关的挑战。以下是对这些知识点的详细说明： ...
FLASH导航条快速制作
03-13
"FLASH导航条快速制作"是一个针对新手的教程，旨在帮助用户快速掌握如何利用Adobe Flash创建吸引人的动态导航条。Flash因其丰富的动画效果和交互性，在早期网页设计中广泛使用，尤其是在创建动态导航条方面。 首先...
带下拉列表得导航栏制作
09-08
在网页设计中，导航栏是页面布局的关键组成部分，它帮助用户快速访问网站的不同部分。带下拉列表的导航栏尤其常见于大型网站和多层级结构的网页，因为它们有效地节省了空间并提供了清晰的导航路径。本文将详细介绍...
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
CSS+DIV制作导航条
05-02
<body> <div class="cd"> <ul><!--导航条--> <li><a href="#">A</a></li> <!---------------------------------------------> <li><a href="#">B</a><!--二级--> <ul> <li><a href="#">B1</a><!--3级--> <ul> <li><a href="#">B12</a></li> </ul> </li> <li><a href="#">B2</a> <ul> <li><a href="#">b22</a></li> </ul> </li> </ul> </li><!--二级结束--> <!---------------------------------------------> <li><a href="#">C</a></li> </ul><!--导航条结束--> </div> </body> </html>
简单导航栏的制作
weixiwo的博客
03-17 1360
导航栏制作 简单导航栏制作 初学前端，刚学习了如何制作简单的导航栏，有兴趣的看官可以看一看，欢迎大家和我一起学习，如果有什么不对的地方，敬请指正 这是导航效果，希望大家多多包含，一起进步 首先使用ul标签 使用无序标签，将导航列表元素写下来 HTML代码如上，但是出来的效果害和导航效果差的很多 接下来就可以改变样式，来达到效果啦 首先去掉原始样式 2.在标签列表项使用float:left,......
CSS基础-13-垂直导航栏（详细创建过程）
运维玄德公
04-26 3474
1. 最简导航栏 2 添加鼠标改变背景色 3 给首页添加颜色 4 加边框 4.1 思路 4.2 实际代码 5 全屏高度固定导航条 5.1 思路 5.2 实际代码
5.前端入门之制作一个导航条
最新发布
d3582077的专栏
02-03 862
ul也设置float:left是因为，它的左右还要带个img标签，左右边角封闭，当然你如果不需要这个圆角矩形的效果，不带img图片，你也可以不用设置float:left。用ps的切片工具，把图片的两边取下来，还有中间也要取一部分（不是文字区域），分隔线的图片也取下来，那么就会有四张图片，如下：（它们的高度都是一致的）这里的li背景图片是分隔符，我们只需要每项前有一个就行，所以no-repeat不平铺，实现了有分隔图片的效果。源文件就不上传了，你们可以把文章里那几张图片另存为，然后试一下。
HTML网站导航栏的制作
wuwei_19981001的博客
10-17 3万+
浮动特性
html里制作简单导航栏
热门推荐
no2015214099的博客
05-28 14万+
今天简单的做了一下网页里的导航栏。 效果如下： 代码： 实验3 ul{/*设置导航栏的框框*/ margin: 30px auto;/*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/ width: 600px;/*框框的宽度*/ height: 350px;/*框框的长度*/ pad
用HTML5做的导航条（步骤非常详细）
独立开发者 | 跨境电商
05-27 12万+
转载请注明出处：这里写链接内容 首先准备网页背景图片和导航背景图片，放在同一目录下的images文件夹中 编写html文件<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h
HTML导航栏制作
dhxb45678的博客
01-24 1万+
首先建一个大盒子，名为 nav 用于装导航栏里面的部分。代码如下： <div class="nav"></div> .nav{ width: 100%; height: 50px; background-color:#f7f7b6; } 目录 logo (即图中的汤姆！) Li文字 搜索栏 log logo (即图中的汤姆！) <div class="logo"> <img src="...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值