前端开发初级写法

网页页脚

需达到的效果

css样式代码参考

  .footer {

            height: 340px;

            background-color: #333;

        }

       

        .footer .warpper {

            margin: 0 auto;

            width: 1393px;

        }

       

        .footer .top {

            height: 175px;

            border-bottom: 2px solid #434343;

        }

       

        .footer .top a {

            float: left;

            width: 33.33%;

            height: 175px;

            text-align: center;

            line-height: 175px;

            font-size: 28px;

            color: white;

        }

       

        .footer .top a::before {

            display: inline-block;

            content: '';

            width: 58px;

            height: 58px;

            vertical-align: middle;

            margin-right: 18px;

            background-image: url(../images/sprites.png);

        }

       

        .footer .top a:nth-child(2)::before {

            background: url(../images/sprites.png) -130px 0;

        }

       

        .footer .top a:nth-child(3)::before {

            background: url(../images/sprites.png) -65px 0;

        }

       

        .footer .bottom {

            height: 169px;

            padding-top: 40px;

            text-align: center;

        }

       

        .footer .bottom p {

            color: #999999;

            margin-bottom: 30px;

        }

       

        .footer .bottom p a {

            color: #999999;

        }