master

分支 (1)

管理

管理

master

project
/
价格选项卡.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>价格选项卡</title>
		<style type="text/css">
			#box1{
				/* border: 1px solid red; */
				float: left;
				position: relative;
			}
			#box1>div{
				/* border: 1px solid green; */
				float: left;
				width: 60px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 14px;
				color: #fff;
				font-weight: bold;
			}
			#box1>div:nth-child(1){
				background-color: #63a7f2;
				border-radius: 10px 0 0 0;
			}
			#box1>div:nth-child(2){
				background-color: green;
			}
			#box1>div:nth-child(3){
				background-color: red;
			}
			#box1>div:last-child{
				background-color: yellow;
				border-radius: 0 10px 0 0;
			}
			#box1>div>div{
				/* border: 1px red solid; */
				position: absolute;
				width: 240px;
				height: 100px;
				line-height: 100px;
				/* background-color: #0000FF; */
				top: 40px;
				left: 0px;
				display: none;
				border-radius: 0 0 10px 10px;
			}
			#box1>div:hover>div{
				display: block;
			}
			#box1>div>div>span{
				font-size: 18px;
				color: #000000;
			}
			#box1>div:nth-child(1)>div{
				background: linear-gradient(50deg,#63a7f2,#63a7f2);
				display: block;
			}
			#box1>div:nth-child(2)>div{
				background: linear-gradient(50deg,green,green);
			}
			#box1>div:nth-child(3)>div{
				background: linear-gradient(50deg,red,red);
			}
			#box1>div:last-child>div{
				background: linear-gradient(50deg,yellow,yellow);
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div>
				限期
				<div>
					<span>￥512</span>
					<button>立即购买</button>
				</div>
			</div>
			<div>
				永久
				<div>
					<span>￥1024</span>
					<button>立即购买</button>
				</div>
			</div>
			<div>
				组合
				<div>
					<span>￥2048</span>
					<button>立即购买</button>
				</div>
			</div>
			<div>
				会员
				<div>
					<span>￥4096</span>
					<button>立即购买</button>
				</div>
			</div>
		</div>
		<!-- <div id="box2">

		</div> -->
	</body>
</html>