【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>小米商城布局</title><link rel="stylesheet" href="common.css">
</head><body><div class="container"><div class="header  clear_fix"><div class="header-left"><h3>智能穿戴</h3></div><div class="header-right"><a href="">熱門</a><a href="">穿戴</a></div></div><div><ul class="list "><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li></ul></div></div></body></html>

css

body,
ul,
li,
h3 {margin: 0;padding: 0;
}ul,
li {list-style: none;
}a {text-decoration: none;color: #333;
}.container {width: 1226px;margin: auto;background-color: aqua;
}.header {margin-top: 30px;}.header-left {float: left;width: 100px;height: 50px;}.header-right {float: right;width: 100px;height: 50px;text-align: center;
}.clear_fix::after {content: "";display: table;clear: both;}.clear_fix {*zoom: 1;/* 兼容舊版IE */
}.list {display: grid;grid-template-columns: repeat(5, 1fr);/* 5列均分寬度 */grid-auto-rows: 120px;/* 每行默認高度為120px */gap: 10px;/* li之間的間距 */margin-top: 40px;background-color: #df7b7b;
}.list li {background-color: antiquewhite;color: black;text-align: center;
}/* 第一個 li：占兩行高度 */
.list li:nth-child(1) {grid-row: span 2;/* 占據兩行 */grid-column: 1 / 2;/* 放在第一列 */}/* 從第 2 個開始”并且“不超過第 9 個”的元素*/
.list li:nth-child(n+2):nth-child(-n+9) {height: 120px;
}

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

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