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;
}