Advertisement

HTML5响应式布局案例

阅读量:

在该实例中,网页的界面排版将依据当前浏览器窗口的尺寸进行动态调整,从而实现响应式效果。主要采用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>
    

全部评论 (0)

还没有任何评论哟~