html css制作简单优惠卷

最新推荐文章于 2024-06-12 14:22:32 发布

m0_68605510

最新推荐文章于 2024-06-12 14:22:32 发布

阅读量890

点赞数 1

文章标签： html5 css

本文链接：https://blog.youkuaiyun.com/m0_68605510/article/details/128234212

版权

本文介绍了一个使用HTML和CSS实现的优惠券展示页面布局案例。该布局采用Flexbox技术进行排版，通过radial-gradient设置背景渐变效果，并对优惠券的各项元素进行了详细的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>无标题页</title>
    <style>
		body{
			background-color: darkgrey;
			
		}
		.raida{
		display:flex;
		 height: 500px;
        width: 500px;
		text-align: center;
		justify-content: center;
		align-items: center;
			
		}

.raidal2 {
    height: 100px;
    width: 10px; 
	text-align: center;
	
	background:radial-gradient(20px at center left,transparent 50%,white 50%);
}

.raidal3 {
    height: 100px;
    width: 280px;
	color:red;
	text-align:center;
	background:radial-gradient(20px at center right,transparent 50%, aquamarine 50%);
	display: flex;
	
}
.right{
	flex: 5;
	background-color: white;
	display: flex;
	flex-direction: column;
}
.title{
	color: aqua;
	text-align: center;
}
img{
	width: 100px;
	height: 75px;
}
.left{
	text-align: center;
	margin-right: 10px;
	flex: 3;
	display: flex;
	flex-direction: column;
	background-color: aquamarine;
}
</style>
</head>
<body>
	<div class='raida'>
<div class='raidal2'></div>
<div class='raidal3'>
<div class="right">
	<div class="title">优惠卷</div>
	<div><img src="img/goods.jpeg"/></div>
</div>
<div class="left">
	<div>￥<text style="font-weight: bolder;font-size: 25px;">30</text></div>
	<div><text style="font-size: 11px;">满79元可用</text></div>
	<div><text style="font-size: 13px;">立即使用</text></div>
</div>
</div>
	</div>
</body>
</html>

参考：https://blog.youkuaiyun.com/echozly/article/details/122210055