css+div实现简洁手机端app首页效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+div实现简洁手机端app首页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title >
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vant.min.css">
    <style>
        .footer-content {
	position:fixed;
	width:100%;
	height:65px;
	background:#fff;
	left:0;
	right:0;
	bottom:0;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	padding:8px 0 4px;
	border-top:solid .5px #e5e5e5;
	z-index:2
}
.tab-item {
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-box-align:center;
	-webkit-align-items:center;
	align-items:center;
	font-size:10px
}
.tab-item span {
	height:34px
}
.iconfont {
	font-size:22px
}
.desc-text {
	margin:0;
	font-size:11px
}
.highlight_text {
	color:#00d1b2
}
.highlight_icon {
	color:#00d1b2
}
.form-view-item {
	width:100%;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	flex-direction:column;
	padding:0
}
.form-view-item .form-preview-group-header {
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	flex-direction:column;
	padding:0 15px 0 17px
}
.form-view-item .form-preview-group-header h2 {
	font-size:18px;
	color:#262626;
	font-family:PingFangSC-Regular,PingFang SC;
	margin:18px 0 0px 0;
	position:relative
}
.form-view-item .form-preview-group-header .preview-titleBg-img {
	width:40px;
	height:auto;
	position:absolute;
	top:20px;
	left:0
}
.form-view-item .form-preview-group-header p {
	font-size:13px;
	color:#8c8c8c;
	font-family:PingFangSC-Regular,PingFang SC;
	margin-top:8px
}
.form-view-item .form-preview-image-content {
	width:100%;
	height:auto;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	margin-bottom:12px
}
.form-view-item .form-preview-image-content div {
	width:25%;
	margin-top:16px;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	flex-direction:column;
	-webkit-box-align:center;
	-webkit-align-items:center;
	align-items:center
}
.form-view-item .form-preview-image-content div img {
	width:56px;
	height:56px;
	margin-bottom:8px
}
.form-view-item .form-preview-image-content div span {
	font-size:13px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:#262626;
	line-height:17px;
	margin:0 6px 6px;
	max-width:90px;
	overflow:hidden;
	text-align:center
}
.form-view-item .form-preview-article-content {
	width:100%;
	height:48px;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	-webkit-box-align:center;
	-webkit-align-items:center;
	align-items:center;
	background:#ebebeb;
	box-shadow:0px 9px 28px 8px rgba(0,0,0,.05),0px 6px 16px 0px rgba(0,0,0,.08),0px 3px 6px -4px rgba(0,0,0,.12);
	opacity:.8;
	font-size:12px;
	font-family:PingFangSC-Regular,PingFang SC;
	font-weight:400;
	color:#262626;
	line-height:17px;
	margin-bottom:8px
}
.form-view-item .form-preview-article-content div {
	width:25%;
	height:100%;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	flex-direction:column;
	-webkit-box-align:center;
	-webkit-align-items:center;
	align-items:center;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	justify-content:center
}
.support {
	position:absolute;
	width:100%;
	bottom:80px;
	left:0;
	padding-bottom:80px;
	height:80px;
	text-align:center;
	line-height:80px;
	background-color:#fff
}
.support .line {
	display:inline-block;
	border-top:1px solid #e1e3e2;
	width:calc((100% - 300px)/2);
	-webkit-transform:translateY(-4px);
	transform:translateY(-4px);
	color:#e8e8e8
}
.support .txt {
	margin:0 10px;
	font-size:12px;
	cursor:pointer;
	color:#d9d9d9
}

    </style>
</head>

<body>
    <div class="app">
        <div class="main-index">
            <div class="main-support mform-view">
                <div>
                    <div class="view-item">
                        <div class="items-of-group">
                            <div class="form-view-item">
                                <div class="form-preview-group-header">
                                    <!---->
                                    <!---->
                                </div>
                                <div class="my-swipe van-swipe">
                            .........完整代码请登录后点击上方下载按钮下载查看