【html常見頁面布局】

考拉商城界面

效果
html
css

效果

在這里插入圖片描述

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head><body><div class="container"><div class="container-left"></div><div class="container-mid"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div><div class="container-right"><div class="item-header">header</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div></div></body></html>

css

.body {margin: 0;padding: 0;
}.container {width: 1100px;margin: 0 auto;/*居中*/height: 800px;display: flex;
}.container-left {width: 300px;background-color: rgb(171, 171, 246);
}.container-mid {flex: 1;/*中間自適應*/display: grid;grid-template-rows: 1fr 1fr;grid-template-columns: 1fr 1fr;background-color: rgb(165, 122, 122);gap: 10px;
}.item {border: solid 1px black;
}.container-right {width: 200px;/* background-color: rgb(153, 218, 153); */display: flex;flex-direction: column;
}.item-header {height: 60px;background-color: #b9b371;
}.box {flex: 1;background-color: #bbf8f9;border: solid 1px black;}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/89161.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/89161.shtml
英文地址，請注明出處：http://en.pswp.cn/web/89161.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！