zoukankan      html  css  js  c++  java
  • 12/9

    @media screen and (max- 650px){
    #quan{
    98%;
    margin: auto;
    position: relative;
    }
    .duoYong ul li a div {
    3.09rem;
    }

    .duoYong ul li a .maiDan {
    background: url("../images/bot_menu.jpg") -20px 0;
    }

    .duoYong ul li a .youHui {
    background: url("../images/bot_menu.jpg") -180px 0;
    }

    .duoYong ul li a .diTu {
    background: url("../images/bot_menu.jpg") -340px 0;
    }

    .duoYong ul li a .woDe {
    background: url("../images/bot_menu.jpg") -490px 0;
    }


    @media screen and (min- 326px) {
    .duoYong ul li a div {
    1.62rem;
    }
    .duoYong ul li a .maiDan {
    background: url("../images/bot_menu.jpg") -50px 0;
    }

    .duoYong ul li a .youHui {
    background: url("../images/bot_menu.jpg") -200px 0;
    }

    .duoYong ul li a .diTu {
    background: url("../images/bot_menu.jpg") -350px 0;
    }

    .duoYong ul li a .woDe {
    background: url("../images/bot_menu.jpg") -510px 0;
    }

    }

    }

    @media screen and (min- 600px) and (max- 650px){
    .duoYong ul li a div {
    2.8rem;
    }
    .duoYong ul li a .maiDan {
    background: url("../images/bot_menu.jpg") -10px 0;
    }

    .duoYong ul li a .youHui {
    background: url("../images/bot_menu.jpg") -180px 0;
    }

    .duoYong ul li a .diTu {
    background: url("../images/bot_menu.jpg") -320px 0;
    }

    .duoYong ul li a .woDe {
    background: url("../images/bot_menu.jpg") -450px 0;
    }
    }

    @media screen and (min- 500px) and (max- 600px){
    .duoYong ul li a div {
    2.3rem;
    }
    .duoYong ul li a .maiDan {
    background: url("../images/bot_menu.jpg") -10px 0;
    }

    .duoYong ul li a .youHui {
    background: url("../images/bot_menu.jpg") -180px 0;
    }

    .duoYong ul li a .diTu {
    background: url("../images/bot_menu.jpg") -320px 0;
    }

    .duoYong ul li a .woDe {
    background: url("../images/bot_menu.jpg") -490px 0;
    }
    }
    @media screen and (min- 400px) and (max- 500px){
    .duoYong ul li a div {
    1.8rem;
    }
    .duoYong ul li a .maiDan {
    background: url("../images/bot_menu.jpg") -40px 0;
    }

    .duoYong ul li a .youHui {
    background: url("../images/bot_menu.jpg") -180px 0;
    }

    .duoYong ul li a .diTu {
    background: url("../images/bot_menu.jpg") -350px 0;
    }

    .duoYong ul li a .woDe {
    background: url("../images/bot_menu.jpg") -500px 0;
    }
    }

    这是哪个页面的4个图片为了那4个图片能在不断的缩小的途中也跟着缩小所以在不写js代码后我这样写,由于div的宽度是固定的所以要不断的改变div的宽度。

  • 相关阅读:
    01 变量、基本数据类型
    02 gitlab的基本使用
    kubernetes
    02 redis高可用集群
    Redis & ELK
    01 Redis安装、配置详解、数据备份与恢复
    Jenkins
    01 git gitlab jenkins的安装
    golang mysql 客户端
    接口类
  • 原文地址:https://www.cnblogs.com/l979662050/p/5035740.html
Copyright © 2011-2022 走看看