zoukankan      html  css  js  c++  java
  • CSS3媒体查询实例

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8"> 
      <title>菜鸟教程(runoob.com)</title> 
    <style>
    ul {
        list-style-type: none;
    }
    
    ul li a {
        color: green;
        text-decoration: none;
        padding: 3px; 
        display: block;
    }
    
    @media screen and (max- 639px){
        ul li a {
          padding-left: 30px;
          color:red;
        }
    }
    
    @media screen and (max- 819px) and (min- 640px) {
        ul li a {
          padding-left: 30px;
          color:green;
        }
    }
    
    @media screen and (max- 1019px) and (min- 820px) {
        ul li a {
          padding-left: 30px;
          color:yellow;
        }
    }
    
    @media screen and (min- 1020px) {
        ul li a {
          padding-left: 30px;
          color:pink;
        }
    }
    </style>
    </head>
    <body>
      <h1>重置浏览器窗口,查看效果!</h1>
      <ul>
        <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
        <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
        <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
      </ul>
    </body>
    </html>
  • 相关阅读:
    QButton
    注入
    SpringBoot热重启配置
    centos7 安装 tomcat
    centos 安装jdk
    spring boot (6) AOP的使用
    spring boot (5) 自定义配置
    spring boot (4) 使用log4 打印日志
    SpringBoot (3)设置支持跨域请求
    spring boot (2) 配置swagger2核心配置 docket
  • 原文地址:https://www.cnblogs.com/aidixie/p/11230714.html
Copyright © 2011-2022 走看看