0
点赞
收藏
分享

微信扫一扫

使用flex弹性造APP首页轮子【前端Flex弹性布局】

一.使用flex弹性造一个APP首页轮子

这是内科大企业课(全栈开发_web前端的课程),需求如下:

使用Flex弹性布局,仿写下面的页面: 在这里插入图片描述

二.需求分析和完成步骤

先分析这个页面,我们可以先写一个大的盒子,作为整个页面:

<div id=content>
</div>

设置其为弹性布局,排列顺序为从上到下

#content {
display: flex;
flex-direction: column;
}

将下面这部分作为一块,使用一个盒子。

在这里插入图片描述

然后将下面的图片,放到最上方,写一个div盒子: 在这里插入图片描述

<div id=top>
<div id=time>
<img src=./work1/img/01.png alt=>
</div>
</div>

css为:

#top {
width: 100%;
height: 310px;
background-color: #3476ed;
border-bottom-left-radius: 45px;
border-bottom-right-radius: 45px;
}

效果预览: 在这里插入图片描述

将这一行作为一个div盒子:

image-20230307085314430

html为:

<div id=first>
<span>首页</span>
<input type=text size=40 placeholder=搜索相关信息>
<img src=./work1/img/2.png alt=>
<img src=./work1/img/3.png alt=>
</div>

CSS为:

#first {
display: flex;
justify-content: space-around;

}

#first span {
font-size: 30px;
color: white;
font-family: 微软雅黑;
}

#first input {
border-radius: 10px;
border: none;
background: url('../img/1.png') no-repeat 0px 5px;
background-color: white;
color: #c6c6c6;
}

效果如下:

image-20230307085428840

然后放置一张图片上去:

<div id=img>
<img src=./work1/img/4.png alt=>
</div>

设置其CSS,利用弹性布局将其在主轴居中,然后使用margin设置其四周的位置:

#img{
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0px ;
}

效果展示:

image-20230307085610444

然后是这一部分:

image-20230307090523273

<div id=body>
<div><img src=./work1/img/5.png alt=><span>基金</span></div>
<div><img src=./work1/img/6.png alt=><span>股票</span></div>
<div><img src=./work1/img/7.png alt=><span>借钱</span></div>
<div><img src=./work1/img/8.png alt=><span>保障</span></div>
<div><img src=./work1/img/9.png alt=><span>签到</span></div>
<div><img src=./work1/img/10.png alt=><span>抽红包</span></div>
<div><img src=./work1/img/11.png alt=><span>信用卡</span></div>
<div><img src=./work1/img/12.png alt=><span>活期理财</span></div>
<div><img src=./work1/img/13.png alt=><span>税贷计算</span></div>
<div><img src=./work1/img/14.png alt=><span>客服</span></div>
</div>

CSS内容如下:

#body {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
/* align-content: center; */
}
#body div{
display: flex;
flex-flow: column nowrap;
flex-basis: 20%;
align-items: center;
margin-top: 50px;
}

效果如下:

image-20230307090658569

本块解释:

将body盒子设置弹性布局,主轴为y轴,设置为运行换行:“flex-wrap: wrap;”。内容发布为:平分其剩余空间:“justify-content: space-around;”

写一下下面这部分:

image-20230307091702259

<div id=bodytext>
<span>广发价值领先混合</span>
<span>169.51</span>
<span></span>
<span>0.04%</span>
<span>8.90%</span>
</div>

css代码如下:

#bodytext{
margin: 10px;
display: flex;
background-color: #d6e4ff;
justify-content: space-around;
height: 50px;
align-items: center;
border-radius: 20px;
/* width: 100%; */
}
#bodytext span:nth-child(1){
color: #757e8f;
}
#bodytext span:nth-child(2){
color: #c96f81;
}
#bodytext span:nth-child(4){
color: #c96f81;
}
#bodytext span:nth-child(5){
color: #c96f81;
}

下面写一下财富直通车:

image-20230307092414434

<div id=text>
<span>财富直通车</span>
</div>

CSS代码如下:

#text{
border-style: none none none solid;
border-color: #3476ed;
margin: 10px;
border-width: 5px;

}
#text span{
margin: 10px;
font-size: 25px;
}

下面开始写这一部分

image-20230307105433002

html代码

<div id=lastbody>
<div id=qian>
<span>钱袋子保卫战</span>
<span>领取你的避坑宝典还可<span style=color: #c3903f; margin: 0px;>参与有奖互动</span></span>
<span>4月12日-5月9日</span>
</div>
<div id=niu>
<div id=niu1>
<span>牛年有惊喜</span>
<span>每天抽2021元红包</span>
<div id=qiang><span>立即抢购></span></div>
</div>
<div id=niu2>
<span>
瓜分一吨黄金
</span>
</div>
</div>
</div>

CSS代码:

#lastbody {
display: flex;
justify-content: center;
}

#qian {
background-color: #eebe6a;
width: 300px;
height: 250px;
display: flex;
flex-wrap: wrap;
border-radius: 20px;

}

#qian span:nth-child(1) {
color: white;
margin: 15px;
font-size: 30px;
}

#qian span:nth-child(2) {
color: white;
margin: 15px;
font-size: 20px;
}

#qian span:nth-child(3) {
color: white;
margin: 15px;
font-size: 20px;
}

#niu {
/* background-color: red; */
width: 300px;
height: 250px;
display: flex;
flex-wrap: wrap;
border-radius: 20px;
margin-left: 5px;
flex-direction: column;

}

#niu1 {
display: flex;
flex-direction:column;
width: 100%;
height: 150px;
background-color: #699bf0;
border-radius: 20px;
}

#niu1 span:nth-child(1){
color: aliceblue;
font-size: 25px;
margin: 15px 15px 0px 15px;
}
#niu1 span:nth-child(2){
color: aliceblue;
font-size: 15px;
margin: 15px 15px 15px 15px;
}
#niu1 span:nth-child(3){
display: flex;

color: aliceblue;
/* background-color: #fd7948; */

font-size: 20px;
margin: 0px 15px 0px 15px;

}
#qiang{
background-color: #fd7948;
width: 150px;
height: 40px;
border-radius: 20px;
margin-left: 10px;
}
#niu2{
display: flex;
margin-top: 10px;
background-color: #6dd2c2;
height: 90px;
border-radius: 20px;
}
#niu2 span{
color: white;
font-size: 25px;
margin: 30px;
}

三.效果预览:

image-20230307105635116

最后的底部:

image-20230307110406009

Html代码:

<div id=foot>
<div id=sy><img src=./work1/img/17.png alt=><span>首页</span></div>
<div><img src=./work1/img/18.png alt=><span>财富</span></div>
<div><img src=./work1/img/19.png alt=><span>翔瑞借</span></div>
<div><img src=./work1/img/20.png alt=><span>发现</span></div>
<div><img src=./work1/img/21.png alt=><span>我的</span></div>
</div>

CSS代码:

#foot{
margin-top: 10px;
display: flex;
justify-content: space-around;
}

发现还差一个礼包:

image-20230307112841058

我们先去阿里巴巴矢量图库找一个好看的图片:

image-20230307112908386

<div id=libao>
<img src=./work1/img/libao.png alt=><br />
<div id=youhui>
<span>领取优惠券</span>
</div>
</div>

CSS代码如下:

#libao {
position: absolute;
top: 570px;
right: 0px;
}

#libao img {
width: 100px;

}

#libao span{
position: absolute;
color: white;
/* background-color: #e97518; */
height: 35px;
top: 100px;
right: 10px;
border-radius: 20px;
font-size: 17px;
}
#youhui{

height: 40px;
margin-top: -10px;
background-color: #e97518;
border-radius: 20px;
}

最终效果: 在这里插入图片描述

在这里插入图片描述

举报

相关推荐

0 条评论