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

Posted 2023-03-08

一.使用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盒子:

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;

效果如下：

然后放置一张图片上去：

<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 ;

效果展示：

然后是这一部分：

<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;

效果如下：

本块解释：

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

写一下下面这部分：

<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;

下面写一下财富直通车：

<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;

下面开始写这一部分

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;

三.效果预览:

最后的底部：

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;

发现还差一个礼包：

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

<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;

最终效果：