html5响应式布局案例

最新推荐文章于 2024-07-02 10:39:52 发布

月轩居士

最新推荐文章于 2024-07-02 10:39:52 发布

阅读量2.9k

点赞数

分类专栏： Html5，Css3 文章标签： html5 布局响应式

Html5，Css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

（1）HTML代码如下：

[html]view plain copy 
   
 print?
 <!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代码如下：

[css]view plain copy 
   
 print?
 *{  
   
     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）最后的运行效果如下：

。

月轩居士

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
html5响应式布局案例

在本案例中，网页的界面布局将会根据当前浏览器的大小进行变化，做出响应。主要使用CSS的@media来进行设计。实现效果类似一淘网，一淘网使用的就是响应式布局。案例代码如下：（1）HTML代码如下：[html] view plain copy print?> html lang="en"> head> meta
复制链接

扫一扫

专栏目录