前端开发初级写法

常见的网页底部

需达到的效果

 

 效果分析:鼠标划过小图标更换 点击事件暂不考虑

css样式参考

网页结构中默认样式需自行清除

.warpper {

            width: 1240px;

            margin: 0 auto;

        }

       

        .dibu {

            height: 302px;

            padding-top: 80px;

        }

       

        .dibu dl {

            float: left;

            width: 25%;

            height: 189px;

            text-align: center;

            font-size: 0;

        }

       

        .dibu dl dt {

            width: 100%;

            height: 51px;

            font-size: 16px;

            color: #999999;

        }

       

        .dibu dl dd {

            display: inline-block;

            font-size: 14px;

            color: #999999;

        }

       

        .box1,

        .box2,

        .box3,

        .box4 {

            width: 93px;

            height: 92px;

            border: 1px solid #999999;

        }

       

        .dibu dl .box1::before,

        .dibu dl .box2::before {

            display: block;

            content: '';

            width: 29px;

            height: 28px;

            margin: 22px auto 10px;

        }

       

        .dibu dl .box1::before {

            background: url(../images/sprites.png) -250px -70px;

        }

       

        .dibu dl .box2::before {

            background: url(../images/sprites.png) -350px -70px;

        }

       

        .dibu dl .box3::before,

        .dibu dl .box4::before {

            display: block;

            content: '';

            width: 36px;

            height: 29px;

            margin: 22px auto 10px;

        }

       

        .dibu dl .box3::before {

            background: url(../images/sprites.png) -250px -15px;

        }

       

        .dibu dl .box4::before {

            background: url(../images/sprites.png) -350px -15px;

        }

       

        .dibu dl .box1:hover::before {

            background: url(../images/sprites.png) -205px -70px;

        }

       

        .dibu dl .box2:hover::before {

            background: url(../images/sprites.png) -300px -70px;

        }

       

        .dibu dl .box3:hover::before {

            background: url(../images/sprites.png) -205px -15px;

        }

       

        .dibu dl .box4:hover::before {

            background: url(../images/sprites.png) -300px -15px;

        }

       

        .box5 {

            width: 105px;

            height: 103px;

            background: url(../uploads/qrcode.png) 0 0/100%;

            margin-right: 15px;

        }

       

        .box6 {

            width: 103px;

            height: 103px;

            vertical-align: top;

            padding-top: 5px;

        }

       

        .box6 span {

            display: block;

            width: 103px;

            height: 32px;

            line-height: 32px;

            background-color: #27ba9b;

            margin-top: 18px;

            color: white;

        }

       

        .dibu dl .box7 {

            display: block;

            font-size: 22px;

            color: #666666;

            margin-top: 23px;

        }

       

        .dibu dl .box8 {

            display: block;

        }

       

        .dibu dl:last-child {

            border-left: 1px solid #f2f2f2;

        }