纯css打造选项卡

最新推荐文章于 2022-08-29 21:14:21 发布

别哭别梦别恋别醉别爱他

最新推荐文章于 2022-08-29 21:14:21 发布

阅读量117

点赞数

分类专栏：日报

本文链接：https://blog.csdn.net/lihua130427/article/details/100170566

版权

日报专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本文介绍了如何仅使用CSS技术创建功能完善的选项卡组件。详细讲解了相关样式设置和交互逻辑，提供源代码供读者参考，并鼓励遇到问题的读者与作者交流。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>css实现选项卡</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			form {
				width: 600px;
				height: 460px;
				background: #33344a;
				margin: 200px auto;
				border: 1px solid green;
				padding: 10px;
			}
			
			input {
				display: none;
			}
			
			input+i {
				font-style: normal;
				width: 100px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				display: inline-block;
				color: antiquewhite;
			}
			
			input:checked+i {
				background: #e74c3c;
				color: lawngreen;
			}
			
			input+i+span {
				display: none;
			}
			
			input:checked+i+span {
				width: 600px;
				height: 400px;
				display: block;
				background: white;
				position: absolute;
			
			}
		</style>
	</head>

	<body>
		<form>
			<label><input type="radio" name="nn" checked="checked"><i>水浒传</i><span>的数据库那尽快发动机卡萨讲课费见风使舵减肥的暗杀发动机撒但撒娇范德萨 附近的</span></label>
			<label><input type="radio" name="nn"><i>三国演义</i><span>科技萨芬就肯定撒解放军第三富家大室卡拉胶范德萨点击撒酒疯的女号给热尔我企鹅突然一天内师大会反复 减肥的酸辣粉很简单 发动机号发布VB是黄金花费巨额经济的风景就仿佛带你 。</span></label>
			<label><input type="radio" name="nn"><i>西游记</i><span>等会撒胡椒粉大家好萨计划发动机和萨 发货的时间啊恢复大师 打火机刷卡号范德萨发hi登记卡萨回复的发的回到家后三</span></label>
			<label><input type="radio" name="nn"><i>红楼梦</i><span>的撒范德萨的撒范德萨个范德萨发的大家萨拉艰苦奋斗考虑将案件发的离开就撒积分大师傅打范登记卡萨回复</span></label>
		</form>
	</body>

</html>

想要源码及有问题的找小编

别哭别梦别恋别醉别爱他

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css打造选项卡

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>css实现选项卡</title> <style> * { padding: 0; margin: 0; } form { ...
复制链接

扫一扫