几种导航栏练习

最新推荐文章于 2024-09-04 16:32:41 发布
最新推荐文章于 2024-09-04 16:32:41 发布
阅读量713 收藏 1
点赞数
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/makelucky/article/details/90414822
版权

第一种  


<DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			ul{
				width:500px;
				height:40px;
				margin:100px auto;
				border-bottom:1px solid #afafaf;
			}
			ul li{
				list-style:none;
				float:left;
				height:40px;
				margin-left:9px;
				
			}
			a{
				text-decoration:none;
				line-height:35px;
				height:35px;
				display:block;
				margin-top:4px;
				padding:0 13px;
				border:1px solid #bdc2c6;
				color:#bdc2c6;
				background:#f9f9f9;
			}
			a:hover{
				height:40px;
				margin-top:0px;
				color:#81858e;
				background:#fff;
				border:1px solid #bdc2c6;
				border-bottom:0px;
			}
		</style>
	</head>
	
	<body>
		<ul>
			<li>
				<a href="#">tab one</a>
			</li>
			<li>
				<a href="#">tab two</a>
			</li>
			<li>
				<a href="#">tab three</a>
			</li>
			<li>
				<a href="#">tab four</a>
			</li>
		</ul>
	</body>

</html>

第二种

      


<DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航2</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			ul{
				width:500px;
				height:62px;
				margin:100px auto;
				background:url("bg1.jpg") repeat-x center bottom;
			}
			ul li{
				list-style:none;
				float:left;
			}
			a{
				text-decoration:none;
				padding:0 21px;
				line-height:62px;
				display:block;
				color:#808180;
			}
			a:hover{
				background:url("bg2.jpg") repeat-x;
				color:#fff;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
			<li>
				<a href="#">sample</a>
			</li>
		</ul>
	</body>
</html>

第三种


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航3</title>
		<style>
		    *{
				margin:0;
				padding:0;
			}
			ul{
				width:600px;
				height:20px;
				border-bottom:8px solid red;
				margin:100px auto;
			}
		    ul li{
				float:left;
				list-style:none;
			}
			a{
				text-decoration:none;
				color:black;
				font-size:12px;
				display:block;
				width:80px;
				height:20px;
				background:grey;
				margin-left:1px;
				text-align:center;
				font-weight:bold;
				line-height:20px;
			}
			i{
				font-style:normal;
				color:white;
				display:none;
			}
			a:hover{
				background:red;
			}
			a:hover i{
				display:block;
			}
			a:hover span{
				display:none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<a href="#">
					<span>home</span>
					<i>首页</i>
				</a>
			</li>
			<li>
				<a href="#">
					<span>home</span>
					<i>首页</i>
				</a>
			</li>
			<li>
				<a href="#">
					<span>home</span>
					<i>首页</i>
				</a>
			</li>
			<li>
				<a href="#">
					<span>home</span>
					<i>首页</i>
				</a>
			</li><li>
				<a href="#">
					<span>home</span>
					<i>首页</i>
				</a>
			</li>
		</ul>
	</body>
</html>

第四种


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航5</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.nav{
				width:444px;
				height:32px;
				margin:100px auto;
				
			}
			ul li{
				list-style:none;
				float:left;
			}
			a{
				text-decoration:none;
				display:block;
				width:110px;
				height:32px;
				margin-right:1px;
				background:#ebeaeb;
				color:#837276;
				font-size:16px;
				line-height:32px;
				text-align:center;
			}
			.nav2{
				position:absolute;
				width:110px;
				display:none;
			}
			a:hover{
				background:#2e2d2e;
				color:#d2ced0;
				text-decoration:underline;
			}
			.nav li:hover .nav2{
				display:block;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">首页</a>
				<ul class="nav2">
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">首页</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">产品中心</a>
				<ul class="nav2">
					<li>
						<a href="#">产品中心</a>
					</li>
					<li>
						<a href="#">产品中心</a>
					</li>
					<li>
						<a href="#">产品中心</a>
					</li>
					
				</ul>
			</li>
			<li>
				<a href="#">客户服务</a>
				<ul class="nav2">
					<li>
						<a href="#">客户服务</a>
					</li>
					<li>
						<a href="#">客户服务</a>
					</li>
					
					</li>
				</ul>
			</li>
			<li>
				<a href="#">联系我们</a>
				<ul class="nav2">
					<li>
						<a href="#">联系我们</a>
					</li>
					
				</ul>
			</li>
		</ul>
	</body>
</html>

 

makelucky
关注
专栏目录
二级导航和三级导航练习
u012197150的博客
02-24 348
（逆战班） 在这里分享两个练习的二级和三级的导航条的制作，代码后面会附上。 重点要说明下需要注意的一些问题点： 1.需要注意二级以及三级导航的滑动之后display:block；的显示要设置给li，勿设置给a 2.设置样式尽量通过子选择器进行设置，否则样式上会发生问题 3.定位的设置，要看实现的效果，子元素要设置为自动适应父元素的宽度，在谁下面那么他的上一级就要给relative定位属性，给当...
导航栏案例
qq_44502073的博客
08-28 623
第01阶段.前端基础 CSS 今天我们围绕一个 导航栏案例进行学习知识点。 今日重点： 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元素添加样式 使用并集选择器给元素添加样式 使用伪类选择器 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的.
导航栏练习
The_last_knight的博客
01-19 390
导航栏练习   现在我们要做一个导航栏，其最终效果如下 我们要求导航栏的布局居中显示，并且其内的文字也要居中对齐。并且当鼠标放在网站导航上，其背景图片发生变换。   首先第一步便是显示着六个链接，如下 &amp;amp;lt;div class=&amp;quot;nav&amp;quot;&amp;amp;gt; &amp;amp;lt;a href=&amp;quot;#&amp;quot;&amp;amp;gt;网站
导航栏页面
最新发布
2301_80811863的博客
09-04 182
【代码】导航栏页面。
html+css练习（一）导航栏 （有详细注释）
qq_41867900的博客
03-16 710
1.垂直导航栏 效果图 当鼠标放上去的时候，颜色会变 点击时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS垂直导航栏</title> <style> body{ /* 消除间隙 */ margin:
京东导航条.zip csshtml练习
07-28
在“京东导航条”这个练习中，我们需要用CSS来实现以下几点： 1. **布局**：使用`display`属性（如`flex`或`grid`）来实现水平排列的导航项，确保它们在不同屏幕尺寸下都能正确对齐。 2. **颜色和背景**：通过设置`...
js制作的动画导航栏专集4
08-11
在本资源中，"js制作的动画导航栏专集4"是一个专为初学者设计的JavaScript教程，旨在教授如何创建视觉效果出众的导航栏。这个系列教程共有五部分，而这个压缩包是其中的第四部分，意味着它可能涵盖了一些进阶的主题...
JaveScript站点导航条制作软件
02-23
在本文中，我们将深入探讨如何利用JavaScript来创建一个功能丰富的站点导航条，以及如何通过提供的"surfmap.js"文件进行实践。 首先，我们需要理解站点导航条的重要性。在网页设计中，导航条是引导用户在网站之间...
vue练习demo（1）——使用vue基本指令实现切换菜单栏效果
qq_44860114的博客
11-22 943
这篇文章最后的小demo大家解决了吗？ 我来更新代码了哦！ 实现效果的方式有很多种，我这只是其中一种方法， 如果大家有什么不同的意见可以相互讨论。 需要实现的效果： 菜单栏+与菜单相对应的内容区域 点击菜单栏的时候添加样式 点击不同的菜单，显示对应的内容区域 核心代码如下： <style> li{ list-style: none; display: inline-block; padding: 10px 30px; margin: 0
布局：浮动导航栏练习.zip
04-04
布局：浮动导航栏练习.zip
小程序多种今日头条顶部tab导航栏标签效果实现，带部分注释。
08-03
小程序多种今日头条顶部tab导航栏标签效果实现，带部分注释。实现导航栏左右滑动，页面内容滑动导航栏标签绑定选择。
T型导航栏设置
06-28
T型导航栏设置
仿美图导航栏
03-30
仿美图导航栏可用于自己项目
导航条案例练习
HelloWord176的博客
05-11 264
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航条案例练习&lt;/title&gt; &lt;base href="#" target="blank"&gt
导航练习
努力的凤梨
06-02 266
五彩导航案例 五彩导航 五彩导航 五彩导航 五彩导航
前端学习总结（五）-导航栏练习
艾米栗的代码天地
02-03 507
本次练习是跟着慕课上的导航视频完成的。https://www.imooc.com/learn/174 首先，看到一个页面，我们要对他进行逻辑上的分类。如果可以做到画出逻辑树的地步，那就大功告成了。但是目前对我来说，只能一点点分开。 先对图片的布局进行分析。 我们可以看出，图片中的部分是一个整体。这个整体下面包含很多分类。因此，整个结构可以通过一个无序列表来实现。 导航的上部分“全部商品...
自适应布局练习素材：前端设计必备
在本练习素材中，可能包含了以下几种文件类型和内容： 1. HTML模板：提供了基本的页面结构，其中可能包括头部（header）、导航栏（nav）、内容区域（main）、侧边栏（aside）、页脚（footer）等基本布局元素。这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值