【css】實現一張折扣券
阿新 • • 發佈：2020-12-22
技術標籤：css
第一種實現方式
使用flex佈局實現文字水平垂直居中。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</ 
第二種實現方式
使用 text-align:center 實現文字的水平居中；
使用 hight等於line-height、vertical-align:top實現文字的垂直居中。
<!-- test.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
div{
float: left;
}
.left{
width: 100px;
height: 100px;
background: blanchedalmond url(./images/icon_ticket_2.png) no-repeat center;
border-bottom-right-radius: 50px;
box-shadow: 50px 0 0 coral ;
}
.middle{
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: coral;
color: white;
font-size: 36px;
border-radius: 6px;
border-right: 2px dashed white;
}
.discount{
font-size: 48px;
font-weight: bolder;
vertical-align: top;
}
.right{
width: 120px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: coral;
color: white;
font-size: 36px;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="ticket">
<div class="left"></div>
<div class="middle">
<span class="discount">5.2</span>折 商品券
</div>
<div class="right">
<span>購</span>
</div>
</div>
</body>
</html>
