如何做 - 结账表单
了解如何使用 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 教程 了解更多关于弹性盒子布局模块的知识。
