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>
  • 相关阅读:
    详解java定时任务
    Java之Exception
    Java设计模式
    Java中的static关键字解析
    浅析Java中的final关键字
    深入理解Java的接口和抽象类
    一个故事讲清楚NIO
    Java并发编程:线程池的使用
    Java垃圾回收机制
    ubuntu sublime text 2 破解版
  • 原文地址:https://www.cnblogs.com/aidixie/p/11230714.html
Copyright © 2011-2022 走看看