zoukankan html css js c++ java

典型的响应式布局实例代码

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>响应式布局-样式表中内嵌法</title>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="width=device-width, initial-scale=1"/>  
        <link rel="stylesheet" type="text/css" href="css/main.css">  
    </head>  
    <body>  
        <div class="header">header</div>  
        <div class="container">  
            <div class="sidebarLeft">sidebarLeft</div>  
            <div class="main">main</div>  
            <div class="sidebarRight">sidebarRight</div>  
        </div>  
        <div class="footer">footer</div>  
    </body>  
    </html>

main.css:

    *{margin:0;padding:0;}  
    body{  
        font:18px/20px "Microsoft YaHei",arial,serif;  
        color:#fff;  
        background:#fff;  
    }  
    img{border:0;}  
    a{text-decoration:none;}  
      
      
    .header,  
    .container,  
    .footer{  
        margin-left:auto;  
        margin-right:auto;  
        margin-top:10px;  
        text-align:center;  
    }  
      
    .header{  
        height:100px;  
        background:#333;  
    }  
      
    .sidebarLeft,  
    .main,  
    .sidebarRight{  
        background:#333;  
    }  
      
    .footer{  
        height:100px;  
        background:#333;  
    }  
      
      
    @media screen and (min-960px){  
        .header,  
        .container,  
        .footer{  
            width:960px;  
        }  
      
        .sidebarLeft,  
        .main,  
        .sidebarRight{  
            float:left;  
            height:400px;  
        }  
      
        .sidebarLeft,  
        .sidebarRight{  
            width:200px;  
        }  
      
        .main{  
            margin-left:10px;  
            margin-right:10px;  
            width:540px;  
        }  
      
        .container{  
            height:400px;  
        }  
    }  
      
    @media screen and (min-600px) and (max-960px){  
        .header,  
        .container,  
        .footer{  
            width:600px;  
        }  
      
        .sidebarLeft,  
        .main{  
            float:left;  
            height:400px;  
        }  
      
        .sidebarRight{  
            display:none;  
        }  
      
        .sidebarLeft{  
            width:160px;  
        }  
      
        .main{  
            margin-left:10px;  
            width:430px;  
        }  
      
        .container{  
            height:400px;  
        }  
    }  
      
    @media screen and (max-600px){  
        .header,  
        .container,  
        .footer{  
            width:400px;  
        }  
      
        .sidebarLeft,  
        .sidebarRight{  
            width:400px;  
            height:100px;  
        }  
        .main{  
            margin-top:10px;  
            width:400px;  
            height:200px;  
        }  
      
        .sidebarRight{  
            margin-top:10px;  
        }  
      
        .container{  
            height:420px;  
        }  
    }  
      
    /* 
    //完整版 
    .header, 
    .container, 
    .footer{ 
        margin-left:auto; 
        margin-right:auto; 
        960px; 
        margin-top:10px; 
        text-align:center; 
    } 
     
    .header{ 
        height:100px; 
        background:#333; 
    } 
     
    .sidebarLeft, 
    .main, 
    .sidebarRight{ 
        background:#333; 
        float:left; 
        height:400px; 
    } 
     
    .sidebarLeft, 
    .sidebarRight{ 
        200px; 
    } 
     
    .main{ 
        margin-left:10px; 
        margin-right:10px; 
        540px; 
    } 
     
    .container{ 
        height:400px; 
    } 
     
    .footer{ 
        height:50px; 
        background:#333; 
    } 
     
    */

查看全文

相关阅读:
【leetcode】236. 二叉树的最近公共祖先
 【leetcode】230. 二叉搜索树中第K小的元素
 【leetcode】309. 最佳买卖股票时机含冷冻期
 【leetcode】306. 累加数
 【leetcode】304. 二维区域和检索
 spring-framework源码编译及导入
 Java8-函数式接口理解及测试
 Mac编译RocketMQ 4.1.0
首记
 JS表单验证

原文地址：https://www.cnblogs.com/micenote/p/8593814.html