css制作折叠菜单

最新推荐文章于 2024-04-28 10:35:17 发布

如鹰展翅上腾

最新推荐文章于 2024-04-28 10:35:17 发布

阅读量2.8k

点赞数

分类专栏： html+css排版部分文章标签： css 手风琴

本文链接：https://blog.csdn.net/wdq121516/article/details/89022158

版权

html+css排版部分专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css制作折叠菜单

1.css制作折叠菜单的原理

1.css制作折叠菜单利用的是：target伪类。不懂的可以复制下面的代码运行体会一下

网页部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			a{
				text-decoration: none;
				width: 100%;
				height: 40px;
				line-height: 40px;
				font-size: 30px;
				color: white;
				display: inline-block;
				border-bottom: ridge 10px red;
			}
			.wrap ul{
				display: none;
				height: 120px;
				background: black;
				color: white;
			}
			.wrap>li{
				width: 300px;
				background: red;
			
				text-align: center;
			}
			ul:target{
				display: block;
			}
		</style>
	</head>
	<body>
		<ul class="wrap">
			<li>
				<a href="#home">首页</a>
				<ul id="home">
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
				</ul>
			</li>
			<li>
				<a href="#hot">热门</a>
				<ul id="hot">
					<li>热门</li>
					<li>热门</li>
					<li>热门</li>
				</ul>
			</li>
			<li>
				<a href="#res">注册</a>
				<ul id="res">
					<li>注册</li>
					<li>注册</li>
					<li>注册</li>
				</ul>
			</li>
			
		</ul>
	</body>
</html>

如鹰展翅上腾

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
css制作折叠菜单

css制作折叠菜单1.css制作折叠菜单的原理 1.css制作折叠菜单利用的是：target伪类。不懂的可以复制下面的代码运行体会一下网页部分<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style&gt...
复制链接

扫一扫