search

博客列表 >css中rem+vw布局的原理,grid布局与仿img.baidu.com实例

css中rem+vw布局的原理,grid布局与仿img.baidu.com实例

moon
moon原创
2021年12月30日 22:37:01678浏览

rem+VW布局优势与技巧

  • 此布局优势:元素动态适配页面宽度
  • 通常将html元素的font-size设置为calc(100vw / 3.75)
  • 尽管vm可做到无比丝滑的动态设置元素大小,但为了防止过小,或过大,最好用媒体查询来约束

    grid布局优势

  • 1、固定和灵活的轨道尺寸;
  • 2、可以使用行号,名称或通过定位网格区域将项目放置在网格上的精确位置;
  • 3、可以将多个项目放入网格单元格或区域中,它们可以彼此部分重叠。

grid布局属性

grid布局容器属性

  • grid布局中,grid容器使用grid-template-rows属性来控制布局显示网络需要的行数；
  • grid布局中,grid容器使用grid-template-columns属性来控制布局显示网络需要的列数；
  • grid布局中,grid容器使用grid-auto-rows;属性来控制布局隐式网络的大小
  • grid布局中,grid容器使用gap属性来控制,项目间的间隙
  • grid布局中,grid容器使用place-content属性来控制,剩余空间的分配方式
  • grid布局中,grid容器使用place-items属性来控制,项目在”单元格”中的对齐方式,例如下列代码展示了一个简单的grid布局:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11. <div class="container">
  12.     <div class="item">item1</div>
  13.     <div class="item">item2</div>
  14.     <div class="item">item3</div>
  15.     <div class="item">item4</div>
  16.     <div class="item">item5</div>
  17.     <div class="item">item6</div>
  18.     <div class="item">item7</div>
  19.     <div class="item">item8</div>
  20.     <div class="item">item9</div>
  21. </div>
  23. <style>
  24.     .container {
  25.         width: 30em;
  26.         height: 30em;
  27.         display: grid;
  28.         grid-template-columns: repeat(3,1fr);
  29.         grid-template-rows: repeat(3,1fr);
  30.         background-color: cornsilk;
  31.         gap: 10px 10px;
  32.         place-content: center;
  33.         place-items: center;
  34.     }
  36.     .container .item {
  37.             width: 5em;
  38.             height: 5em;
  39.             background-color: darkorchid;
  40.     }
  41. </style>
  43. </body>
  44. </html>

防img.baidu.com

  • 示例代码如下
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11.     <div class="container">
  13.         <main>
  14.             <div class="header">
  15.                 <div class="top_left">
  16.                     <a href="http://news.baidu.com/"  name="i_news">新闻</a>
  17.                     <a href="https://www.hao123.com/"  name="i_hao123">hao123</a>
  18.                     <a href="http://map.baidu.com/"  name="i_map">地图</a>
  19.                     <a href="https://haokan.baidu.com/?sfrom=baidu-top/"  name="i_video">好看</a>
  20.                     <a href="http://tieba.baidu.com/"  name="i_tieba">贴吧</a>
  21.                     <a href="https://xueshu.baidu.com/" name="i_xueshu">学术</a>
  22.                 </div>
  23.                 <div class="top_right">
  24.                     <a id="new-userinfo-baiduIndex" href="https://www.baidu.com">百度首页</a>
  25.                     <a id="new-userinfo-baiduIndex" href="https://www.baidu.com">收藏本页</a>
  26.                     <a id="new-userinfo-offical" target="_blank" href="https://image.baidu.com/img/image/imageplus/index.html?fr=image">官方合作</a>
  27.                     <button>登录</button>
  28.                 </div>
  29.              </div>
  30.             <div class="dingwei">
  31.                 <img src="./img/myimg1.png" alt="" class="baidu"></img>
  32.                 <input class="sousuo" type="text"></input>
  33.                 <button class="serch">百度一下</button>
  34.                 <div class="tip">
  35.                     <label for="">热门搜索:</label>
  36.                     <label for="">壁纸</label>
  37.                     <label for="">头像</label>
  38.                     <label for="">手抄报</label>
  39.                     <label for="">高清美图</label>
  40.                 </div>
  41.             </div>
  42.         </main>
  43.         <footer>
  44.             精美合辑
  45.             <div class="container">
  46.                 <div class="first">
  47.                     <label for="">城市建筑摄影专题</label>
  48.                 </div>
  49.                 <div class="second">
  50.                     <label for="">渐变风格插画</label>
  51.                 </div>
  52.                 <div class="three">
  53.                     <label for="">皮影</label>
  54.                 </div>
  55.                 <div class="fourth">
  56.                     <label for="">宠物图片</label>
  57.                 </div>
  58.                 <div class="five">
  59.                     <label for="">航拍地球系列</label>
  60.                 </div>
  61.                 <div class="six">
  62.                     <label for="">查看更多合辑</label>
  63.                 </div>
  64.             </div>
  65.         </footer>
  67.     </div>
  69.     <style>
  70.          .container {
  71.             width: 100%;
  72.             height: 32rem;
  73.             display: grid;
  75.             grid-template-columns: repeat(3,1fr);
  77.             grid-template-rows: 3em minmax(calc(100vh - 21em - 0.6em), 1fr) 18em;
  78.             background-color: white;
  81.         }
  87.         main {
  89.             grid-row-end: span 2;
  90.             grid-column-end: span 3;
  92.             background-image:url(https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG);
  94.             width: 100%;
  95.             height: 100%;
  96.             box-sizing: cover;
  97.             overflow: hidden;
  98.             zoom: 1;
  99.             background-position: center center;
  100.             background-color: yellowgreen;
  101.             background-size: 100%;
  102.         }
  104.         main .header{
  105.             background-color: rgba(0,0,0,0.3);
  107.             height: 3em;
  108.             display: flex;
  109.             place-content: space-between;
  110.             place-items: center center;
  113.         }
  115.         main .dingwei{
  117.             position: absolute;
  118.             top:25%;
  119.             left: 30%;
  120.         }
  121.         main .dingwei .baidu{
  122.             position: absolute;
  123.             left:150px;
  124.             height: 76px;
  125.             width: 244px;
  128.         }
  130.         main .dingwei .sousuo{
  131.             position:absolute;
  132.             height: 40px;
  133.             width: 496px;
  134.             font: 16px/18px arial;
  135.             outline: 0;
  136.          border: 0;
  137.             top:100px;
  138.             left: 10px;
  139.         }
  141.         main .dingwei .tip{
  142.             width: 400px;
  143.            color: white;
  144.             display: flex;
  145.             position:absolute;
  146.             top:150px;
  147.             left: 100px;
  148.             place-content: space-between;
  149.         }
  150.         main .dingwei .serch {
  151.             position: absolute;
  152.             top: 99px;
  153.             left: 511px;
  154.             cursor: pointer;
  155.             width: 108px;
  156.             height: 44px;
  157.             line-height: 45px;
  158.             padding: 0;
  159.             background: 0 0;
  160.             background-color: #E4E4E5;
  161.             border-radius: 0 10px 10px 0;
  162.             font-family: Arial;
  163.             font-size: 17px;
  164.             color: #222;
  165.             box-shadow: none;
  166.             font-weight: 400;
  167.             border: 0;
  168.             outline: 0;
  169.         }
  170.         .top_right button{
  171.             background-color: blue;
  172.             color: white;
  173.         }
  174.         footer {
  175.             grid-column-end: span 3;
  176.             background-color: white;
  177.             margin: 15px;
  178.         }
  179.         footer .container{
  181.             display: grid;
  182.             grid-template-rows: repeat(2,1fr);
  183.             grid-template-columns: repeat(3,1fr);
  184.             background-color: white;
  186.         }
  188.         footer .container .first{
  189.             width: 80%;
  190.             height: 80%;
  191.             box-sizing: cover;
  192.             background-repeat: no-repeat;
  193.             background-position: center center;
  194.             background-image: url(https://t7.baidu.com/it/u=1595072465,3644073269&amp;fm=193&amp;f=GIF);
  195.             border-radius: 12px;
  196.             background-color: #E3D3D5;
  197.             margin: 15px;
  198.             background-size: 100%;
  199.         }
  201.         footer .container .second{
  202.             width: 80%;
  203.             height: 80%;
  204.             border-radius: 12px;
  205.             box-sizing: cover;
  206.             background-repeat: no-repeat;
  207.             background-position: center center;
  208.             background-image: url(https://t7.baidu.com/it/u=1819248061,230866778&amp;fm=193&amp;f=GIF);
  210.             background-color: #005E9C;
  211.             margin: 15px;
  212.             background-size: 100%;
  213.         }
  215.         footer .container .three{
  216.             width: 80%;
  217.             height: 80%;
  218.             border-radius: 12px;
  219.             box-sizing: cover;
  220.             background-repeat: no-repeat;
  221.             background-position: center center;
  222.             background-image: url(https://t7.baidu.com/it/u=2168645659,3174029352&amp;fm=193&amp;f=GIF);
  224.             background-color: #B0A290;
  225.             margin: 15px;
  226.             background-size: 100%;
  227.         }
  229.         footer .container .fourth{
  230.             width: 80%;
  231.             height: 80%;
  232.             border-radius: 12px;
  233.             box-sizing: cover;
  234.             background-repeat: no-repeat;
  235.             background-position: center center;
  236.             background-image: url(https://t7.baidu.com/it/u=4162611394,4275913936&amp;fm=193&amp;f=GIF);
  238.             background-color: #AD8151;
  239.             margin: 15px;
  240.             background-size: 100%;
  241.         }
  244.         footer .container .five{
  245.             width: 80%;
  246.             height: 80%;
  247.             border-radius: 12px;
  248.             box-sizing: cover;
  249.             background-repeat: no-repeat;
  250.             background-position: center center;
  251.             background-image: url(https://t7.baidu.com/it/u=2621658848,3952322712&amp;fm=193&amp;f=GIF);
  253.             background-color: #AD8151;
  254.             margin: 15px;
  255.             background-size: 100%;
  256.         }
  260.         footer .container .six{
  261.             width: 80%;
  262.             height: 80%;
  263.             border-radius: 12px;
  264.             box-sizing: cover;
  265.             background-repeat: no-repeat;
  266.             background-position: center center;
  267.             background-image: url(https://emoji.cdn.bcebos.com/yunque/shouyebeijingtu.png);
  269.             background-color: #AD8151;
  270.             margin: 15px;
  271.             background-size: 100%;
  272.         }
  278.         footer .container:nth-of-type(n) label
  279.         {
  280.             position: relative;
  281.             top: 160px;
  282.             color: white;
  283.             padding: 0 16px;
  284.             height: 46px;
  285.             line-height: 46px;
  286.             overflow: hidden;
  287.             font-size: 14px;
  288.             white-space: nowrap;
  289.             text-overflow: ellipsis;
  291.         }
  292.         .top_left a,.top_right a{
  293.             display: inline-block;
  294.             height: 20px;
  295.             font:400;
  296.             color: white;
  297.             text-decoration: none;
  298.             margin: 0 0 0 24px;
  299.         }
  301.     </style>
  302. </body>
  303. </html>

执行代码结构如下:
baidu.img

上一条：根据市面上的 PC 屏 分为 1024,1440,1920 查询屏幕宽度下一条：JS简单计算器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多