HTML基础知识(十二)

最新推荐文章于 2023-07-25 22:02:34 发布

楚玉大王就是我

最新推荐文章于 2023-07-25 22:02:34 发布

阅读量81

点赞数

分类专栏： HTML学习笔记 css学习资料前端学习文章标签： HTML HTML基础 CSS 三级菜单制作

本文链接：https://blog.csdn.net/weixin_45586581/article/details/102712536

版权

前端学习同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML学习笔记

6 篇文章 0 订阅

订阅专栏

css学习资料

3 篇文章 0 订阅

订阅专栏

一、三级菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>lesson12</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			a {}

			.nav>li {
				float: left;
				width: 120px;
				height: 50px;
				background: #333333;
				color: #fff;
				text-align: center;
				line-height: 50px;
				margin-right: 5px;
			}

			.second>li {
				width: 120px;
				height: 50px;
				background: #999999;
				color: #fff;
				text-align: center;
				line-height: 50px;
				margin-bottom: 1px;
			}

			.third>li {
				width: 120px;
				height: 50px;
				background: lightblue;
				color: #666666;
				text-align: center;
				line-height: 50px;
				margin-bottom: 1px;
			}

			.second {
				display: none;
			}

			.second li {
				position: relative;
			}

			.nav li:hover .second {
				display: block;
			}

			.nav li:hover {
				background: pink;
			}

			.third {
				position: absolute;
				left: 120px;
				top: 0;
				display: none;
			}

			.second>li:hover .third {
				display: block;
			}
		</style>
	</head>
	<body>
		<div>
			<ul class="nav">
				<li>
					<a>首页</a>
					<ul class="second">
						<li>
							<a>首页二级菜单1</a>
							<ul class="third">
								<li>首页三级菜单1</li>
								<li>首页三级菜单2</li>
								<li>首页三级菜单3</li>
							</ul>
						</li>
						<li>
							<a>首页二级菜单2</a>
							<ul class="third">
								<li>首页三级菜单1</li>
								<li>首页三级菜单2</li>
								<li>首页三级菜单3</li>
							</ul>
						</li>
						<li>
							<a>首页二级菜单3</a>
							<ul class="third">
								<li>首页三级菜单1</li>
								<li>首页三级菜单2</li>
								<li>首页三级菜单3</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a>产品</a>
				</li>
				<li>
					<a>咨询</a>
				</li>
			</ul>
		</div>

	</body>
</html>

二、用浏览器调试程序
五大浏览器：IE、CHROME,FIREFOX,OPERA,SAFARI.调试用谷歌和火狐。快捷键F12
相关资料链接：chrome调试工具使用之css篇
三、细节解析
1、制作网页要注意显示屏的分辨率和显示比例（默认100%）
2、自己写网页要注意格式层级，如果乱了，右键重排代码格式。
3、一个网页会有多个CSS文件，根据功能版面划分为多个文件，如专门清楚格式的CSS文件。这样方便日后维护。

</style>
<link rel="stylesheet" href=" "/>
<link rel="stylesheet" href=" "/>
<link rel="stylesheet" href=" "/>
</head>

4、文字和标签不能同级
错误如下：

<li>首页
     <ul class="second">

5、写代码出现错误，：hover前多了空格和鼠标滑过的子父级没区分对。

楚玉大王就是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识(十二)

一、三级菜单<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>lesson12</title> <style> * { margin: 0; padding: 0; } li { l...
复制链接

扫一扫

专栏目录