HTML5响应式布局案例

来源：互联网发布：手机淘宝网电脑版登陆编辑：程序博客网时间：2024/06/07 13:46

在本案例中，网页的界面布局将会根据当前浏览器的大小进行变化，做出响应。主要使用CSS的@media来进行设计。实现效果类似一淘网，一淘网使用的就是响应式布局。案例代码如下：

（1）HTML代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width = device-width,initial-scale=1">    <title></title>    <link href="style02.css" type="text/css" rel="stylesheet"></head><body>    <div class="heading"></div>    <div class="container">        <div class="left"></div>        <div class="main"></div>        <div class="right"></div>    </div>    <div class="footing"></div></body></html>

（2）CSS代码如下：

*{    margin: 0px;    padding: 0px;}.heading,.container,.footing{    margin: 10px auto;}.heading{    height:100px;    background-color: chocolate;}.left,.right,.main{    background-color: aqua;}.footing{    height: 100px;    background-color: blanchedalmond;}/*不小于960时，这样设计*/@media screen and (min-width: 960px){    .heading,    .container,    .footing{        width: 960px;    }    .left,    .main,    .right{        float: left;        height: 500px;    }    .left,    .right{        width: 200px;    }    .main{        margin-left: 5px;        margin-right: 5px;        width: 550px;    }    .container{        height: 500px;    }}@media screen and (min-width: 600px) and (max-width: 960px){    .heading,    .container,    .footing{        width: 600px;    }    .left,    .main{        float: left;        height: 400px;    }    .right{        display: none;    }    .left{        width: 160px;    }    .main{        width: 435px;        margin-left: 5px;    }    .container{        height: 400px;    }}@media screen and (max-width: 600px){    .heading,    .container,    .footing{        width: 400px;    }    .left,    .right{        display: none;    }    .main{        margin-top: 10px;        margin-bottom: 10px;        width: 400px;        height: 420px;    }    .container{        height: 420px;    }}

（3）最后的运行效果如下：

。

github主页：https://github.com/chenyufeng1991 。欢迎大家访问！

2 1