CSS頁面布局是Web頁面設計中非常重要的一部分,它可以使你的網站看起來更加專業和美觀。下面是一些常見的CSS頁面布局代碼示例,供參考:
/*兩欄布局*/ .container { display: flex; } .sidebar { width: 20%; } .content { width: 80%; } /*三欄布局*/ .container { display: flex; } .sidebar1 { width: 20%; } .content { width: 60%; } .sidebar2 { width: 20%; } /*全屏布局*/ html, body { height: 100%; margin: 0; padding: 0; } .container { height: 100%; display: flex; justify-content: center; align-items: center; } .content { width: 80%; max-width: 1200px; height: 80%; max-height: 800px; } /*響應式布局*/ .container { display: flex; flex-wrap: wrap; justify-content: center; } .box { width: 100%; } @media (min-width: 768px) { .box { width: 50%; } } @media (min-width: 992px) { .box { width: 33.3%; } }
無論你需要哪種類型的布局,以上這些代碼都可以根據你的需要進行修改和定制。在實際應用中,你可能需要使用更多樣的選擇器、屬性和值來實現你想要的效果。
上一篇css頁面布局向右移動