用css模仿学习猿地价格栏_css手写底部价格购买栏-CSDN博客

本文链接：https://blog.csdn.net/weixin_49213878/article/details/124338759

在这里插入图片描述
HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="./new_file.css">
</head>
<body>
	<div class="box">
		
		<div>期限
			<div >
				<span>512</span>
				<span><a href="#">立即购买</a></span>
			</div>
		</div>
		<div>永久
			<div >
				<span>1024</span>
				<span><a href="#">立即购买</a></span>
			</div>
		</div>
		<div>组合
			<div >
				<span>2048</span>
				<span><a href="#">立即购买</a></span>
			</div>
		</div>
		<div>会员
				<div >
					<span>4092</span>
					<span><a href="#">立即购买</a></span>
				</div>
		</div>
	</div>
	
</body>
</html>

css代码


```html
.box{
	width:300px;
	height :40px;
/* 	border:1px solid red;
 */	position:relative;
}
.box>div{
	width:73px;
	height:30px;
/* 	border:1px solid green;
 */	float:left;
	text-align:center;
	padding-top:10px ;
	color:white;
}
.box>div:first-child{
	background-color: #63a7f2;
	border-radius: 10px 0px 0px 0px;
}
.box>div:nth-child(2){
	background-color:#009764;
}
.box>div:nth-child(3){
	background-color:#da1941;
}
.box>div:last-child{
	background-color:#eab719;
	border-radius:0px 10px 0px 0px;
}
.box>div>div{
	width:292px;
	height:60px;
/* 	border:1px solid red;
 */	position:absolute;
	top:40px;
	left:0px;
	text-align:center;
	padding-top:30px;
	display:none;
	border-radius:0px 0px 10px 10px;
	
}
.box>div>div>span:first-child{
	width:20px;
	height:10px;
/* 	border:1px solid red;
 */	margin-right:10px;
	font-size:20px;
	font-weight:blod;
}
.box>div>div>span:nth-child(2){
	width:20px;
	height:10px;
	font-size:15px;
	background-color:white;
	border-radius:5px 5px 5px 5px;
	
}
.box>div>div>span:nth-child(2)>a{
	text-decoration:none;
}
.box>div:first-child>div{
	background:linear-gradient(50deg, #63a7f2, #63a7f2);
	display:block;
}
.box>div:nth-child(2)>div{
	background:linear-gradient(50deg,#009764,#008e5e);
	
}
.box>div:nth-child(3)>div{
	background:linear-gradient(50deg,#ff3b64,#c00029);
	
}
.box>div:last-child>div{
	background:linear-gradient(50deg,#eab719,#e4ae0c);
	
}


.box>div:hover>div{
	display:block;
}