<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米官网</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1500px;
height: 460px;
background-color: beige;
background-image: url(../图片/微信图片_20231126160033.webp);
}
.search{
width: 200px;
height: 33px;
padding-top: 5px;
}
.top{
width: 1500px;
height: 60px;
background-color: wheat;
display: flex;
justify-content: center;
}
.top1{
padding-right: 40px;
}
.top2{
list-style: none;
display: flex;
justify-content: left;
}
.top2 li{
width: 90px;
height: 25px;
background-color: bisque;
padding-top: 20px;
padding-right: 15px;
}
.top3{
width: 250px;
height: 400px;
background-color:whitesmoke;
justify-content: left;
padding-right: 40px;
}
.top3 li{
width:250px;
height: 40px;
}
.bottom{
width: 1400px;
height: 460px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<div class="top1">
<img src="../图片/favicon.ico">
</div>
<div>
<ul class="top2">
<li>Xiaomi手机</li><li>Redmi手机</li><li>电视</li><li>笔记本</li><li>平板</li><li>家电</li><li>路由器</li><li>服务中心</li><li>社区</li>
</ul >
</div>
<div class="search">
<input type="text" class="search" id="search" placeholder="搜索">
</div>
</div>
<div class="left">
<ul class="top3">
<li>手机</li> <li>电视</li> <li>家电</li> <li>笔记本 平板</li> <li>出行 穿戴</li> <li>耳机 音箱</li> <li>健康 儿童</li> <li>生活 箱包</li> <li>智能 路由器</li> <li>电源 配件</li>
</ul>
</div>
</div>
</body>
</html>
结果:
笔记
盒子模型:
Content+border+padding margin 10 px auto
弹性盒子
Display——flex
主轴方向可变,默认水平从左往右
Flex-direction:row主轴从左往右 后加reverse为从左往右
Column为从上到下 后加则为从下往上
Justify-content:center 水平居中space-between两边贴边,中间平分剩余空间 flew-end 向右对齐
Space-around:平分剩下的空间
交叉轴对齐方式
Align-items: center 垂直居中
Align-content:
给父项加上flew-wrap:wrap 自动换行
子标签{ order:数值 flew-shrink:数值/改成0则不被压缩/ } 其中值越小越靠前
Grid布局
Display:grid;
格式
Repeat(重复几次 多少像素 )
缩写
Grid-row:2/4
Grid-columns:1/3