天猫二级菜单的编写

最新推荐文章于 2023-06-18 11:29:33 发布

置顶心奔

最新推荐文章于 2023-06-18 11:29:33 发布

阅读量957

点赞数

分类专栏： HTML与CSS项目练习文章标签：网页二级菜单的编写 html和css样式二级菜单编写网页二级菜单项目练习

本文链接：https://blog.csdn.net/g960526/article/details/89056564

版权

HTML与CSS项目练习专栏收录该内容

3 篇文章 2 订阅

订阅专栏

天猫二级菜单的编写

这次的二级菜单的编写,会将过程写的非常的详细,几乎是把每一句每一行的代码都翻译了一遍,并且在最后还会有一个自己对于这篇内容的一些知识点的总结,把最容易弄混的两部分单独拿出来总结了一遍;

源代码如下:

<!doctype html>   <!-- 声明文档类型 -->
<html>
	<head>  <!-- 头部标签 -->
		<meta charset="utf-8">  <!-- 字符集编码  使用国际编码utf-8 -->
		<title>二级菜单练习</title>  <!-- 标题名称 -->
		<meta name="descrption" content="">  <!-- 目标  对于页面的描述 和主要内容 -->
		<meta name="keywords" content=""> <!-- 目标  网页的关键词,方便搜索 和主要内容 -->
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1123420_ke60pr43qnj.css">  <!--  引入标签,一般是引入标题图片或者是引入其他文件到html中 这里因为要引入阿里图标,记得在复制代码时,要加上http: -->
		<style type="text/css">   /* 样式部分 */
			*{margin:0px;padding:0px;}  /* 外边距和内边距的重置 */
			li{list-style:none;}  /* 列表重置 */
			
			/* S .box .title_box */
			.box{width:200px;border:1px solid red;}   /* 给一个大盒子,将所有的内容都放进去 */
			.box .title_box{width:100%;background-color:red;}   /* 规定标题盒子的大小和背景颜色 */
			.box .title_box .logo{float:left;vertical-align:bottom;margin:3px 0px 0px 10px;}   /* 设置一个左浮动,使可以一行显示,设置垂直对齐方式,使图片不会与以默认的基线对齐使下面与盒子边框有空隙,最后设置一下边距问题 */
			/* S .box .title_box */


			/* S- box .list_box */
			.box .title_box .text{float:left;margin-left:5px;}  /* 设置文本的浮动,使文本可以和logo一行显示,在设置一下边距问题 */
			.box .list_box{position:relative;}  /* 后代使用定位,在这里是给绝对定位定义一个属性 */
			.box .list_box .numb{width:100%;background-color:pink;line-height:1.5;}  /* 给列表设置一个宽度和背景色,并设置一个行高使他们之间有一些距离 */
			.box .list_box .numb:hover{color:white;background-color:#666;}  /* 给列表设置悬浮功能,使鼠标放在列表上可以改变字体和背景颜色 */
			.box .list_box .numb .submenu{width:500px;height:134px;background-color:skyblue;position:absolute;left:200px;top:0px;display:none;} /* 在列表的子级中设置一个而二级菜单,设置好基本样式,并用定位设置固定的位置,然后隐藏起来, */
			.box .list_box .numb:hover .submenu{display:block;} /*  给列表标签设置悬浮功能,使鼠标悬浮在列表时,可以显示后代中的二级菜单 */
			.box .list_box .logo{float:left;vertical-align:bottom;margin:3px 0px 0px 10px;} /* 设置每一行列表中的logo,使用浮动可以使logo和text在一行显示,同样设置垂直对齐方式,使其不会在底部有空隙,并设置一些边距 */
			.box .list_box .text{float:left;margin-left:5px;} /* 设置列表文本的浮动,并设置一些外边距*/

			.clearFixed::after{content:"";display:block;clear:both;} /*  在标题盒子和列表盒子时都是用了浮动,所以要在这里使用清除浮动样式,这样才能使父级的高度由内容撑开,这里清除样式是使用after,after是在标签的最后加一个子标签,符合清除浮动中的在兄弟级标签最后插入的要求, after的content一定要写,但是可以为空,并且一定要设置成块级标签,最后设置清除属性clear,一般属性值都是both */
			/* E- box .list_box */
		</style>
	</head>
	<body> <!-- 可视标签 -->
		<div class="box">  <!-- 定义一个大盒子 -->
			<div class=" title_box clearFixed">  <!-- 标题盒子,并设置一个为子级清除浮动的样式 -->
				<div class="iconfont icon-liebiao logo"></div>  <!-- 设置一个放置图标的盒子,类名是iconfont阿里图标的固定类名.另一个类名为图标的类名,这两个类名一定要写,要不然可能会使图标无法加载出来 -->
				<h4 class="text">商品分类</h4>  <!-- 设置文本内容,使用标题标签具有加粗功能 -->
			</div>
			<ul class="list_box">  <!-- 无序列表标签 -->
				<li class="numb clearFixed ">  <!-- 子级具有浮动,用的样式中有after,所以需要在父级设置清除浮动标签 -->
					<div class="iconfont icon-nvzhuang logo"></div>  <!-- 引入阿里图标,两个类名一定不能忘记 -->
					<div class="text">女装/内衣</div> <!--  文本内容 -->
					<div class="submenu"> <!-- 创建一个二级菜单的盒子,,因为二级菜单需要定位,所以需要一个定义属性,在这里创建可以使ul为祖级 -->
						<a href="https://www.baidu.com">女装/内衣二级菜单</a>  <!-- 二级菜单里的内容需要使用超链接调转 -->
					</div>
				</li>
				<li class="numb clearFixed">
					<div class="iconfont icon-nanzhuang logo"></div>
					<div class="text">男装/运动户外</div>
					<div class="submenu">
						<a href="https://www.baidu.com">男装/运动户外二级菜单</a>
					</div>
				</li>
				<li class="numb clearFixed">
					<div class="iconfont icon-nannvxie logo"></div>
					<div class="text">女鞋/男鞋/箱包</div>
					<div class="submenu">
						<a href="https://www.baidu.com">女鞋/男鞋/箱包二级菜单</a>
					</div>
				</li>
				<li class="numb clearFixed">
					<div class="iconfont icon-meizhuang logo"></div>
					<div class="text">美妆/个人/护理</div>
					<div class="submenu">
							<a href="https://www.baidu.com">美妆/个人/护理二级菜单</a>
					</div>
				</li>
				<li class="numb clearFixed">
					<div class="iconfont icon-zhubaoshipin logo"></div>
					<div class="text">腕表/眼睛/珠宝饰品</div>
					<div class="submenu">
						<a href="https://www.baidu.com">腕表/眼睛/珠宝饰品二级菜单</a>
					</div>
				</li>
			</ul>
		</div>

	</body>
</html>

<!-- 
	个人总结
		1.float浮动中,在最后都得在父级标签中使用一个清除浮动的样式,清除浮动样式中使用after
		2.position定位中,一般是使用absolute绝对定位,在使用绝对定位中会在祖级标签中使用relative定义属性
		3.float和position都会在父级或祖级中写自己的另一部分,一个是写清除浮动,一个是写定义属性
-->

效果图如下:
在这里插入图片描述
蓝色区域为二级菜单,是由我点击商品分类出来的