图片整合

最新推荐文章于 2023-05-16 11:27:30 发布

hchu

最新推荐文章于 2023-05-16 11:27:30 发布

阅读量420

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_40688956/article/details/78528971

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写图片描述

把图片导入img,图片和文字标签都变为盒模型,对盒模型开始操作

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*定义大盒子的位置和大小*/
            .footer{
                width: 100%;height: 60px;
                position: fixed;bottom: 100px;
                left: 0;
                /*box-sizing: border-box;*/
                border-top: 1px solid #666;
            }
            /*给图标下面的文字加链接,并且指定样式*/
            .footer a{
                display: block;
                color: #666;
                font-size: 16px;
                text-align: center;
                padding: 10px 0 13px;
                height: 42px;
            }
            /*图标下面文字设置内容*/
            .footer a i{
        /*变为盒模型*/
                display: block;
                /*固定图标要显示的部分*/
                width: 24px;
                height: 24px;
                /*引入图标*/
                background: url(img/nav11.png) no-repeat;
                margin: 0 auto;
                /*图标的大小*/
                background-size: auto 85%;  
            }
            /*浮动,每个占多大*/
            .footer div{float: left;width: 20%;}
            /*背景图片的定位按每个进行定位*/
            .footer .footer_nav1 a i{background-position: 1px 0px;}
            .footer .footer_nav2 a i{background-position: -23px 0px;width: 20px;}
            .footer .footer_nav3 a i{background-position: -42px 0px;}
            .footer .footer_nav4 a i{background-position: -65px 0px;}
            .footer .footer_nav5 a i{background-position: -89px 0px;}
            #footer_nav2_click a i{background-position: -130px 0px;}
            /*变色*/
            #footer_nav2_click a{color: #008000;}
        </style>
    </head>
    <body>
        <div class="footer">
            <div class="footer_nav1">
                <a href="#">
                    <i></i>首页
                </a>
            </div>
            <div class="footer_nav2" id="footer_nav2_click">
                <a href="#">
                    <i></i>公益活动
                </a>
            </div>
            <div class="footer_nav3">
                <a href="#">
                    <i></i>新闻资讯
                </a>
            </div>
            <div class="footer_nav4">
                <a href="#">
                    <i></i>关于我们
                </a>
            </div>
            <div class="footer_nav5">
                <a href="#">
                    <i></i>个人中心
                </a>
            </div>
        </div>
    </body>
</html>