如何做 - 部落格佈局
瞭解如何使用 CSS 建立響應式部落格佈局。
瞭解如何建立響應式部落格佈局，該佈局根據螢幕寬度在兩列和全寬之間變化。
調整瀏覽器視窗大小以檢視響應式效果
如何建立部落格佈局
步驟 1) 新增 HTML
示例
<div class="header">
<h2>部落格名稱</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>標題</h2>
<h5>標題描述，2017 年 12 月 7 日</h5>
<div class="fakeimg" style="height:200px;">圖片</div>
<p>一些文字..</p>
</div>
<div class="card">
<h2>標題</h2>
<h5>標題描述，2017 年 9 月 2 日</h5>
<div class="fakeimg" style="height:200px;">圖片</div>
<p>一些文字..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>關於我</h2>
<div class="fakeimg" style="height:100px;">圖片</div>
<p>關於我的其他資訊..</p>
</div>
<div class="card">
<h3>熱門帖子</h3>
<div class="fakeimg">圖片</div><br>
<div class="fakeimg">圖片</div><br>
<div class="fakeimg">圖片</div>
</div>
<div class="card">
<h3>關注我</h3>
<p>一些文字..</p>
</div>
</div>
</div>
<div class="footer">
<h2>頁尾</h2>
</div>
步驟 2) 新增 CSS
示例
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}
/* 頁首/部落格標題 */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
/* 建立兩個不等寬的浮動列 */
/* 左列 */
.leftcolumn {
float: left;
width: 75%;
}
/* 右列 */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
/* 假影像 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 為文章新增卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 清除列後的浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 頁尾 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 響應式佈局 - 當螢幕寬度小於 800px 時，兩列堆疊而不是並排顯示 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
自己動手試一試 »
提示：前往我們的 CSS 網站佈局 教程瞭解更多關於網站佈局的資訊。
提示：前往我們的 CSS 響應式 Web 設計 教程瞭解更多關於響應式 Web 設計和網格的資訊。
