HTML标题切换

最新推荐文章于 2023-08-25 13:32:54 发布

程序ape老李

最新推荐文章于 2023-08-25 13:32:54 发布

阅读量663

点赞数

分类专栏：网页设计

本文链接：https://blog.csdn.net/qq_42673921/article/details/89339630

版权

网页设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML两个标题的切换

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

		#li{/*border:2px solid red;*/width: 800px;height: 600px;margin: 20px auto;position: relative;}

		#l1,#l3{border-top-left-radius: 10px;border-top-right-radius: 10px;width: 100px;height: 40px;background: #666;position: absolute;top:20px;padding-top:7px;border: 1px solid black;border-bottom: 0px;text-align: center;}

		#l3{left: 105px;}
		
		#l2,#l4{width: 800px;height: 500px;background: #999;position: absolute;top: 55px;border: 1px solid black;border-top-right-radius: 10px;padding-top:50px;padding-left:50px;font-size: 20px;font-family: monospace;color: rgb(255, 0, 221);}

		#mj1:checked~#li #l1{z-index: 3;top: 10px;background: #999;}

		#mj1:checked~#li #l2{z-index: 2;background: #999;}

		#mj2:checked~#li #l3{z-index: 3;top: 10px;background: #999;}
		
		#mj2:checked~#li #l4{z-index: 2;background: #999;}
	</style>
</head>
<body>
	<input type="radio" name="ee" id="mj1" checked="true" style="display: none">
	<input type="radio" name="ee" id="mj2" style="display: none">
	<div id="li">
		<div id="l1"><label for="mj1">标题一</label></div>
		<div id="l2">三尺长剑斩不断，相思情缠。</div>
		<div id="l3"><label for="mj2">标题二</label></div>
		<div id="l4">你许我一世情长，我与你一生相伴。</div>
	</div>
</body>
</html>