資料結構
網路
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.tw/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.tw/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 次瀏覽
廣告