css制作价格目录

最新推荐文章于 2022-05-29 09:03:39 发布

feixs1

最新推荐文章于 2022-05-29 09:03:39 发布

阅读量260

点赞数

分类专栏：前端网页文章标签： css html

本文链接：https://blog.csdn.net/feixs1/article/details/106549266

版权

前端网页专栏收录该内容

5 篇文章 1 订阅

订阅专栏

今天，又是一个观看学习大佬学习的一天，用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;
}

这几天才要开始预习课程考试了~~~
又要成为一个莫得感情的考试杀手

feixs1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css制作价格目录

今天，又是一个观看学习大佬学习的一天，用css制作在网页上拉伸的价格标签，当然这个可以用到很多地方。大家在学习的时候可以发挥想象应用到别的方面，我给大家分享一下我的学习代码哈！！！ css按钮特效接下来分享一下代码哈！html代码：<!DOCTYPE html><html lang="en"><head> <meta charset
复制链接

扫一扫

专栏目录