zoukankan      html  css  js  c++  java
  • 屏幕自适应

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>画面自适应</title>

    <link rel="stylesheet" href="css/pic480.css" media="(max-480px)">
    <link rel="stylesheet" href="css/pic800.css" media="(min-480px) and (max-800px)">
    <link rel="stylesheet" href="css/pic800+.css" media="(min-800px) and (max-1200px)">
    <link rel="stylesheet" href="css/pic1200.css" media="(min-1200px)">
    <style>
    .pic{
    text-align: center;
    100%;
    overflow: hidden;
    }
    .pic>div>img{
    padding: 1px;
    }
    .pic>div>img:hover{
    border: 1px solid grey;
    padding: 0;
    }
    </style>

    </head>
    <body>
    <p>

    </p>
    <div class="pic">
    <div>
    <img src="css响应式效果/images/pic6.jpg" alt="加载失败">
    <div>时尚风格</div>
    </div>
    <div>
    <img src="css响应式效果/images/pic7.jpg" alt="加载失败">
    <div>风格时尚</div>
    </div>
    <div>
    <img src="css响应式效果/images/pic8.jpg" alt="加载失败">
    <div>时尚风格</div>
    </div>
    <div>
    <img src="css响应式效果/images/pic9.jpg" alt="加载失败">
    <div>风格时尚</div>
    </div>
    <div>
    <img src="css响应式效果/images/pic10.jpg" alt="加载失败">
    <div>时尚风格</div>
    </div>
    <div>
    <img src="css响应式效果/images/pic11.jpg" alt="加载失败">
    <div>风格时尚</div>
    </div>
    <div>
    <img src="css响应式效果/images/pic12.jpg" alt="加载失败">
    <div>时尚风格</div>
    </div>
    <div>
    <img src="css响应式效果/images/pic13.jpg" alt="加载失败">
    <div>风格时尚</div>
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    线程
    简单排序
    SSM的整合
    SpringMVC中的拦截器、异常处理器
    SpringMVC的文件上传
    SpringMVC的数据响应和结果视图
    springMVC的常用注解
    SpringMVC入门
    Spring中声明式事务控制
    JdbcTemplate在spring中的使用
  • 原文地址:https://www.cnblogs.com/shujie/p/7074006.html
Copyright © 2011-2022 走看看