图片整合

来源：互联网发布：现在编程用什么语言编辑：程序博客网时间：2024/06/07 23:55
这里写图片描述
把图片导入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>
阅读全文
0 0