版权声明：草原上的雄鹰 https://blog.csdn.net/sinat_36729274/article/details/80819026
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0"
/>
<
link
type=
"text/css"
rel=
"stylesheet"
href=
"../css/iconfont.css"
/>
//css文件是阿里巴巴矢量库图标：去矢量库可以下载
<
title
>支付宝
</
title
>
</
head
>
<
style
>
html,body,ul,li,p{
margin:
0;
padding:
0;
}
html{
height:
100%;
font-size:
100px;
}
a{
text-decoration:
none;
color:
#000;
}
li{
list-style-type:
none;
}
header,nav ,section,footer{
display:
block;
}
body{
display:
flex;
height:
100%;
flex-direction:
column;
font-size:
16px;
}
header{
height:
0.75rem;
background-color:
#3f4f5f;
color:
white;
display:
flex;
justify-content:
space-between;
box-sizing:
border-box;
padding:
0.16rem;
align-items:
center
}
header i {
font-size:
25px
!important;
vertical-align:
middle;
}
header a{
color:
white;
font-size:
14px;
vertical-align:
middle;
}
nav{
height:
1.04rem;
background-color:
#3f4f5f;
color:
white;
}
nav ul {
display:
flex;
justify-content:
space-around;
text-align:
center;
}
nav ul li {
position:
relative
}
nav ul li i {
display:
block;
font-size:
36px
!important;
margin-bottom:
0.13rem;
/* border: 1px solid red; */
}
nav a{
color:
white;
}
nav ul li:last-child i{
width:
0.4rem;
height:
0.4rem;
background:
url(
../images/1.jpg)
no-repeat;
background-size:
100%
100%;
color:
white;
}
nav ul li:nth-child(
3
)::before{
content:
"新";
display:
block;
width:
0.14rem;
height:
0.14rem;
background-color:
red;
color:
white;
font-size:
10px;
border-radius:
50%;
position:
absolute;
top:
-0.005rem;
right:
-0.005rem;
}
section{
display:
flex;
flex:
1;
flex-direction:
column;
font-size:
12px;
overflow:
auto
}
section ul {
display:
flex;
text-align:
center;
height:
0.9rem;
}
section ul li{
height:
0.9rem;
border-right:
1px
solid
sienna;
border-bottom:
1px
solid
sienna;
box-sizing:
border-box;
padding:
0.22rem;
width:
25%;
}
section ul li i{
display:
block;
font-size:
16px
!important;
}
section ul li a{
display:
block;
line-height:
0.42rem;
}
section ul:first-child li:first-child i {
color:
greenyellow
}
section ul:first-child li:nth-child(
2
) i {
color:
rgb(
68,
47,
255)
}
section ul:first-child li:nth-child(
3
) i {
color:
rgb(
255,
47,
116)
}
section ul:first-child li:nth-child(
4
) i {
color:
rgb(
255,
182,
47)
}
footer{
height:
0.5rem;
}
footer ul{
display:
flex;
justify-content:
space-around;
text-align:
center;
}
footer ul li i{
display:
block;
font-size:
22px
!important;
}
footer ul li a {
color:
#929292;
font-size:
12px;
}
footer li a；focus{
color:
blue
}
<
/
style
>
<
body
>
<
header
>
<
div
><
i
class=
"iconfont icon-earth"
></
i
><
a
href=
""
>账单
</
a
></
div
>
<
div
>
<
i
class=
"iconfont icon-earth"
></
i
>
<
i
class=
"iconfont icon-earth"
></
i
>
<
i
class=
"iconfont icon-earth"
></
i
>
</
div
>
</
header
>
<
nav
>
<
ul
>
<
li
><
i
class=
"iconfont icon-earth"
></
i
><
a
href=
""
>扫一扫
</
a
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
></
i
><
a
href=
""
>付款
</
a
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
></
i
><
a
href=
""
>卡卷
</
a
></
li
>
<
li
><
i
></
i
><
a
href=
""
>咻一咻
</
a
></
li
>
</
ul
>
</
nav
>
<!-- 主题体-->
<
section
>
<
ul
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>机票火车票
</
a
></
i
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>服务窗
</
a
></
i
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>天猫超市
</
a
></
i
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>记账本
</
a
></
i
></
li
>
</
ul
>
<
ul
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>机票火车票
</
a
></
i
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>服务窗
</
a
></
i
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>天猫超市
</
a
></
i
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>记账本
</
a
></
i
></
li
>
</
ul
>
<
ul
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>机票火车票
</
a
></
i
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>服务窗
</
a
></
i
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>天猫超市
</
a
></
i
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
><
a
href=
""
>记账本
</
a
></
i
></
li
>
</
ul
>
</
section
>
<
footer
>
<
ul
>
<
li
><
i
class=
"iconfont icon-earth"
></
i
><
a
href=
""
>支付宝
</
a
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
></
i
><
a
href=
""
>口碑
</
a
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
></
i
><
a
href=
""
>朋友
</
a
></
li
>
<
li
><
i
class=
"iconfont icon-earth"
></
i
><
a
href=
""
>我的
</
a
></
li
>
</
ul
>
</
footer
>
</
body
>
</
html
>