【第一次尝试用VSCode中GPT插件进行代码编写】

最新推荐文章于 2024-05-17 10:18:09 发布

hengxin2014

最新推荐文章于 2024-05-17 10:18:09 发布

阅读量490

点赞数

文章标签： vscode gpt javascript

本文链接：https://blog.csdn.net/hengxin2014/article/details/130923310

版权

第一次尝试用VSCode中GPT插件进行代码编写

简单描述需求
输出结果1
运行效果图1
进行一些修改

简单描述需求

你好！这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

输出结果1

看起来还可以

这个页面使用了Flexbox布局来实现四个专栏的排列，并使用了CSS伪类:hover来实现鼠标悬停时显示二级按钮的效果。您可以根据需要进行修改和定制。

<!DOCTYPE html>
<html>
<head>
	<title>My Cool Website</title>
	<style>
		body {
			background-color: #1E90FF;
			color: white;
			font-family: Arial, sans-serif;
		}
		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
		}
		.row {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
		}
		.col {
			flex-basis: calc(25% - 10px);
			margin-bottom: 10px;
		}
		.col a {
			display: block;
			background-color: #4682B4;
			color: white;
			text-align: center;
			padding: 10px;
			border-radius: 5px;
			text-decoration: none;
			transition: background-color 0.3s ease;
		}
		.col a:hover {
			background-color: #87CEFA;
		}
		.submenu {
			display: none;
			position: absolute;
			top: 50px;
			left: 0;
			background-color: #4682B4;
			padding: 10px;
			border-radius: 5px;
			z-index: 1;
		}
		.col:hover .submenu {
			display: block;
		}
		.submenu a {
			display: block;
			color: white;
			text-align: center;
			padding: 5px;
			border-radius: 5px;
			text-decoration: none;
			transition: background-color 0.3s ease;
		}
		.submenu a:hover {
			background-color: #87CEFA;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col">
				<a href="#">专栏1</a>
				<div class="submenu">
					<a href="#">按钮1</a>
					<a href="#">按钮2</a>
					<a href="#">按钮3</a>
					<a href="#">按钮4</a>
				</div>
			</div>
			<div class="col">
				<a href="#">专栏2</a>
				<div class="submenu">
					<a href="#">按钮1</a>
					<a href="#">按钮2</a>
					<a href="#">按钮3</a>
					<a href="#">按钮4</a>
				</div>
			</div>
			<div class="col">
				<a href="#">专栏3</a>
				<div class="submenu">
					<a href="#">按钮1</a>
					<a href="#">按钮2</a>
					<a href="#">按钮3</a>
					<a href="#">按钮4</a>
				</div>
			</div>
			<div class="col">
				<a href="#">专栏4</a>
				<div class="submenu">
					<a href="#">按钮1</a>
					<a href="#">按钮2</a>
					<a href="#">按钮3</a>
					<a href="#">按钮4</a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

运行效果图1

难道ai分不清上面下面？
在这里插入图片描述

进行一些修改

在这里插入图片描述
修改后：
好的，您可以使用JavaScript来实现这个功能。具体来说，您可以在每个专栏的标签上添加一个onclick事件，当用户点击时，JavaScript代码会检查该专栏下的二级菜单是否已经显示，如果已经显示，则隐藏它，否则显示它。以下是修改后的HTML和JavaScript代码：

<!DOCTYPE html>
<html>
<head>
	<title>My Cool Website</title>
	<style>
		body {
			background-color: #1E90FF;
			color: white;
			font-family: Arial, sans-serif;
		}
		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
		}
		.row {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
		}
		.col {
			flex-basis: calc(25% - 10px);
			margin-bottom: 10px;
			position: relative;
		}
		.col a {
			display: block;
			background-color: #4682B4;
			color: white;
			text-align: center;
			padding: 10px;
			border-radius: 5px;
			text-decoration: none;
			transition: background-color 0.3s ease;
		}
		.col a:hover {
			background-color: #87CEFA;
		}
		.submenu {
			display: none;
			position: absolute;
			top: 50px;
			left: 0;
			background-color: #4682B4;
			padding: 10px;
			border-radius: 5px;
			z-index: 1;
		}
		.col.active .submenu {
			display: block;
		}
		.submenu a {
			display: block;
			color: white;
			text-align: center;
			padding: 5px;
			border-radius: 5px;
			text-decoration: none;
			transition: background-color 0.3s ease;
		}
		.submenu a:hover {
			background-color: #87CEFA;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col" onclick="toggleSubmenu(this)">
				<a href="#">专栏1</a>
				<div class="submenu">
					<a href="#">按钮1</a>
					<a href="#">按钮2</a>
					<a href="#">按钮3</a>
					<a href="#">按钮4</a>
				</div>
			</div>
			<div class="col" onclick="toggleSubmenu(this)">
				<a href="#">专栏2</a>
				<div class="submenu">
					<a href="#">按钮1</a>
					<a href="#">按钮2</a>
					<a href="#">按钮3</a>
					<a href="#">按钮4</a>
				</div>
			</div>
			<div class="col" onclick="toggleSubmenu(this)">
				<a href="#">专栏3</a>
				<div class="submenu">
					<a href="#">按钮1</a>
					<a href="#">按钮2</a>
					<a href="#">按钮3</a>
					<a href="#">按钮4</a>
				</div>
			</div>
			<div class="col" onclick="toggleSubmenu(this)">
				<a href="#">专栏4</a>
				<div class="submenu">
					<a href="#">按钮1</a>
					<a href="#">按钮2</a>
					<a href="#">按钮3</a>
					<a href="#">按钮4</a>
				</div>
			</div>
		</div>
	</div>
	<script>
		function toggleSubmenu(col) {
			var submenu = col.querySelector('.submenu');
			if (col.classList.contains('active')) {
				submenu.style.display = 'none';
				col.classList.remove('active');
			} else {
				submenu.style.display = 'block';
				col.classList.add('active');
			}
		}
	</script>
</body>
</html>

在这个代码中，我们为每个专栏的标签添加了一个onclick事件，该事件会调用toggleSubmenu函数，并将当前专栏的DOM元素作为参数传递给它。toggleSubmenu函数会检查该专栏是否已经处于激活状态（即二级菜单已经显示），如果是，则隐藏二级菜单并将该专栏的active类移除；否则，显示二级菜单并将该专栏的active类添加。在CSS中，我们使用.active类来控制二级菜单的显示和隐藏。
在这里插入图片描述
后续再继续跟进，感觉大有可为。。。搭配一些其他工具使用可以很好的提升开发效率。

hengxin2014

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【第一次尝试用VSCode中GPT插件进行代码编写】

第一次尝试用VSCode中GPT插件进行代码编写简单描述需求输出结果1运行效果图1进行一些修改简单描述需求输出结果1看起来还可以这个页面使用了Flexbox布局来实现四个专栏的排列，并使用了CSS伪类:hover来实现鼠标悬停时显示二级按钮的效果。您可以根据需要进行修改和定制。<!DOCTYPE html><html><head> <title>My Cool Website</title> <style> bo
复制链接

扫一扫