search

博客列表 >Grid布局中项目在单元格和容器中对齐方式、防PHP中文网首页、grid媒体查询理解

Grid布局中项目在单元格和容器中对齐方式、防PHP中文网首页、grid媒体查询理解

a.
a.原创
2021年01月01日 14:47:271048浏览

一.Grid布局中项目在单元格和容器中对齐方式

1. 项目在单元格中的对齐方式

  • 项目在单元格中对齐方式分为如下两种：
编号 属性 说明
1. place-items 所有项目在网格单元中的对齐方式
2. place-self 某个项目在网格单元中的对齐方式

1.1 place-items属性：所有项目在网格单元中的对齐方式

  1. /*左上角*/
  2. place-items:start;
  3. /*上中*/
  4. place-items:start center;
  5. /*右上角*/
  6. place-items:start end;
  7. /*da下角*/
  8. place-items:end start;
  9. /*中下*/
  10. place-items:end center;
  11. /*右下角*/
  12. place-items:end;
  13. /*水平垂直居中*/
  14. place-items:center;

1.2 place-self属性：某个项目在网格单元中的对齐方式

  • !这个属性必须用在项目上
  1. <html>
  2.   <head>
  3.     <meta charset="utf-8" />
  4.     <style>
  5.       .container {
  6.         border: solid 1px blue;
  7.         display: grid;
  8.         grid-template-columns: repeat(3, 8em);
  9.         grid-template-rows: repeat(2, 8em);
  10.         place-items: end;
  11.         gap: 0.5em;
  12.         /* place-content:space-around  space-evenly; */
  13.       }
  14.       .container > .item {
  15.         background-color: red;
  16.         width: 5em;
  17.         height: 5em;
  18.       }
  19.       .container > .item:nth-of-type(2) {
  20.         place-self: start;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="container">
  26.       <div class="item">1</div>
  27.       <div class="item">2</div>
  28.       <div class="item">3</div>
  29.       <div class="item">4</div>
  30.       <div class="item">5</div>
  31.       <div class="item">6</div>
  32.     </div>
  33.   </body>
  34. </html>

2. 将所有项目做为一个整体在容器中对齐

  • 有剩余空间时才有效果

属性语法：place-content:垂直方向 水平方向

3. 将所有项目打散成独立个体在容器中对齐

属性place-content常用值：

  1. place-content:space-between;
  2. place-content:space-around;
  3. place-content:space-evenly;

  1. <html>
  2.   <head>
  3.     <meta charset="utf-8" />
  4.     <style>
  5.       .container {
  6.         border: solid 1px blue;
  7.         display: grid;
  8.         grid-template-columns: repeat(3, 8em);
  9.         grid-template-rows: repeat(2, 8em);
  10.         /* place-items: end; */
  11.         gap: 0.5em;
  12.         place-content: space-between;
  13.         place-content: space-around;
  14.         place-content: space-evenly;
  15.         place-content: space-around space-evenly;
  16.       }
  17.       .container > .item {
  18.         background-color: red;
  19.         width: 5em;
  20.         height: 5em;
  21.       }
  23.       /* .container > .item:nth-of-type(2) {
  24.         place-self: start;
  25.       } */
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div class="container">
  30.       <div class="item">1</div>
  31.       <div class="item">2</div>
  32.       <div class="item">3</div>
  33.       <div class="item">4</div>
  34.       <div class="item">5</div>
  35.       <div class="item">6</div>
  36.     </div>
  37.   </body>
  38. </html>

二.仿PHP中文网首页

效果图


代码

HMLT

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="style.css" />
  7.     <title>php中文网欢迎你</title>
  8.   </head>
  9.   <body>
  10.     <header>
  11.       <div class="logo"></div>
  12.       <ul class="top-nav">
  13.         <li><a href="#">首页</a></li>
  14.         <li><a href="">视频教程</a></li>
  15.         <li><a href="">入门教程</a></li>
  16.         <li><a href="">社区问答</a></li>
  17.         <li><a href="">技术文章</a></li>
  18.         <li><a href="">资源下载</a></li>
  19.         <li><a href="">工具下载</a></li>
  20.         <li><a href="">PHP培训</a><span class="nav-new">新</span></li>
  21.       </ul>
  22.       <ul class="user">
  23.         <li><a href="">登录</a></li>
  24.         <li><a href="">注册</a></li>
  25.       </ul>
  26.     </header>
  27.     <main class="main">
  28.       <div class="main-top">
  29.         <div class="main-menus">
  30.           <ul>
  31.             <li><a href="">php开发</a></li>
  32.             <li><a href="">前端开发</a></li>
  33.             <li><a href="">服务端开发</a></li>
  34.             <li><a href="">移动开发</a></li>
  35.             <li><a href="">数据库</a></li>
  36.             <li><a href="">服务器运维</a></li>
  37.             <li><a href="">在线工具</a></li>
  38.             <li><a href="">常用类库</a></li>
  39.           </ul>
  40.         </div>
  42.         <div class="main-navs">
  43.           <ul>
  44.             <li><a href="">php头条</a></li>
  45.             <li><a href="">独孤9贱</a></li>
  46.             <li><a href="">学习路线</a></li>
  47.             <li><a href="">在线工具</a></li>
  48.             <li><a href="">趣味课堂</a></li>
  49.             <li><a href="">社区问答</a></li>
  50.             <li><a href="">课程直播</a></li>
  51.             <li>
  52.               <input type="text" placeholder="请输入关键词搜索" /><a href=""
  53.                 ><span class="iconfont icon-sousuo"></span
  54.               ></a>
  55.             </li>
  56.           </ul>
  57.         </div>
  58.         <div class="main-img">
  59.           <a href=""
  60.             ><img
  61.               src="https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg"
  62.           /></a>
  63.         </div>
  64.         <div class="main-footer">
  65.           <ul>
  66.             <li>
  67.               <a href=""
  68.                 ><img
  69.                   src="https://www.php.cn/static/images/index_yunv.jpg"
  70.                   alt=""
  71.               /></a>
  72.             </li>
  73.             <li>
  74.               <a href=""
  75.                 ><img
  76.                   src="https://www.php.cn/static/images/index_php_item2_.png?1"
  77.                   alt=""
  78.               /></a>
  79.             </li>
  80.             <li>
  81.               <a href=""
  82.                 ><img
  83.                   src="https://www.php.cn/static/images/index_php_item3.jpg?1"
  84.                   alt=""
  85.               /></a>
  86.             </li>
  87.             <li>
  88.               <a href=""
  89.                 ><img
  90.                   src="https://www.php.cn/static/images/index_php_new4.jpg?1"
  91.                   alt=""
  92.               /></a>
  93.             </li>
  94.           </ul>
  95.         </div>
  96.       </div>
  97.       <div class="main-tt">
  98.         <div class="article">
  99.           <h5>头条</h5>
  100.           <ul>
  101.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  102.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  103.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  104.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  105.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  106.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  107.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  108.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  109.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  110.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  111.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  112.             <li><a href="">值得研究的20个Vue开源项目</a></li>
  113.           </ul>
  114.         </div>
  115.         <div class="course">
  116.           <h5>最新课程</h5>
  117.           <ul>
  118.             <li>
  119.               <a href=""
  120.                 ><img
  121.                   src="https://img.php.cn/upload/course/000/000/015/5fe53f35072f4326.png"
  122.                   alt=""
  123.                 /><span><lable>高级</lable>通用后台系统实战开发</span></a
  124.               >
  125.             </li>
  126.             <li>
  127.               <a href=""
  128.                 ><img
  129.                   src="https://img.php.cn/upload/course/000/000/015/5fe3e7ef18250408.png"
  130.                   alt=""
  131.                 /><span><lable>高级</lable>通用后台系统实战开发</span></a
  132.               >
  133.             </li>
  134.             <li>
  135.               <a href=""
  136.                 ><img
  137.                   src="https://img.php.cn/upload/course/000/000/015/5fe29e6d8e573924.png"
  138.                   alt=""
  139.                 /><span><lable>高级</lable>通用后台系统实战开发</span></a
  140.               >
  141.             </li>
  142.             <li>
  143.               <a href=""
  144.                 ><img
  145.                   src="https://img.php.cn/upload/course/000/000/015/5fe14c671e418955.png"
  146.                   alt=""
  147.                 /><span><lable>高级</lable>通用后台系统实战开发</span></a
  148.               >
  149.             </li>
  150.             <li>
  151.               <a href=""
  152.                 ><img
  153.                   src="https://img.php.cn/upload/course/000/000/015/5fe03ee146db6354.png"
  154.                   alt=""
  155.                 /><span><lable>高级</lable>通用后台系统实战开发</span></a
  156.               >
  157.             </li>
  158.             <li>
  159.               <a href=""
  160.                 ><img
  161.                   src="https://img.php.cn/upload/course/000/000/001/5fd08fcece8ef207.jpg"
  162.                   alt=""
  163.                 /><span><lable>高级</lable>通用后台系统实战开发</span></a
  164.               >
  165.             </li>
  166.           </ul>
  167.         </div>
  168.         <div class="manual">
  169.           <h5>常用手册</h5>
  170.           <ul>
  171.             <li>
  172.               <img
  173.                 src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"
  174.               />
  175.               <div><a href="">php手册Linux手册</a> <a href="">php手册Linux手册</a>
  176.             </li>
  177.           <li>
  178.               <img
  179.                 src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"
  180.               />
  181.               <div><a href="">php手册Linux手册</a> <a href="">php手册Linux手册</a>
  182.             </div></li>
  183.             <li>
  184.               <img
  185.                 src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"
  186.               /><div>
  187.               <a href="">php手册Linux手册</a> <a href="">php手册Linux手册</a>
  188.             </div></li>
  189.             <li>
  190.               <img
  191.                 src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"
  192.               /><div><a href="">php手册Linux手册</a> <a href="">php手册Linux手册</a>
  193.               </div>
  194.               </li>
  195.             <li>
  196.               <img
  197.                 src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"
  198.               /><div>
  199.               <a href="">php手册Linux手册</a><a href="">php手册Linux手册</a>
  200.             </div></li>
  201.             <li>
  202.               <img
  203.                 src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg"
  204.               /><div>
  205.               <a href="">php手册Linux手册</a><a href="">php手册Linux手册</a>
  206.             </div></li>
  207.           </ul>
  208.         </div>
  209.       </div>
  210.       <div class="r-course">
  211.         <h3><span> &lt;/&gt; </span> php入门精品课程 <span> &lt;/&gt; </span> </h3>
  212.         <div class="r-body">
  213.           <div><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></div>
  214.           <div><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  215.           <div><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  216.           <div><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  217.           <div><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  218.           <div><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  219.           <div><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  220.           <div><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  221.           <div><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  222.           <div><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  223.           <div><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  224.           <div><a href=""><img src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  225.           <div><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  226.           <div><a href=""><img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg" alt=""><span><label>初级</label>编程学习方法分享直播公益课<span>1w+播放</span></span></a></div>
  227.         </div>
  228.       </div>
  229.     </main>
  230.     <footer>
  231.       <div></div>
  232.       <div class="link">
  233.         <ul>
  234.           <li><a href="">网站首页</a></li>
  235.           <li><a href="">php视频</a></li>
  236.           <li><a href="">PHP实战</a></li>
  237.           <li><a href="">PHP代码</a></li>
  238.         </ul>
  239.       </div>
  240.       <div></div>
  241.       <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
  242.       <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1 </p>
  243.     </footer>
  244.   </body>
  245. </html>

CSS

reset.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5.   list-style: none;
  6. }
  8. a {
  9.   text-decoration: none;
  10.   color: rgb(107, 104, 104);
  11. }
  12. body {
  13.   background-color: #f7f7f7;
  14. }

index.css

  1. @import "reset.css";
  2. @import url(https://at.alicdn.com/t/font_2289194_lcufc1dn8s.css);
  3. header {
  4.   background-color: #000;
  5.   display: grid;
  7.   grid-template-columns: 140px 1fr 120px;
  8.   grid-template-rows: 60px;
  9.   gap: 2px;
  11.   box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  12. }
  13. header .logo {
  14.   background: url(https://www.php.cn/static/images/logo.png) no-repeat left
  15.     center;
  16.   background-size: 90%;
  17. }
  18. header .top-nav {
  19.   display: grid;
  20.   grid-template-rows: 1fr;
  21.   grid-template-columns: 72px repeat(7, 104px);
  22.   place-items: center;
  23. }
  24. header .top-nav li {
  25.   width: 100%;
  26.   height: 60px;
  27.   text-align: center;
  28.   line-height: 60px;
  29. }
  30. header .top-nav li .nav-new {
  31.   display: inline-block;
  32.   line-height: 18px;
  33.   width: 18px;
  34.   /* font-weight: normal; */
  35.   font-size: 14px;
  36.   background-color: red;
  37.   color: rgb(255, 255, 255);
  38.   position: relative;
  39.   /* border: solid violet 1px; */
  40.   border-radius: 3px;
  41.   top: -15px;
  42. }
  44. header .top-nav li:first-of-type {
  45.   background-color: #363c41;
  46. }
  48. header .user {
  49.   font-weight: bold;
  50. }
  51. header .user {
  52.   display: grid;
  53.   grid-template-rows: 1fr;
  54.   grid-template-columns: 60px 60px;
  55.   place-items: center;
  56. }
  57. header .top-nav a,
  58. header .user a {
  59.   color: rgb(223, 221, 221);
  60.   font-size: 14px;
  61. }
  62. header .top-nav a:hover,
  63. header .user a:hover {
  64.   color: #fff;
  65. }
  67. .main {
  68.   width: 1200px;
  69.   margin: 30px auto;
  70. }
  71. .main > .main-top {
  72.   display: grid;
  73.   place-content: center;
  74.   grid-template-columns: 215px repeat(4, 1fr);
  75.   grid-template-rows: 60px 330px 105px;
  76.   border-radius: 10px;
  77.   box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.05);
  78. }
  80. .main > .main-top div:first-of-type {
  81.   grid-area: span 3;
  82.   border-start-start-radius: 10px;
  83.   border-end-start-radius: 10px;
  84. }
  85. .main > .main-top div:nth-of-type(2) {
  86.   grid-area: auto / span 4;
  87.   border-start-end-radius: 10px;
  88.   background-color: #fff;
  89. }
  90. .main > .main-top div:nth-of-type(3) {
  91.   grid-area: auto / span 4;
  92. }
  94. .main > .main-top div:nth-of-type(4) {
  95.   grid-area: auto / span 4;
  96.   border-end-end-radius: 10px;
  97. }
  99. .main .main-top .main-menus {
  100.   background-color: #2b333b;
  101. }
  102. .main .main-top .main-menus ul {
  103.   display: grid;
  104.   grid-template-rows: repeat(8, 1fr);
  105.   grid-template-columns: 1fr;
  106.   /* width: 235px;*/
  107.   height: 100%;
  108.   place-items: center start;
  109.   /* gap: 5px; */
  110. }
  111. .main .main-top .main-menus ul li {
  112.   margin-left: 30px;
  113. }
  114. .main .main-top .main-menus ul li a {
  115.   color: rgba(255, 255, 255, 0.6);
  116. }
  117. .main .main-top .main-menus ul li:first-of-type {
  118.   margin-top: 10px;
  119. }
  120. .main .main-top .main-menus ul li:last-of-type {
  121.   margin-bottom: 10px;
  122. }
  124. .main .main-top .main-navs ul li input {
  125.   border-radius: 3px;
  126.   border: none;
  127.   background-color: #f1f0f0;
  128.   height: 40px;
  129.   width: 250px;
  130.   padding: 0 12px;
  131.   border-bottom: solid 1px #ccc;
  132. }
  133. .main .main-top .main-navs ul li a span {
  134.   position: relative;
  135.   right: 30px;
  136.   top: 2px;
  137. }
  138. .main .main-top .main-navs ul {
  139.   display: grid;
  140.   grid-template-columns: repeat(7, 1fr) 280px;
  141.   grid-template-rows: 1fr;
  142.   height: 100%;
  144.   place-items: center;
  145. }
  147. .main .main-top .main-img a img {
  148.   width: 985px;
  149. }
  151. .main .main-top .main-footer ul {
  152.   height: 100%;
  153.   display: grid;
  154.   grid-template-columns: repeat(4, 1fr);
  155.   grid-template-rows: 1fr;
  156. }
  157. .main .main-top .main-footer ul li a img {
  158.   border-radius: 8px;
  159.   width: 235px;
  160.   margin: 8px 4px;
  161. }
  163. /*****/
  165. .main .main-tt {
  166.   display: grid;
  167.   grid-template-columns: 300px 620px 260px;
  168.   grid-template-rows: 450px;
  169.   gap: 10px;
  170.   /* background-color: #fff; */
  171.   margin: 20px auto;
  172.   border-radius: 10px;
  173. }
  174. .main .main-tt .article,
  175. .main .main-tt .course,
  176. .main .main-tt .manual,
  177. .main .main-tt .course ul li {
  178.   background-color: #fff;
  179.   border-radius: 10px;
  180.   box-shadow: 0 4px 8px 0 #ccc;
  181. }
  182. .main .main-tt .article {
  183.   display: grid;
  184.   grid-template-rows: 40px 1fr;
  185. }
  186. .main .main-tt * h5 {
  187.   margin: 7px 20px;
  188.   padding: 0 20px;
  189.   border-bottom: dotted 1px #ccc;
  190. }
  191. .main .main-tt .article ul {
  192.   display: grid;
  193.   grid-template-rows: repeat(12, 1fr);
  194.   grid-template-columns: 1fr;
  195.   margin: 0 20px;
  196. }
  198. .main .main-tt .course {
  199.   display: grid;
  200.   grid-template-rows: 40px 1fr;
  201.   grid-template-columns: 1fr;
  202. }
  203. .main .main-tt .course ul {
  204.   display: grid;
  205.   grid-template-rows: 1fr 1fr;
  206.   grid-template-columns: repeat(3, 1fr);
  207.   gap: 5px;
  208.   place-items: start center;
  209.   margin: 0 20px;
  210. }
  211. .main .main-tt .course ul li {
  212.   margin-top: 10px;
  213.   width: 170px;
  214.   /* height: 160px; */
  215.   background-color: #fff;
  216.   /* border: red 1px solid; */
  217. }
  218. .main .main-tt .course ul li a {
  219.   display: grid;
  220.   grid-template-rows: 90px 50px;
  221.   grid-template-columns: 1fr;
  222. }
  223. .main .main-tt .course ul li a span {
  224.   background-color: #fff;
  225.   position: relative;
  226.   font-size: 14px;
  227.   /* height: 80px; */
  228.   padding: 15px;
  229.   /* border-top: red 1px solid; */
  230.   border-radius: 10px;
  231.   top: -15px;
  232. }
  233. .main .main-tt .course ul li a span lable {
  234.   padding: 3px 3px;
  235.   margin: 0 3px;
  236.   color: #fff;
  237.   background-color: #ccc;
  238. }
  240. .main .main-tt .course ul li a img {
  241.   width: 170px;
  242.   height: 90px;
  243.   border-radius: 10px;
  244. }
  246. .main .main-tt .manual {
  247.   display: grid;
  248.   grid-template-columns: 1fr;
  249.   grid-template-rows: 40px 1fr;
  250. }
  251. .main .main-tt .manual ul {
  252.   margin: 0 20px;
  253.   display: grid;
  254.   grid-template-columns: 1fr;
  255.   grid-template-rows: repeat(6, 1fr);
  256. }
  257. .main .main-tt .manual ul li {
  258.   display: grid;
  259.   grid-template-rows: 50px;
  260.   grid-template-columns: 40px 1fr;
  261.   place-items: center;
  262. }
  263. /* .main .main-tt .manual ul li */
  265. .main .main-tt .manual ul li img {
  266.   width: 40px;
  267. }
  268. .main .main-tt .manual ul li div {
  269.   margin-left: 15px;
  270.   font-size: 14px;
  271. }
  273. /*精品课程*/
  275. .main .r-course {
  276.   background-color: #fff;
  277.   border-radius: 10px;
  278.   box-shadow: 0 4px 8px 0 #ccc;
  279. }
  280. .main .r-course h3 {
  281.   padding: 25px 0;
  282.   color: #6d6b6b;
  283.   text-align: center;
  284. }
  285. .main .r-course h3 span {
  286.   color: #1e9fff;
  287.   font-size: 20px;
  288.   /* font-weight: 1200; */
  289. }
  291. .main .r-course .r-body {
  292.   display: grid;
  293.   grid-template-columns: repeat(5, 220px);
  294.   grid-template-rows: repeat(3, 170px);
  295.   gap: 15px;
  296.   place-content: center;
  297.   padding-bottom: 20px;
  298. }
  300. .main .r-course .r-body div:first-of-type {
  301.   grid-area: span 2;
  302. }
  303. .main .r-course .r-body div {
  304.   box-shadow: 0 4px 8px #ccc;
  305.   width: 217px;
  306.   /* height: 180px; */
  307.   /* background-color: violet; */
  308.   border-radius: 10px;
  309. }
  310. .main .r-course .r-body div a {
  311.   font-size: 14px;
  312. }
  313. .main .r-course .r-body div a span {
  314.   display: block;
  315.   background-color: #fff;
  316.   position: relative;
  317.   padding: 4px 5px;
  318.   border-radius: 10px;
  319.   top: -25px;
  320. }
  321. .main .r-course .r-body div a span label {
  322.   background-color: #ccc;
  323.   padding: 1px;
  324.   margin-right: 5px;
  325. }
  326. .main .r-course .r-body div a span span {
  327.   display: inline;
  328.   position: relative;
  329.   /* display: inline-block; */
  330.   color: #93999f;
  331.   font-size: 12px;
  332.   top: 15px;
  333.   right: -140px;
  334. }
  335. .main .r-course .r-body * img {
  336.   border-radius: 10px;
  337. }
  338. .main .r-course .r-body div:not(:first-of-type) img {
  339.   width: 217px;
  340. }
  342. /**/
  343. footer {
  344.   height: 170px;
  345.   background-color: #393d49;
  346.   display: grid;
  347.   grid-template-columns: 1fr 1200px 1fr;
  348.   grid-template-rows: repeat(3fr);
  349.   place-items: center start;
  350. }
  351. footer .link ul li {
  352.   float: left;
  353.   margin-top: 40px;
  354. }
  355. .link ul li a {
  356.   padding: 0px 15px 0 0;
  357.   color: rgb(194, 192, 192);
  358.   font-size: 12px;
  359. }
  360. .link ul li a:hover {
  361.   color: rgb(255, 255, 255);
  362. }
  363. footer div:first-of-type {
  364.   grid-area: span 3;
  365. }
  366. footer div:nth-of-type(3) {
  367.   grid-area: span 3;
  368. }
  369. footer p {
  370.   color: #787d82;
  371.   font-size: 11px;
  372. }

三. grid媒体查询

1.传统媒体查询：

传统媒体查询要设置每个VH区间的显示大小，页面宽度达到区间设置的视口宽度后调整页面大小

2.grid媒体查询：

grid 利用auto-fit自动填充，根本每个项目宽度来决定放多少列或行，自动适配


代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>grid媒体查询</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       .imgs {
  14.         margin: 5em;
  15.         padding: 1em;
  16.         display: grid;
  17.         grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
  18.         grid-template-rows: repeat(auto-fit, minmax(10em, 70%));
  19.         place-content: start space-evenly;
  20.         gap: 1em;
  21.         background-color: violet;
  22.         border-radius: 10px;
  23.       }
  24.       .imgs img {
  25.         width: 100%;
  26.         border: 2px solid pink;
  27.         border-radius: 20px;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div class="imgs">
  33.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  34.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  35.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  36.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  37.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  38.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  39.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  40.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  41.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  42.       <img src="https://s3.ax1x.com/2021/01/01/rxURMD.jpg" alt="" />
  43.     </div>
  44.   </body>
  45. </html>
上一条：flex布局——京东商城头部+导航下一条：flex布局仿京东移动端首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多