zoukankan      html  css  js  c++  java
  • 响应式布局

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <style>
    .box1{
    900px;height:200px;float:left;
    }
    .box2{
    300px;height:200px;float: left;
    }
    .son1{
    600px;height: 100px;background: green;border:1px solid #000;box-sizing: border-box;float:left;
    }
    .son2{
    300px;height: 100px;background: gray;border:1px solid #ccc;box-sizing: border-box;float:right;
    }
    .son3{
    300px;height: 100px;background: gray;border:1px solid #ccc;box-sizing: border-box;float:left;
    }
    .son4{
    600px;height: 100px;background: green;border:1px solid #000;box-sizing: border-box;float:right;
    }
    .con{
    300px;height: 50px;border:1px solid #ff6700;box-sizing: border-box;
    }
    @media screen and (min-300px) {
    .box1{
    display: none;
    }
    }
    @media screen and (min-600px) {
    .box1{
    display:block;
    }
    .box1 .son4{
    float: left;
    }
    .box2{
    display: none;
    }
    .box1 .son2{
    display: none;
    }
    .box1 .son3{
    display: none;
    }
    }
    @media screen and (min-900px) {
    .box1{
    display:block;
    }
    .box1 .son2{
    display: block;
    }
    .box1 .son3{
    display: block;
    }
    .box2{
    display: none;
    }
    }
    @media screen and (min-1220px) {
    .box1{
    display: block;
    }
    .box1 .son2{
    display: block;
    }
    .box1 .son3{
    display: block;
    }
    .box2{
    display: block;
    }
    }
    </style>
    <body>
    <div class="box1">
    <div class="son1">1</div>
    <div class="son2">2</div>
    <div class="son3">3</div>
    <div class="son4">4</div>
    </div>
    <div class="box2">
    <div class="con">1</div>
    <div class="con">2</div>
    <div class="con">3</div>
    <div class="con">4</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    js获取input file文件二进制码
    nginx新手入门
    代码神器Atom,最常用的几大插件,你值得拥有。
    css3 3d 与案例分析
    express搭建简易web的服务器
    hosts文件管理和nginx总结
    css3 3D
    问题大神
    面试题整理
    版本控制简介,git使用----使用GitHub托管代码
  • 原文地址:https://www.cnblogs.com/weigaojie/p/11198275.html
Copyright © 2011-2022 走看看