学习定位后制作简易二级菜单栏

最新推荐文章于 2024-05-21 21:13:29 发布
最新推荐文章于 2024-05-21 21:13:29 发布
阅读量443 收藏 1
点赞数 1
分类专栏： css定位 二级菜单 文章标签： css 定位 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiyu18/article/details/110475359
版权

定位练习

定位练习简易二级菜单栏
原图效果：
二级菜单栏原效果
要求：实现二级菜单栏效果
代码实现：

html部分:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>作业01</title>
  <link rel="stylesheet" type="text/css" href="css/01.css" />
 </head>
 <body>
	<div class="header">
		<div class="box-div">
			<ul class="box-ul">
				<li class="box-li">
					<a href="#">你好，请登录</a>
				</li>
				<li class="box-li">
					<a href="#">免费注册</a>
				</li>
				<li class="w1"></li>
				<li class="box-li">
					<a href="#">我的订单</a>
				</li>
				<li class="w1"></li>
				<li class="box-li box-li1">
					<a href="#">我的京东</a>
					<div class="box-xl">
						<div class="box-xl-a1">
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
						</div>
						<div class="box-xl-a2">
							<a href="#" class="a1">我的京东2</a>
							<a href="#" class="a1">我的京东2</a>
							<a href="#" class="a1">我的京东2</a>
							<a href="#" class="a1">我的京东2</a>
						</div>
					</div>
				</li>
				<li class="w1"></li>
				<li class="box-li">
					<a href="#">京东会员</a>
				</li>
				<li class="w1"></li>
				<li class="box-li box-li1">
					<a href="#">企业采购</a>
					<div class="box-xl box-xl-2">
						<div class="box-xl-a2">
							<a href="#" class="a1">我的京东2</a>
							<a href="#" class="a1">我的京东2</a>
							<a href="#" class="a1">我的京东2</a>
							<a href="#" class="a1">我的京东2</a>
						</div>
					</div>
				</li>
				<li class="w1"></li>
				<li class="box-li box-li1">
					<a href="#">客户服务</a>
					<div class="box-xl box-xl-3">
						<div class="box-xl-a1 box-xl-b1">
							<p>客户</p>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
							<a href="#" class="a1">我的京东1</a>
						</div>
						<div class="box-xl-a2">
							<p>商户</p>
							<a href="#" class="a1">我的京东2</a>
							<a href="#" class="a1">我的京东2</a>
							<a href="#" class="a1">我的京东2</a>
							<a href="#" class="a1">我的京东2</a>
						</div>
					</div>
				</li>
				<li class="w1"></li>
				<li class="box-li box-li1">
					<a href="#">网站导航</a>
					<div class="box-xl-end">
						<div class="box-xl-enda1"></div>
						<div class="box-xl-enda1"></div>
						<div class="box-xl-enda1"></div>
						<div class="box-xl-enda1"></div>
					</div>
				</li>
				<li class="w1"></li>
				<li class="box-li">
					<a href="#">手机京东</a>
				</li>
			</ul>
		</div>
	</div>
 </body>
</html>

css部分:

*{
	margin:0;
	padding:0;
	font-family:"微软雅黑";
}
a {
	text-decoration:none;
	color:#999;
}
ul,ol{
	list-style:none;
}
.clearFloat:after{
	clear:both;
	content:"";
	display:block;
}
.header{
	width:100%;
	height:30px;
	margin:50px auto 0;
	border-bottom:solid 1px #ddd;
	background:#e3e4e5;
}
.box-div{
	width:1190px;
	height:30px;
	margin:0 auto;
}
li{
	float:left;
	position:relative;
}
.w1{
	width:1px;
	height:10px;
	background:#ccc;
	margin:11px 5px 0;
	overflow:hidden;
}
.box-ul{
	width:850px;
	height:30px;
	line-height:30px;
	float:right;
	position:relative;
}
.box-li{
	padding:0 7px;
	height:29px;
	border-top:solid 1px #e3e4e5;
	border-right:solid 1px #e3e4e5;
	border-left:solid 1px #e3e4e5;
	border-bottom:solid 1px #ddd;
}
.box-li1:hover{
	border-top:solid 1px #ccc;
	border-right:solid 1px #ccc;
	border-left:solid 1px #ccc;
	border-bottom:solid 1px #fff;
	background:#fff;
}
.box-xl{
	width:280px;
	height:200px;
	background:#fff;
	border:solid 1px #ccc;
	box-shadow:1px 2px 1px rgba(0,0,0,0.1);
	position:absolute;
	top:30px;
	left:0;
	display:none;
}
.box-xl-a1{
	width:280px;
	height:120px;
	float:left;
	border-bottom:solid 1px #ccc;
}
.a1{
	display:inline-block;
	float:left;
	width:100px;
	height:35px;
	line-height:40px;
	text-align:center;
}
.a1:hover{
	color:red;
}
.box-li:hover .box-xl,.box-xl-end{
	display:block;
}
.box-li:hover .box-xl-end{
	display:block;
}
.box-xl-2{
	width:200px;
	height:90px;
}
.box-xl-3{
	width:200px;
	height:350px;
}
.box-xl-b1{
	width:200px;
	height:210px;
}
.box-xl-end{
	width:1188px;
	height:350px;
	right:-84px;
	background:#fff;
	border:solid 1px #ccc;
	box-shadow:1px 2px 1px rgba(0,0,0,0.1);
	position:absolute;
	top:30px;
	display:none;
}
.box-xl-enda1{
	width:290px;
	height:320px;
	float:left;
	border-right:solid 1px #ccc;
	margin-top:15px;
}
.box-xl-enda1:last-child{
	border:0;
}

实现效果：
代码实现效果

总结:
这里需要熟练掌握并使用 相对定位 (position:relative;) 绝对定位(position:absolute;) hover伪类 diaplay:none/display:block
需要多加练习。

shiyu18
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3自定义菜单内容的二级下拉菜单
08-23
之前我们分享过很多基于jQuery和CSS3的二级下拉菜单，大部分都非常实用，当然也不乏炫酷的动画，比如这款HTML5/CSS3水平二级下拉菜单就比较朴实，这款jQuery/CSS3波浪形弹性下拉菜单就比较富有个性。今天我们要分享的这款CSS3下拉菜单特点在于二级下拉菜单内容可以自定义，可以是简单的多列，也可以是复杂的图文排版。
CSS（九）——定位练习（二级菜单）
老程的小白博客空间
08-17 764
本篇笔记的中描述的是二级菜单的其中一种做法，大多数的二级菜单做法的核心逻辑与本文的核心逻辑基本一致（重复一遍，是基本一致，不是一定一致！）。 本文中有不算少的代码，主要为了能直接显示除页面的效果。至于其他的效果……（看过我之前文章的朋友知道，博主较懒，能看就行。） 最后，严肃的说一下，本文不能先看结论，结论是总结用的。先看正文！
定位的练习之二级菜单、弹出层和轮播图
COOL66BOY的博客
02-24 292
文章目录二级菜单弹出层轮播图 透明，每个颜色都是有透明通道的（0~1） 设置透明的方式： （1）rgb(红(0~255), 绿(0~255), 蓝(0~255), alpha(0~1)); alpha中1是不透明，0是完全透明。 （2）hex: #红绿蓝透; 十六进制写法。 （3）设置属性opacity：0~1; 二级菜单 主要原理：用定位的方法固定菜单在浏览器顶部，在一级菜单下面设置一个二级的菜单盒子，用display为none的方式先隐藏起来，然后鼠标移上一级菜单上面就去掉display为none
相对定位 绝对定位制作二级下拉需要掌握hover
箜的博客
12-12 1175
相对定位 绝对定位制作二级三级下拉菜单 父相子绝二级下拉一.纵向二级下拉菜单二.横向二级下拉菜单相对定位做1.相对定位做纵向(优选)2.相对定位 做横向绝对定位做1.绝对定位做横向(优选)2.绝对定位做横向 在网页中表头常见的导航栏,大多有帮助用户快速定位的下拉菜单.配合着hover以及a即可实现. 二级下拉 以下为二级下拉的HTML代码 <div class="nav"> <ul> <li><a href="">首页
二级菜单的制作
moxinyong的博客
02-01 316
周末发生了很多事情，果然计划不如变化快，但是对这条路的坚定不会改变。《当幸福来敲门》里有一句话“Don't ever let somebody tell you you can't do something” ，共勉。也许会遇到质疑，也许会自我怀疑，但是我相信只要坚定的做自己喜欢做的事情，坚定自己的信仰，结果不会差的。otherwise,what  else could I do? .今天在微博里
js制作的简易二级菜单
02-13
使用javascript制作简易的二级菜单，比较全面，想制作菜单的不同效果可以修改里面的css样式
Access数据库-二级下拉菜单制作
03-29
Access数据库-二级下拉菜单制作
二级菜单二级菜单二级菜单
12-19
二级菜单
vue实现二级导航栏效果
10-16
主要为大家详细介绍了vue实现二级导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
MIUI官网下拉二级菜单栏.zip
05-23
MIUI官网下拉二级菜单栏是一款基于jquery.backgroundpos.js和jquery-1.4.2.js制作的MIUI官网使用的下拉二级网站导航菜单。有首页、功能、下载、更多产品、应用商店、主题商店、小米桌面、小米系统、论坛等网站菜单...
前端入门教程——纯css制作二级菜单
weixin_34265814的博客
03-28 192
首先，需要声明的是本教程是写给初级者参考的，如果您已经有一定的基础请直接忽略吧 二级菜单是网站开发中很常见的功能模块，但是对于初级者来说却还是有些困难，下面我就拿几个常见的案例来讲好了。 鼠标滑过显示显示二级菜单 很简单，li标签嵌套一层ul <ul class="navs"> <li class="nav"&...
html简单的二级菜单制作
热门推荐
小坚的技术博客
10-27 1万+
首先看看效果图 具体实现方法如下： 首先在html中写出一级菜单列表，然后在每个一级菜单中再嵌套一个列表即可创建一个二级菜单。 index.html Title 一级菜单 二级菜单
前端三大件速成 03 CSS（2）常用属性、内外边距及定位布局
weixin_42830015的博客
05-18 981
前端三大件速成 03 CSS（2）常用属性、内外边距及定位布局
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 141
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 206
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
5.小程序页面布局 - 记账页面(名目布局、绘制键盘、引用picker时间选择组件)
KelvinLiu
05-18 813
记账小程序的记账页面，flex布局，自定义键盘，选择图片加样式提交
CSS-元素堆叠顺序
Kevin7_35Durant的博客
05-18 150
元素的堆叠效果，是根据书写的顺序来的，后面的在上面绿色在最上面，随后是红色，最后是蓝色，跟书写的顺序一样我们可以改变这个顺序。
探索 CSS、Sass 和 SCSS：区别与应用
一个普通人
05-21 521
CSS 是一种用来描述 HTML 或 XML 文档外观和格式的样式表语言。它通过定义样式规则，来控制网页元素的呈现方式。Sass 是一个 CSS 预处理器，扩展了 CSS，添加了变量、嵌套规则、混入、继承等功能，增强了样式表的功能性和可维护性。SCSS 是 Sass 的一种语法，是 CSS 的超集，这意味着所有有效的 CSS 代码在 SCSS 中同样有效。它结合了 CSS 的简单性和 Sass 的强大功能。CSS 是基础的样式表语言，语法简单但功能有限，适用于简单的样式需求。
CSS变量的应用
qq_26854355的博客
05-20 389
CSS变量的简单应用。
HTML+CSS制作横向二级菜单栏
06-06
好的，以下是一个简单的HTML+CSS制作横向二级菜单栏的示例代码： HTML代码： ```html <li><a href="#">菜单1 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值