CSS基础(六)

CSS 阴影效果

• 文本阴影: text-shadow

• 盒子阴影: box-shadow

<!--
    - 水平方向位移

    - 垂直方向位移

    - 模糊程度

    - 阴影颜色

    - 注意事项:阴影效果支持'叠加'
        # 并列写在一起
        text-shadow: 1px 1px 3px red, -5px -5px 3px yellow;
-->

div {
    text-shadow: 1px 1px 3px red;
}


......
<div id="container">
    文本阴影测试
</div>

<!--
    - h-shadow: 水平阴影位置(必须)

    - v-shadow: 垂直阴影位置(必须,剩下的都可选...)

    - blur: 模糊距离()

    - spread: 阴影的大小

    - color: 颜色
    
    - inset: 从外层阴影变成内层阴影
-->

div {
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin: 0 auto;
    /* box-shadow: -10px -10px 10px red, 10px 10px 10px yellow; */
    box-shadow: -10px -10px 10px red;
}
......
<div></div>

圆角效果: border-radius

• 基础demo

......
<style>
    div {
        height: 200px;
        width: 200px;
        background-color: red;
        margin: 0 auto;
        border-radius: 10px; /*盒子边框圆角效果*/
        /* border-radius: 30px/60px; 表示 水平方向/垂直方向 */
    }


</style>
......
<div></div>

• 把 圆角值 设置成盒子的一半,就是'圆形'

......
<style>
    div {
        height: 200px;
        width: 200px;
        background-color: red;
        margin: 0 auto;
        border-radius: 100px; /*圆形效果*/
    }
</style>

- 简便方法:  border-radius: 50%;

    - 如果是一个按钮,设置 50% 就变成一个'椭圆'

引入自定义字体: @font-face

• demo演示

......
<style>
            
    @font-face {
        font-family:aning; /*自定义字体名称*/
        src: url(pretty.TTF); /*字体路径*/
    }
    
    div {
        font-family: aning; /*展示*/
        font-size: 50px;
    }
</style>
......
<div>安宁</div>

怪异盒模型

• 若使用之前的标准盒子模型,当padding变大的时候,整体的width/height也随之变大
  假如有float这种场景的话,当空间不够的时候,多余的盒子就会被挤下来

• 使用 怪异盒模型,就没有这种烦恼

• demo演示:

<!--两个盒子-->
<style> 
    .box1 { /*正常盒子,盒子变大*/
        width: 200px;
        height: 200px;
        background-color: red;
        padding: 20px; /*盒子添加了padding和border,width变大,width=260px*/
        border: 10px solid black;
        box-sizing: content-box; /*标准盒的默认值*/
    }
    
    
    .box2 {
        width: 200px;
        height: 200px;
        background-color: green;
        margin-top: 100px;
        padding: 20px;
        border: 10px solid black;
        box-sizing: border-box; /*怪异盒子,盒子大小不变,内容被压缩*/
    }
</style>
......

• 适用场景: float

<style>
    .container {
        width: 900px;
        height: 300px;
        background-color: red;
        margin: 0 auto;
    }
    
    .container div { /*三个盒子刚好占满容器*/
        width: 300px;
        height: 300px;
        float: left;
        text-align: center;
    }
    
</style>
......
<div class="container">
    <div>
        长文字
    </div>
    <div>
        长文字
    </div>
    <div>
        长文字
    </div>
</div>

.........................
.container div {

    width: 300px;
    height: 300px;
    padding: 10px; /*增加内边距,最右边的盒子被挤下来了*/
    float: left;
    text-align: center;
}
.........................

.container div {
    width: 300px;
    height: 300px;
    padding: 10px;
    float: left;
    text-align: center;
    box-sizing: border-box; /*最佳解决方案,变成'怪异盒模型',其他数据无需修改*/
}

弹性布局: 即 flex 布局

• 引入场景:大盒子里面包裹小盒子,小盒子默认垂直排列

......
<style>
    .container {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 100px auto;
    }
    
    .container div {
        width: 100px;
        height: 100px;
        border: 1px dashed black;
    }
</style>
......
<div class="container">
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
</div>

• flex 布局:默认就是水平排列,上述示例加一句即可实现'水平布局'

......
.container {
    ......
    display: flex; /*新增这句,实现水平布局*/
}

.container div {
    ......
}

• flex 布局另外一个效果:使'行内元素'变成'块级元素'

container {
    ......
    display: flex; /*使'行内元素'变成'块级元素'*/
}

.container span {
    width: 100px; /*行内元素是无法设置宽高的,但是这里却生效了*/
    height: 100px;
    border: 1px dashed black;
}
......
<div class="container">
    <span>111</span>
    <span>222</span>
    <span>333</span>
    <span>444</span>
</div>

• flex 布局第三个效果:当容器里面只有一个元素的时候,margin:auto可以实现完全居中效果

......
<style> 
    .container {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 100px auto;
        display: flex;
    }
    
    .container span {
        width: 100px;
        height: 100px;
        border: 1px dashed black;
        margin: auto; /*实现完全居中效果,简单粗暴*/
    }
</style>
......
<div class="container">
    <span>111</span> <!--只有1个元素-->
</div>

• flex布局效果小结

- 子元素默认横向排列

- 行内元素变成块级元素

- 只有一个元素的时候, margin:auto 自动居中

• 所谓的'主轴'和'侧轴',是相对的,和'水平方向','垂直方向'相对应,只不过换一种说话

  • flex-direction 规定'主轴'的方向

......
<style>
    .container {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 100px auto;
        display: flex;
        flex-direction: column; /*规定纵轴为主方向*/
    }
    
    .container div {
        width: 100px;
        height: 100px;
        border: 1px dashed black;
        margin: auto;
    }

    
</style>
......
<body>  
    <div class="container">
        <div>111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
    </div>
    
   ......
</body>

- 其他取值:

    - column-reverse: 垂直反向排列

    - row-reverse: 水平反向排列

• justify-content: 规定主轴方向的子元素如何对齐

......
.container {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    margin: 100px auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between; /*两端对齐*/
}

- 其他取值:

    - flex-start
    - flex-end
    - center
    - space-between
    - space-around

• align-items: 规定侧轴的对齐方式

......
<style>
           
    .container {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 100px auto;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center; /*实现子元素完全居中效果(当只有一个子元素的时候)*/
        align-items: center; /*侧轴方向也居中*/
    }
    
    .container div {
        width: 100px;
        height: 100px;
        border: 1px dashed black;
    }

    
</style>
......
<body>  
    <div class="container">
        <div>111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
    </div>
    
 ......
</body>

• 练习示例:子元素过多,溢出到盒子外面

......
<style>

    
    .container {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        margin: 100px auto;
       
    }
    
    .container div {
        width: 100px;
        height: 100px;
        border: 1px dashed black;
    }

    
</style>
......
   
<div class="container">
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
    <div>555</div>
    <div>666</div>
</div>
       
- 此时,使用flex布局,虽然可以实现横向排列,但是宽度被压缩了!

......
.container {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    margin: 100px auto;
    display: flex; /*子元素宽度被压缩了*/
}

- 想实现宽度不被压缩,可以使用'折行(换行)',即当宽度不够的时候,让子元素被挤下来
......
.container {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap; /*宽度不够,折行(换行)*/
}

- 上述示例有一个问题,折行以后,子元素侧轴的间距变得很大,如何调整侧轴的间距呢

    - align-content: flex-start;

    - 其他取值: flex-end,center,space-around,space-between

......
.container {
    width: 500px;
    height: 500px;
    border: 1px solid red;
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start; /*侧轴方向几乎没有间距*/
}

• 案例: 京东手机版商品排列

<!DOCTYPE html>
<html>
    <head>
        ......
        <style>
        
            .container {
                width: 300px;
                height: 120px;
                border: 1px solid red;
                margin: 10px auto;
                display: flex; /*对容器运用flex布局*/
                flex-wrap: wrap; /*超出的子元素,换行显示*/
            }
            .container div {
                width: 60px;
                height: 60px;
                border: 1px dashed black;
                box-sizing: border-box; /*使用怪异盒子模型,使所有div容器回归到container容器*/
                display: flex; /*对子元素图片运用flex布局*/
            }
            .container div img {
                width: 40px;
                height: 40px;
                margin: auto; /*图片在容器内完全居中*/
            }

            
        </style>
    </head>
    <body>  
        <div class="container">
            <div>
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" >
            </div>
            div*9
        </div>
        
       ......
    </body>
</html>

• 小结:

- flex-direction: 规定'主轴'的方向

- justify-content: 规定主轴方向的子元素如何对齐

- align-items: 规定侧轴方向的子元素如何对齐

- flex-wrap: 折行显示子元素

- align-content: 折行后子元素之间的间隔

项目的对齐方式

• 什么叫'项目': 容器里面的'子元素'就称为'项目'

• align-self:描述项目的对齐方式

• demo演示

......
<style>
    .container {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        margin: 100px auto;
        display: flex;
    }
    .container div {
        width: 60px;
        height: 60px;
        border: 1px dashed red;
    }
    .div1 {
        align-self: flex-start; /*默认效果*/
    }
    .div2 {
        align-self: flex-end; /*效果:小盒子跑到了侧轴的最底部*/
    }
    .div3 {
        align-self: center; /*效果:小盒子相对主轴和侧轴,居中*/
    }
    .div4 {
        align-self: baseline; /*效果:暂时没看出效果*/
    }
    .div5 {
        align-self: stretch; /*效果:暂时没看出效果(重点关注这个效果,它是默认效果)*/
    }
</style>
......

• 当 "align-self: stretch"时,没有看出什么效果,现在把'项目'的'height'注释掉,再看看效果

......
.container div {
    width: 60px;
    /* height: 60px; */
    border: 1px dashed red;
}
......

- 可以发现: '.div5'此时高度占满了整个盒子(其他项目此时的高度是'自适应'的,有多少内容就占多少高度)

- 如果此时把主轴方向调整为"column",那么就是注释掉'width'(不再注释掉'heigth'),类似的效果

......
.container div {
    /* width: 60px; */
    height: 60px;
    border: 1px dashed red;
}

• order: 调整 项目 的顺序

  • 默认值为:0,这个值很大,往1,2,3方向越来越小,反之,往负值方向,越来越大

......
<style>
    .container {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        margin: 100px auto;
        display: flex;
    }
    .container div {
        width: 60px;
        height: 60px;
        border: 1px dashed red;
    }
    .div1 {
        order: 1; /*第三*/
    }
    .div2 { 
        order: 10; /*最小*/
    }
    .div3 { /*0最大,排序第一*/
        
    }
    .div4 { /*0最大,顺序排序第二*/
        
    }
    .div5 {
        order: 8; /*第四*/
    }
    
</style>
......
<div class="container">
    <div class="div1">111</div>
    <div class="div2">222</div>
    <div class="div3">333</div>
    <div class="div4">444</div>
    <div class="div5">555</div>
</div>

• flex: xxx 计算所占的宽高比例

  • 利用它来占满剩余的空间

......
<style>
    .container {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        margin: 100px auto;
        display: flex;
    }
    .container div {
        width: 100px;
        height: 100px;
        border: 1px dashed red;
    }
    .div1,.div3 {
        flex:1; /*各占据父容器的四分之一*/
    }
    .div2 {
        flex: 2; /*占据父容器的一半比例,越大,所占据的空间就越多,占满剩余的空间*/
    }
    
</style>

• 利用flex属性实现'三栏布局'

......
<style>
    * {
        margin: 0;
        padding: 0;
    }
    html,body {
        height: 100%;
    }
    body {
        display: flex; /*对项目应用布局*/
    }
    .box1,.box3 { /*最左栏和最右栏*/
        width: 100px;
        background: gray;
    }
    .box2 {
        background: yellow; 
    }
    /*
        - 此时box2只有高度,没有宽度
        - 页面上虽然存在(依据父元素body的flex布局,夹在1&3盒子中间),但是不会显示
    */
    
</style>
......
<body>  
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <script></script>
</body>
......

- 解决办法:占满剩余的空间即可

......
<style>
    ......
    .box2 {
        background: yellow;
        flex: 1; /*加这句即可*/
    }
    
</style>

• 把上述示例小改一下,变成'上(小)中(大)下(小)'布局

......
<style>
    * {
        margin: 0;
        padding: 0;
    }
    html,body {
        height: 100%;
    }
    body {
        display: flex;
        flex-direction: column; /*垂直方向为主轴*/
    }
    .box1,.box3 {
        height: 100px; /*不再是width,而是height*/
        background: gray;
    }
    .box2 {
        background: yellow;
        flex: 1; /*不变*/
    }
    
</style>

支付宝账单案例

• 基本的布局: 小-大-小 三个容器垂直排列

......
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 955px;
        height: 1420px;
        margin: 0 auto;
        background: yellow;
        display: flex;
        flex-direction: column;
    }
    /*自适应宽度*/
    header {
        height: 124px;
        background: gray;
    }
    footer {
        height: 128px;
        background: gray;
    }
    section {
        flex: 1; /*占满剩下的空间*/
    }
    
</style>
......
<div class="box">
    <header></header>
    <section></section>
    <<footer></footer>
</div>

• iconfont: 阿里图库的使用(图形字体,当成普通字体来使用)

- 官方有示例demo文档:

    - 引入项目下面生成的 fontclass 代码：
        <link rel="stylesheet" href="./iconfont.css">

    - 挑选相应图标并获取类名，应用于页面：
        <span class="iconfont icon-xxx"></span>

- 代码示例
    
    .iconfont {
        font-size: 200px; /*设置字体大小,颜色,粗体等*/
        color: red;
        font-weight: bold;
    }
    ......
    <section>
        <!--旧的写法:使用 "i"标签包裹-->
        <span class="iconfont icon-icon-test10"></span>
    </section>
    ......

• header 布局示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="img/AliPay/iconfont.css"/>
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box { /*最外层的容器*/
                width: 955px;
                height: 1420px;
                margin: 0 auto;
                background: yellow;
                display: flex; /*flex垂直布局*/
                flex-direction: column;
            }
            header { /*头部容器*/
                height: 124px;
                background: gray;
                display: flex; /*默认flex水平布局*/
                color: white;
            }
            header i { /*设置图标字体的样式,使用line-height和text-align实现完全居中*/
                width: 118px;
                height: 124px;
                line-height: 124px;
                text-align: center;
                font-size: 48px !important; /*内置的字体大小,强制16px,这里强制以自定义尺寸为主*/
            }
            header span {
                flex: 1; /*账单占据剩余的空间*/
                height: 124px;
                line-height: 124px;
                text-align: center;
                font-size: 40px;
            }
            footer {
                height: 128px;
                background: gray;
                
            }
            section {
                flex: 1;
            }
            
        </style>
    </head>
    <body>  
        <div class="box">
            <header> <!--头部菜单骨架-->
                <i class="iconfont icon-icon-test"></i>
                <span>账单</span>
                <i class="iconfont icon-icon-test1"></i>
                <i class="iconfont icon-icon-test2"></i>
                <i class="iconfont icon-icon-test3"></i>
            </header>
            <section></section>
            <<footer></footer>
        </div>
        <script></script>
    </body>
</html>

section 部分

.main {
    display: flex;
    height: 278px;
    background: white;
    justify-content: space-around; /*子元素分散排列*/
    align-items: center; /*副轴方向居中对齐,进而实现子元素完全居中对齐*/
                        /*上部分是使用 line-height和text-align实现完全居中效果*/
}
.main div {
    width: 120px;
    height: 168px;
    background: red;
}
......
<section>
    <div class="main">
        <div>
            <i class="iconfont icon-icon-test10"></i>
            <span>扫一扫</span>
        </div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</section>
......

• 子容器的处理

......
.main {
        display: flex;
        height: 278px;
        background: #22293b;
        justify-content: space-around; 
        align-items: center; 
    }
    .main div {
        width: 120px;
        height: 168px;
        background: #22293b;
        display: flex; /子容器内的元素使用flex布局/
        flex-direction: column; /*调整主轴方向和对齐方式*/
        justify-content: space-between;
    }
    .main div i {
        font-size: 110px !important;
        text-align: center;
        color: white;
    }
    .main div span {
        font-size: 32px !important;
        text-align: center;
        color: white;
    }
......
<section>
    <div class="main">
        <div>
            <i class="iconfont icon-icon-test10"></i>
            <span>扫一扫</span>
        </div>
        ......<--剩下3块一模一样的子容器-->
    </div>
</section>

• section的后半部分

......
.list {
    display: flex;
    flex-wrap: wrap; /*超出子容器换行显示*/
    background: white;
}
.list div {
    width: 25%;
    height: 208px;
    border: 1px solid gray;
    box-sizing: border-box /*使用怪异盒子模型,确保4个子容器在同一行*/
}
......
<!--三行,每行4个图标-->
<div class="list">
    <div>
        <i class="iconfont icon-icon-test11"></i>
        <span>手机</span>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
......

• 子容器元素的处理

......
.list {
        display: flex;
        flex-wrap: wrap;
        background: white;
    }
    .list div {
        width: 25%;
        height: 208px;
        border: 1px solid gray;
        box-sizing: border-box;
        display: flex; /*应用flex布局,指明主轴方向和对齐方式*/
        flex-direction: column;
        justify-content: center;
    }
    .list div i {
        height: 77px;
        line-height: 77px;
        text-align: center;
        font-size: 55px;
    }
    .list div span {
        height: 61px;
        line-height: 61px;
        text-align: center;
        font-size: 30px;
    }
......

• 最后,插入一张轮播图

.pic {
    margin-top: 25px;
}
...
<div class="pic">
    <img src="img/handsome.png" >
</div>
...

• 到目前为止,完整代码示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="img/AliPay/iconfont.css"/>
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 955px;
                height: 1420px;
                margin: 0 auto;
                background: yellow;
                display: flex;
                flex-direction: column;
            }
            header {
                height: 124px;
                background: #22293b;
                display: flex;
                color: white;
            }
            header i {
                width: 118px;
                height: 124px;
                line-height: 124px;
                text-align: center;
                font-size: 48px !important;
            }
            header span {
                flex: 1;
                height: 124px;
                line-height: 124px;
                text-align: center;
                font-size: 40px;
            }
            footer {
                height: 128px;
                background: gray;
                
            }
            section {
                flex: 1;
            }
            .main {
                display: flex;
                height: 278px;
                background: #22293b;
                justify-content: space-around; /*子元素分散排列*/
                align-items: center; /*副轴方向居中对齐*/
            }
            .main div {
                width: 120px;
                height: 168px;
                background: #22293b;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .main div i {
                font-size: 110px !important;
                text-align: center;
                color: white;
            }
            .main div span {
                font-size: 32px !important;
                text-align: center;
                color: white;
            }
            .list {
                display: flex;
                flex-wrap: wrap;
                background: white;
            }
            .list div {
                width: 25%;
                height: 208px;
                border: 1px solid gray;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .list div i {
                height: 77px;
                line-height: 77px;
                text-align: center;
                font-size: 55px;
            }
            .list div span {
                height: 61px;
                line-height: 61px;
                text-align: center;
                font-size: 30px;
            }
            .pic {
                margin-top: 25px;
                background-image: url(img/handsome.png);
                height: 240px;
            }
        </style>
    </head>
    <body>  
        <div class="box">
            <header>
                <i class="iconfont icon-icon-test"></i>
                <span>账单</span>
                <i class="iconfont icon-icon-test1"></i>
                <i class="iconfont icon-icon-test2"></i>
                <i class="iconfont icon-icon-test3"></i>
            </header>
            <section>
                <div class="main">
                    <div>
                        <i class="iconfont icon-icon-test10"></i>
                        <span>扫一扫</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test10"></i>
                        <span>扫一扫</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test10"></i>
                        <span>扫一扫</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test10"></i>
                        <span>扫一扫</span>
                    </div>
                </div>
                
                <div class="list">
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                </div>
                <div class="pic">
                    <!-- <img src="img/handsome.png" > -->
                </div>
            </section>
            <<footer></footer>
        </div>
        <script></script>
    </body>
</html>

footer 部分

......
footer {
    height: 128px;
    background: gray;
    display: flex;
    
}
footer div {
    flex: 1; /*子容器各占1,所以均分父容器的空间*/
    /* border: 1px solid red;
    box-sizing: border-box; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
footer div i {
    height: 66px;
    line-height: 66px;
    text-align: center;
    font-size: 58px !important; 
}
footer div span {
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 28px !important;
}
footer div:hover{ /*鼠标移动过来,展示效果*/
    color: #06a9ee;
}
......
<footer>
    <div>
        <i class="iconfont icon-icon-test15"></i>
        <span>支付宝</span>
    </div>
    <div>
        <i class="iconfont icon-icon-test15"></i>
        <span>支付宝</span>
    </div>
    <div>
        <i class="iconfont icon-icon-test15"></i>
        <span>支付宝</span>
    </div>
    <div>
        <i class="iconfont icon-icon-test15"></i>
        <span>支付宝</span>
    </div>
</footer>

• 支付宝案例完整代码如下(背景色自己再修改一下)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="img/AliPay/iconfont.css"/>
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 955px;
                height: 1420px;
                margin: 0 auto;
                background: yellow;
                display: flex;
                flex-direction: column;
            }
            header {
                height: 124px;
                background: #22293b;
                display: flex;
                color: white;
            }
            header i {
                width: 118px;
                height: 124px;
                line-height: 124px;
                text-align: center;
                font-size: 48px !important;
            }
            header span {
                flex: 1;
                height: 124px;
                line-height: 124px;
                text-align: center;
                font-size: 40px;
            }
            footer {
                height: 128px;
                background: gray;
                display: flex;
                
            }
            footer div {
                flex: 1;
                /* border: 1px solid red;
                box-sizing: border-box; */
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            footer div i {
                height: 66px;
                line-height: 66px;
                text-align: center;
                font-size: 58px !important; 
            }
            footer div span {
                height: 36px;
                line-height: 36px;
                text-align: center;
                font-size: 28px !important;
            }
            footer div:hover{
                color: #06a9ee;
            }
            section {
                flex: 1;
            }
            .main {
                display: flex;
                height: 278px;
                background: #22293b;
                justify-content: space-around; /*子元素分散排列*/
                align-items: center; /*副轴方向居中对齐*/
            }
            .main div {
                width: 120px;
                height: 168px;
                background: #22293b;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .main div i {
                font-size: 110px !important;
                text-align: center;
                color: white;
            }
            .main div span {
                font-size: 32px !important;
                text-align: center;
                color: white;
            }
            .list {
                display: flex;
                flex-wrap: wrap;
                background: white;
            }
            .list div {
                width: 25%;
                height: 208px;
                border: 1px solid gray;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .list div i {
                height: 77px;
                line-height: 77px;
                text-align: center;
                font-size: 55px;
            }
            .list div span {
                height: 61px;
                line-height: 61px;
                text-align: center;
                font-size: 30px;
            }
            .pic {
                margin-top: 25px;
                background-image: url(img/handsome.png);
                height: 240px;
            }
        </style>
    </head>
    <body>  
        <div class="box">
            <header>
                <i class="iconfont icon-icon-test"></i>
                <span>账单</span>
                <i class="iconfont icon-icon-test1"></i>
                <i class="iconfont icon-icon-test2"></i>
                <i class="iconfont icon-icon-test3"></i>
            </header>
            <section>
                <div class="main">
                    <div>
                        <i class="iconfont icon-icon-test10"></i>
                        <span>扫一扫</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test10"></i>
                        <span>扫一扫</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test10"></i>
                        <span>扫一扫</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test10"></i>
                        <span>扫一扫</span>
                    </div>
                </div>
                
                <div class="list">
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                    <div>
                        <i class="iconfont icon-icon-test11"></i>
                        <span>手机</span>
                    </div>
                </div>
                <div class="pic">
                    <!-- <img src="img/handsome.png" > -->
                </div>
            </section>
            <footer>
                <div>
                    <i class="iconfont icon-icon-test15"></i>
                    <span>支付宝</span>
                </div>
                <div>
                    <i class="iconfont icon-icon-test15"></i>
                    <span>支付宝</span>
                </div>
                <div>
                    <i class="iconfont icon-icon-test15"></i>
                    <span>支付宝</span>
                </div>
                <div>
                    <i class="iconfont icon-icon-test15"></i>
                    <span>支付宝</span>
                </div>
            </footer>
        </div>
        <script></script>
    </body>
</html>