当前位置:首页 » 《随便一记》 » 正文

前端响应式布局Layout推荐(带案例)

16 人参与  2022年07月25日 12:20  分类 : 《随便一记》  评论

点击全文阅读


官网

官网

案例

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><style>  * {    box-sizing: border-box;  }  body {    font-family: sans-serif;  }  /* ---- grid ---- */  .grid {    background: #DDD;    max-width: 1200px;  }  /* clear fix */  .grid:after {    content: '';    display: block;    clear: both;  }  /* ---- .grid-item ---- */  .grid-item {    float: left;    width: 100px;    height: 100px;    background: #C09;    border: 2px solid hsla(0, 0%, 0%, 0.5);  }  .grid-item--width2 {    width: 200px;  }  .grid-item--height2 {    height: 200px;  }</style><body>  <div class="grid">    <div class="grid-item"></div>    <div class="grid-item "></div>    <div class="grid-item"></div>    <div class="grid-item"></div>    <div class="grid-item"></div>    <div class="grid-item"></div>    <div class="grid-item"></div>    <div class="grid-item "></div>    <div class="grid-item"></div>    <div class="grid-item"></div>    <div class="grid-item"></div>    <div class="grid-item"></div>    <div class="grid-item"></div>  </div></body><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script><script>  // external js: packery.pkgd.js  // $('.grid').packery({  //   itemSelector: '.grid-item'  // });</script></html>

效果

在这里插入图片描述

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!


点击全文阅读


本文链接:http://zhangshiyu.com/post/43783.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 时筠荣景琛小说(荣少的步步沦陷)外篇+结局(时筠荣景琛)全篇在线阅读
  • 重生在高考前,我笑着送小青梅和小混混去庆祝成人礼老书虫(沈晏安乔念),重生在高考前,我笑着送小青梅和小混混去庆祝成人礼老书虫
  • 重生后,我笑送全班去三亚毕业旅行推荐_徐凯沈清别以为阅读_小说后续在线阅读_无删减免费完结_
  • 北风秋霜覆往忆完结+结局+番外(傅砚寒沈沐柒)全书浏览_北风秋霜覆往忆完结+结局+番外全书浏览
  • 小说大结局小说罗毅小说已更新+特别篇(转职神级辅助,转身上报国家!)纯净版
  • 碎骨揉香与君长诀精修版(褚明意萧鹤明)全书浏览_碎骨揉香与君长诀精修版全书浏览
  • 只因一块表,闺蜜害死我全家热门榜首_陆哲轩李俏陆少爆火全网_小说后续在线阅读_无删减免费完结_
  • 折寒枝簪起霜思全章+后续+结局(宋闻璟沈棠眠)_折寒枝簪起霜思全章+后续+结局(宋闻璟沈棠眠)
  • 高考前一周我绑定了上分系统(袁文淼徐靓靓)_高考前一周我绑定了上分系统(袁文淼徐靓靓)
  • 元乐曦楚寻风:结局+番外免费品鉴终极反转(楚寻风元乐曦):结局+番外评价五颗星
  • 谈了个黄毛后,全家疯了(宋清晏许明月)_谈了个黄毛后,全家疯了(宋清晏许明月)
  • 老婆去给艺术家男性朋友捧场,被我当场抓包超长版_苏棠月顾青竹阅读_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1