移动端布局
一.属性(弹性盒子)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/acfcc6827ec4015703794fbecefce416.png)
<body>
<div class="main">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
<div class="c4">4</div>
</div>
</body>
.main {
width: 400px;
height: 700px;
background-color: blue;
display: flex;
flex-wrap: nowrap;
flex-flow: row wrap;
justify-content: center;
align-content: flex-start;
}
.c1 {
width: 100px;
height: 100px;
background-color: red;
}
.c2 {
width: 100px;
height: 100px;
background-color: yellow;
}
.c3 {
width: 100px;
height: 100px;
background-color: green;
}
.c4 {
width: 200px;
height: 100px;
background-color: black;
}
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a0abfcc82c6adcf8d87b3db8046120a4.png)
二.属性(弹性项目)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/76b4a87c2694b44c024fcfcbd850c3c8.png)
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/00e2ca06da28fab69740a481b68f6053.png)
三.图文混排+滑动效果
代码
<body>
<div class="top">
<ul>
<li>
<img src="/img/购物车.png" alt="">
<span>头部米面</span>
</li>
<li><img src="/img/购物车.png" alt="">
<span>粮油米面</span>
</li>
<li><img src="/img/购物车.png" alt="">
<span>粮油米面</span>
</li>
<li><img src="/img/购物车.png" alt="">
<span>粮油米面</span>
</li>
<li><img src="/img/购物车.png" alt="">
<span>粮油米面</span>
</li>
<li><img src="/img/购物车.png" alt="">
<span>粮油米面</span>
</li>
<li><img src="/img/购物车.png" alt="">
<span>尾部米面</span>
</li>
</ul>
</div>
<div class="main"></div>
<div class="bottom"></div>
</body>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
html {
font-size: 16px;
}
.top {
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
background-color: rgb(0, 255, 13);
}
.top ul {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
.top ul li {
width: 18%;
height: 100%;
background-color: rgb(183, 0, 255);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.top ul li img {
width: 68%;
height: auto;
}
.main {
position: fixed;
width: 100%;
height: 400px;
top: 100px;
left: 0;
background-color: rgb(255, 0, 128);
}
.bottom {
position: fixed;
width: 100%;
height: 200px;
top: 500px;
left: 0;
background-color: blue;
}
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f41621af0d652d06ca75cce16ecdae89.png)
框架
* {
margin: 0;
padding: 0;
}
html {
font-size: 16.10vw;
}
body {
font-size: 16px;
}
.top {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 1.33rem;
width: 100%;
background-color: burlywood;
}
.main {
position: fixed;
top: 1.33rem;
height: 8.955rem;
width: 100%;
background-color: blue;
}
.buttom {
position: fixed;
bottom: 0;
left: 0;
height: 1.235rem;
background-color: aquamarine;
width: 100%;
}
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/249d740996401dfa0e618302c1025768.png)
练习
一.题目一
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e1a97d168e7175a8911943b8621d1d61.png)
二.题目二
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/82aedd98e03d419caad046035569386e.png)