如何做 - 結賬表單
瞭解如何使用 CSS 建立響應式結賬表單。
響應式結賬表單
如何建立結賬表單
步驟 1) 新增 HTML
使用 <form> 元素來處理輸入。您可以在我們的 PHP 教程中瞭解更多關於此資訊。
示例
<div class="row">
<div class="col-75">
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-50">
<h3>賬單地址</h3>
<label for="fname"><i class="fa fa-user"></i> 姓名</label>
<input type="text" id="fname" name="firstname" placeholder="John M. Doe">
<label for="email"><i class="fa fa-envelope"></i> 郵箱</label>
<input type="text" id="email" name="email" placeholder="john@example.com">
<label for="adr"><i class="fa fa-address-card-o"></i> 地址</label>
<input type="text" id="adr" name="address" placeholder="542 W. 15th Street">
<label for="city"><i class="fa fa-institution"></i> 城市</label>
<input type="text" id="city" name="city" placeholder="New York">
<div class="row">
<div class="col-50">
<label for="state">州</label>
<input type="text" id="state" name="state" placeholder="NY">
</div>
<div class="col-50">
<label for="zip">郵編</label>
<input type="text" id="zip" name="zip" placeholder="10001">
</div>
</div>
</div>
<div class="col-50">
<h3>支付</h3>
<label for="fname">接受的卡</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">卡上的姓名</label>
<input type="text" id="cname" name="cardname" placeholder="John More Doe">
<label for="ccnum">信用卡號</label>
<input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
<label for="expmonth">到期月份</label>
<input type="text" id="expmonth" name="expmonth" placeholder="September">
<div class="row">
<div class="col-50">
<label for="expyear">到期年份</label>
<input type="text" id="expyear" name="expyear" placeholder="2018">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="352">
</div>
</div>
</div>
</div>
<label>
<input type="checkbox" checked="checked" name="sameadr"> 收貨地址與賬單地址相同
</label>
<input type="submit" value="繼續結賬" class="btn">
</form>
</div>
</div>
<div class="col-25">
<div class="container">
<h4>購物車
<span class="price" style="color:black">
<i class="fa fa-shopping-cart"></i>
<b>4</b>
</span>
</h4>
<p><a href="#">商品 1</a> <span class="price">$15</span></p>
<p><a href="#">商品 2</a> <span class="price">$5</span></p>
<p><a href="#">商品 3</a> <span class="price">$8</span></p>
<p><a href="#">商品 4</a> <span class="price">$2</span></p>
<hr>
<p>總計 <span class="price" style="color:black"><b>$30</b></span></p>
</div>
</div>
</div>
步驟 2) 新增 CSS
使用 CSS Flexbox 建立響應式佈局
示例
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}
.container {
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}
input[type=text] {
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-bottom: 10px;
display: block;
}
.icon-container {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}
.btn {
background-color: #04AA6D;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}
.btn:hover {
background-color: #45a049;
}
span.price {
float: right;
color: grey;
}
/* 響應式佈局 - 當螢幕寬度小於 800px 時，使兩列堆疊而不是並排放置（並改變方向 - 將“購物車”列放在上面） */
@media (max-width: 800px) {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}
}
自己動手試一試 »
提示：前往我們的 HTML 表單教程 瞭解更多關於 HTML 表單的資訊。
提示：前往我們的 CSS 表單教程 瞭解更多關於如何設定表單元素樣式的資訊。
提示: 前往我們的 CSS Flexbox 教程 瞭解更多關於彈性盒子佈局模組的知識。
