今天,又是一个观看学习大佬学习的一天,用css制作在网页上拉伸的价格标签,当然这个可以用到很多地方。
大家在学习的时候可以发挥想象应用到别的方面,我给大家分享一下我的学习代码哈!!!
css按钮特效
接下来分享一下代码哈!
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="2.css">
<title>百度网盘定价目录</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="name">
<h3>免费用户</h3>
</div>
<div class="details">
<div class="content">
<h2>¥0 <span>/月</span></h2>
<p>不开通会员的网盘网速卡的死死的</p>
<a href="#">立即购买</a>
</div>
</div>
</div>
<div class="card">
<div class="name">
<h3>普通会员</h3>
</div>
<div class="details">
<div class="content">
<h2>¥10 <span>/月</span></h2>
<p>普通会员稍微能够下载一下东西</p>
<a href="#">立即购买</a>
</div>
</div>
</div>
<div class="card">
<div class="name">
<h3>超级会员</h3>
</div>
<div class="details">
<div class="content">
<h2>¥20 <span>/月</span></h2>
<p>下载可以稍微顺畅无阻</p>
<a href="#">立即购买</a>
</div>
</div>
</div>
</div>
</body>
</html>
css代码:
*{
margin: 0;
margin: 0;
font-family: '微软雅黑',sans-serif;/*字体为衬线*/
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container{
position: relative;
display: flex;
width: 1100px;
justify-content: space-between;/*三个模块两端对齐*/
align-items: center;
}
.container .card{
position: relative;
width: 300px;
cursor: pointer;/*当鼠标到card上形状变为抓手形状*/
}
.container .card .name{
position: relative;
padding: 10px 0;
border: 2px solid #000;
text-align: center;
background: #fff;
z-index: 1;/*name块层级*/
}
.container .card .name h3{
font-weight: 500;
font-size: 1.5em;
}
.container .card .details{
position: relative;
text-align: center;
height: 0px;
transition: 0.5s;
border: 2px solid #000;
margin-top: -2px;
overflow: hidden;
top: -2px;
}
.container .card:hover .details{
height: 316px;
}
.container .card .details .content{
position: relative;
padding: 40px 20px;
}
.container .card .details .content h2{
font-size: 3em;
font-weight: 500;
}
.container .card .details .content h2 span{
font-size: 0.4em;
}
.container .card .details .content a{
position: relative;
display: inline-block;
padding: 10px 20px;
margin-top: 15px;
background: rgba(0,0,0,0.9);
color: #fff;
text-decoration: none;/*网页链接没有下划线*/
}
.container .card:nth-child(1) .name{
background: #bfdaae;
}
.container .card:nth-child(1) .details{
background:#bfdabe;
}
.container .card:nth-child(2) .name{
background:#dadebf;
}
.container .card:nth-child(2) .details{
background:#dadecf;
}
.container .card:nth-child(3) .name{
background:#f5f5f5;
}
.container .card:nth-child(3) .details{
background:#f5f5e5;
}
这几天才要开始预习课程考试了~~~
又要成为一个莫得感情的考试杀手