数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言程序设计
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何使用 CSS 创建“优惠券”？
我们将了解如何使用 CSS 创建优惠券。为此，我们需要在顶部设置公司名称，下方放一张图片，然后是优惠券代码和表示优惠券何时到期的文本。
为优惠券设置父容器
我们在此处设置父 div。在此 div 中，我们将设置用于文本、图像等的 div −
<div class="couponContainer"> <!-- place the child divs --> </div>
设置父容器的样式 −
.couponContainer {
border: 5px dashed #bbb;
width: 80%;
border-radius: 15px;
margin: 0 auto;
max-width: 600px;
}
设置优惠券标题的容器
现在，我们将设置优惠券的标题 −
<div class="detailContainer"> <h3>Food Inc ©</h3> </div>
设置优惠券标题的容器的样式 −
.detailContainer {
padding: 2px 16px;
background-color: #d4d4d4;
}
优惠券图片
使用 <img> 放置优惠券图片 −
<img src="https://tutorialspoint.com/food_production_operations/images/non_citrus_fruits.jpg"/>
用于详细信息的容器
这是用于其他内容（包括优惠券代码、到期日期等）的容器 −
<div class="detailContainer" style="background-color:white"> <h2>Fruits</h2> </div> <div class="detailContainer"> <p>Use code <span class="promo">Free24</span> to get 24% off</p> <p class="expiryDate">Expires in 10 days</p> </div>
详细信息容器的样式 −
.detailContainer {
padding: 2px 16px;
background-color: #d4d4d4;
}
设置促销和到期日期的样式
此处，我们设置了促销代码文本和到期日期（即优惠券代码何时到期）的 CSS 样式 −
.promo {
background: rgb(104, 104, 104);
color: white;
padding: 10px;
}
.expiryDate {
color: red;
font-weight: bold;
}
示例
要使用 CSS 创建优惠券，代码如下 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
img {
width: 100%;
}
.couponContainer {
border: 5px dashed #bbb;
width: 80%;
border-radius: 15px;
margin: 0 auto;
max-width: 600px;
}
.detailContainer {
padding: 2px 16px;
background-color: #d4d4d4;
}
.promo {
background: rgb(104, 104, 104);
color: white;
padding: 10px;
}
.expiryDate {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="couponContainer">
<div class="detailContainer">
<h3>Food Inc ©</h3>
</div>
<img src="https://tutorialspoint.com/food_production_operations/images/non_citrus_fruits.jpg"/>
<div class="detailContainer" style="background-color:white">
<h2>Fruits</h2>
</div>
<div class="detailContainer">
<p>Use code <span class="promo">Free24</span> to get 24% off</p>
<p class="expiryDate">Expires in 10 days</p>
</div>
</div>
</body>
</html>
更新于：17-11-2023
677 次浏览
广告