如何 - 響應式價格表
瞭解如何使用 CSS 建立響應式價格表。
- 基礎版
- $ 9.99 / 年
- 10GB 儲存空間
- 10 個郵箱
- 10 個域名
- 1GB 頻寬
- 註冊
- 專業版
- $ 24.99 / 年
- 25GB 儲存空間
- 25 個郵箱
- 25 個域名
- 2GB 頻寬
- 註冊
- 高階版
- $ 49.99 / 年
- 50GB 儲存空間
- 50 個郵箱
- 50 個域名
- 5GB 頻寬
- 註冊
如何建立響應式價格表
步驟 1) 新增 HTML
示例
<div class="columns">
<ul class="price">
<li class="header">基礎版</li>
<li class="grey">$ 9.99 / 年</li>
<li>10GB 儲存空間</li>
<li>10 個郵箱</li>
<li>10 個域名</li>
<li>1GB 頻寬</li>
<li class="grey"><a href="#" class="button">註冊</a></li>
</ul>
</div>
步驟 2) 新增 CSS
示例
* {
box-sizing: border-box;
}
/* 建立三個等寬的列 */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* 樣式列表 */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* 懸停時新增陰影 */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
/* 價格頭部 */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* 列表項 */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* 灰色列表項 */
.price .grey {
background-color: #eee;
font-size: 20px;
}
/* "註冊" 按鈕 */
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* 將三列的寬度更改為 100%
(以便在小螢幕上堆疊) */
@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
自己動手試一試 »
