zoukankan      html  css  js  c++  java
  • pure响应式布局

     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5 <meta name="viewport" content="width=device-width, initial-scale=1"><!--viewport meta元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度,需要加入该行-->
     6     <title></title>
     7     <link href="css/demo1.css" rel="stylesheet" />
     8     <link href="css/pure-min.css" rel="stylesheet" /><!--将pure引入页面-->
     9     <link href="css/grids-responsive-min.css" rel="stylesheet" /><!--引入响应式pure的栅格系统-->
    10 </head>
    11 <body>
    12   <div class="pure-g" id="d1"><!--固定写法必须放在class=pure-g里面-->
    13       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div><!--单元格大小是分数-->
    14       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
    15       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
    16       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
    17       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
    18       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>
    19       <!--<div class="pure-u-1 pure-u-sm-2-5 pure-u-md-4-5"><p>AAAA</p></div>两个单元格相加要等于1
    20       <div class="pure-u-1 pure-u-sm-3-5 pure-u-md-1-5"><p>AAAA</p></div>-->
    21   </div>
    22 </body>
    23 </html>
    1 #d1 p{
    2     background-color:#0094ff;
    3     padding:50px;
    4     margin:10px;
    5 }

  • 相关阅读:
    JS两个页面通过URL传值
    新起点 新开始
    Spring Boot 常见标签
    关于Redis缓存数据库
    JPA问题汇总
    Dynamic 报表服务开发
    Dynamic crm自定义页面
    Dynamic 根据用户的角色权限设置相应的按钮显示
    Dynamic 工具类
    Dynamic 点击按钮,弹出一个漂浮页面
  • 原文地址:https://www.cnblogs.com/snow52132/p/7199693.html
Copyright © 2011-2022 走看看