在本案例中,网页的界面布局将会根据当前浏览器的大小进行变化,做出响应。主要使用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)最后的运行效果如下:
。
。
。