search

博客列表 >Grid项目在网格单元和容器中对齐方式、快速仿php中文网首页

Grid项目在网格单元和容器中对齐方式、快速仿php中文网首页

吳
吳 原创
2021年01月03日 17:46:42628浏览

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

place-items设置容器中的所有项目在网格单元中的对齐方式
项目在网格单元中默认是拉伸的，只有项目在网格单元中存在剩余空间时，对齐才有必要且有意义

  • place-items: 垂直方向 水平方向；
  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>项目在网格单元中的对齐方式</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             border: 1px solid red;
  16.             padding: 0.5em;
  17.             display: grid;
  18.             grid-template-columns: repeat(3, 1fr);
  19.             grid-template-rows: repeat(2, 5em);
  20.             grid-auto-rows: 5em;
  21.             gap: 0.5em;
  22.         }
  24.         .container>.item {
  25.             background-color: lightyellow;
  26.             border: 1px solid red;
  27.             padding: 0.5em;
  28.         }
  30.         .container>.item {
  31.             height: 2em;
  32.             width: 5em;
  33.         }
  35.         .container {
  36.             /* 垂直居上 水平居中 */
  37.             place-items: start center;
  38.             /* 垂直水平都居中 */
  39.             place-items: center center;
  40.             /* 当第二个值与第一个值一样时，可以省略第二个 */
  41.             place-items: center;
  42.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div class="container">
  49.         <div class="item">test1</div>
  50.         <div class="item">test2</div>
  51.         <div class="item">test3</div>
  52.         <div class="item">test4</div>
  53.         <div class="item">test5</div>
  54.         <div class="item">test6</div>
  55.         <div class="item">test7</div>
  56.         <div class="item">test8</div>
  57.         <div class="item">test9</div>
  58.     </div>
  59. </body>
  61. </html>
  • place-items: stretch; 拉伸：取消项目的固定尺寸才可以看到效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>项目在网格单元中的对齐方式</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             border: 1px solid red;
  17.             padding: 0.5em;
  18.             display: grid;
  19.             grid-template-columns: repeat(3, 1fr);
  20.             grid-template-rows: repeat(2, 5em);
  21.             grid-auto-rows: 5em;
  22.             gap: 0.5em;
  23.         }
  25.         .container>.item {
  26.             background-color: lightyellow;
  27.             border: 1px solid red;
  28.             padding: 0.5em;
  29.         }
  31.         .container {
  32.             place-items: stretch;
  33.         }
  34.     </style>
  35. </head>
  37. <body>
  38.     <div class="container">
  39.         <div class="item">test1</div>
  40.         <div class="item">test2</div>
  41.         <div class="item">test3</div>
  42.         <div class="item">test4</div>
  43.         <div class="item">test5</div>
  44.         <div class="item">test6</div>
  45.         <div class="item">test7</div>
  46.         <div class="item">test8</div>
  47.         <div class="item">test9</div>
  48.     </div>
  49. </body>
  51. </html>
  • place-self:;设置容器中的某一个项目在网格单元中的对齐方式

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>项目在网格单元中的对齐方式</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             border: 1px solid red;
  16.             padding: 0.5em;
  17.             display: grid;
  18.             grid-template-columns: repeat(3, 1fr);
  19.             grid-template-rows: repeat(2, 5em);
  20.             grid-auto-rows: 5em;
  21.             gap: 0.5em;
  22.         }
  24.         .container>.item {
  25.             background-color: lightyellow;
  26.             border: 1px solid red;
  27.             padding: 0.5em;
  28.         }
  30.         .container>.item {
  31.             height: 2em;
  32.             width: 5em;
  33.         }
  35.         .container>.item:nth-of-type(5) {
  36.             background-color: red;
  37.             /* 居中对齐 */
  38.             place-self: center center;
  39.             /* 底部对齐 */
  40.             place-self: end;
  41.         }
  42.     </style>
  43. </head>
  45. <body>
  46.     <div class="container">
  47.         <div class="item">test1</div>
  48.         <div class="item">test2</div>
  49.         <div class="item">test3</div>
  50.         <div class="item">test4</div>
  51.         <div class="item">test5</div>
  52.         <div class="item">test6</div>
  53.         <div class="item">test7</div>
  54.         <div class="item">test8</div>
  55.         <div class="item">test9</div>
  56.     </div>
  57. </body>
  59. </html>

2. 项目在容器中的对齐方式

只有项目在容器中存在剩余空间时对齐才有必要且有意义

  • place-content: center;将所有项目作为一个整体在容器中对齐

  1. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>项目在容器中的对齐方式</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  14.         .container {
  15.             height: 25em;
  16.             border: 1px solid red;
  17.             padding: 0.5em;
  18.             display: grid;
  19.             grid-template-columns: repeat(3, 10em);
  20.             grid-template-rows: repeat(2, 5em);
  21.             grid-auto-rows: 5em;
  22.             gap: 0.5em;
  24.             place-content: start start;
  25.             /* 顶部居中 */
  26.             place-content: start center;
  27.             /* 水平居中 */
  28.             place-content: center center;
  29.             place-content: center;
  31.         }
  33.         .container>.item {
  34.             background-color: yellow;
  35.             border: 2px solid black;
  36.             padding: 0.5em;
  38.         }
  39.     </style>
  40. </head>
  42. <body>
  43.     <div class="container">
  44.         <div class="item">test1</div>
  45.         <div class="item">test2</div>
  46.         <div class="item">test3</div>
  47.         <div class="item">test4</div>
  48.         <div class="item">test5</div>
  49.         <div class="item">test6</div>
  50.         <div class="item">test7</div>
  51.         <div class="item">test8</div>
  52.         <div class="item">test9</div>
  53.     </div>
  54. </body>
  56. </html>
  • place-content: space-around space-evenly;将所有项目打散成独立个体在容器中设置对齐方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>项目在容器中的对齐方式</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             height: 25em;
  17.             border: 1px solid red;
  18.             padding: 0.5em;
  19.             display: grid;
  20.             /* 只有所有项目在容器中存在剩余控件时对齐才有必要且有意义 */
  21.             grid-template-columns: repeat(3, 10em);
  22.             grid-template-rows: repeat(2, 5em);
  23.             grid-auto-rows: 5em;
  24.             gap: 0.5em;
  26.             /* 二端对齐 */
  27.             place-content: space-between;
  28.             place-content: space-around space-evenly; 
  29.         }
  31.         .container>.item {
  32.             background-color: yellow;
  33.             border: 2px solid black;
  34.             padding: 0.5em;
  36.         }
  37.     </style>
  38. </head>
  40. <body>
  41.     <div class="container">
  42.         <div class="item">test1</div>
  43.         <div class="item">test2</div>
  44.         <div class="item">test3</div>
  45.         <div class="item">test4</div>
  46.         <div class="item">test5</div>
  47.         <div class="item">test6</div>
  48.         <div class="item">test7</div>
  49.         <div class="item">test8</div>
  50.         <div class="item">test9</div>
  51.     </div>
  52. </body>
  54. </html>

2.快速仿php.cn首页布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>仿php中文网首页</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.             font-size: 14px;
  14.         }
  16.         li {
  17.             list-style: none;
  18.         }
  20.         a {
  21.             color: #b9b9bb;
  22.             text-decoration: none;
  23.         }
  25.         header {
  26.             background-color: black;
  27.             display: grid;
  28.             grid-template-columns: 170px 1fr 170px;
  29.             grid-template-rows: 58px;
  30.             /* gap: 0.5em; */
  31.             /* place-items: center; */
  32.         }
  34.         header .top-container {
  35.             display: grid;
  36.             grid-template-columns: repeat(8, 100px);
  37.             /* gap: 1em; */
  38.             place-items: center start;
  39.             height: 58px;
  40.             padding-left: 30px;
  41.         }
  43.         header .top-container li {
  44.             height: 100%;
  45.             width: 100%;
  46.             display: grid;
  47.             place-items: center;
  48.             border-bottom: 5px solid black;
  49.         }
  51.         header .top-container li:hover {
  52.             /* background-color: rgb(59, 58, 58); */
  53.             border-bottom: 5px solid rgb(17, 192, 17);
  54.             transition: .3s;
  55.             /* 给li标签设置小手 */
  56.             cursor: pointer;
  57.         }
  59.         header .top-container li:hover a {
  60.             color: #fff;
  61.             transition: .3s;
  63.         }
  65.         header .logo {
  66.             display: grid;
  67.             place-items: center;
  68.             grid-template-rows: 58px;
  69.         }
  71.         header .login {
  72.             display: grid;
  73.             /* text-align: center; */
  74.             grid-template-columns: 50px 50px;
  75.             place-items: center;
  76.         }
  78.         main {
  79.             display: grid;
  80.             place-items: center;
  81.         }
  83.         /* 主体：菜单栏 */
  84.         main .body-top {
  85.             width: 1200px;
  86.             height: 510px;
  87.             display: grid;
  88.             /* 距离顶部20px */
  89.             margin-top: 20px;
  90.             /* 设置边框圆角 */
  91.             border-radius: 10px;
  92.             /* 设置轨道列宽 */
  93.             grid-template-columns: 218px 60px 331px 120px;
  94.             /* 边框阴影 */
  95.             box-shadow: 2px 2px 10px #999;
  96.             margin-bottom: 20px;
  97.         }
  99.         /* 左侧菜单栏 */
  100.         main .body-top .body-left {
  101.             height: 510px;
  102.             background-color: rgb(56, 51, 51);
  103.             border-radius: 10px 0 0 10px;
  104.             padding-top: 15px;
  105.         }
  107.         main .body-top .body-left li {
  108.             display: grid;
  109.             line-height: 50px;
  110.             grid-template-columns: 1fr 35px;
  111.             /* 调整内边距距离 */
  112.             padding: 5px 10px 5px 20px;
  113.         }
  115.         main .body-top .body-left li:hover {
  116.             background-color: rgb(78, 76, 76);
  117.             transition: .2s;
  118.         }
  120.         main .body-top .body-left li a+span {
  121.             color: rgb(148, 143, 143);
  122.         }
  124.         /* 主体：顶部菜单栏 */
  125.         main .body-top .body-mian .nav-top {
  126.             /* background-color: yellow; */
  127.             display: grid;
  128.             grid-template-columns: repeat(7, 100px) 40px;
  129.             grid-template-rows: 60px;
  130.             gap: 5px;
  131.         }
  133.         main .body-top .body-mian .nav-top li {
  134.             line-height: 60px;
  135.             text-align: center;
  136.         }
  138.         main .body-top,
  139.         .body-mian .nav-top li a {
  140.             color: black;
  141.         }
  143.         main .body-top .body-mian .nav-top li a:hover {
  144.             color: #999;
  145.         }
  147.         main .body-top .body-mian .nav-top .red {
  148.             background-color: orangered;
  149.             padding: 0 2px 0 2px;
  150.             color: white;
  151.             border-radius: 3px;
  152.         }
  154.         main .body-top .body-mian .nav-top .blue {
  155.             background-color: rgb(67, 99, 146);
  156.             padding: 0 2px 0 2px;
  157.             color: white;
  158.             border-radius: 3px;
  159.         }
  161.         main .body-top .body-mian .nav-top .yellow {
  162.             background-color: rgb(255, 196, 0);
  163.             padding: 0 2px 0 2px;
  164.             color: white;
  165.             border-radius: 3px;
  166.         }
  168.         /* 搜索框 */
  169.         main .body-top .body-mian .nav-top input {
  170.             background-color: #f1f0f0;
  171.             border: none;
  172.             outline: none;
  173.             width: 240px;
  174.             height: 30px;
  175.             padding-left: 10px;
  176.             border-radius: 2px;
  177.         }
  179.         /* 轮播图 */
  180.         main .body-top .body-mian .body-img img {
  181.             width: 982px;
  182.         }
  184.         /* 课程推荐 */
  185.         main .body-top .body-mian .body-hdp {
  186.             display: grid;
  187.             width: 982px;
  188.             grid-template-columns: repeat(4, 1fr);
  189.             place-items: center;
  190.             grid-template-rows: 108px;
  191.             gap: 5px;
  192.         }
  194.         main .body-top .body-mian .body-hdp img {
  195.             border-radius: 5px;
  196.         }
  198.         /* 中部广告图 */
  199.         main .ggt img {
  200.             border-radius: 5px;
  201.         }
  203.         /* 入门精品课程 */
  204.         main .jpkc {
  205.             width: 1200px;
  206.             height: 646px;
  208.             padding: 15px;
  209.             box-shadow: 2px 2px 10px #999;
  210.             /* background-color: rgb(247, 242, 242); */
  211.             margin: 30px auto;
  212.             display: grid;
  213.             grid-template-rows: 50px 1fr;
  214.             gap: 20px;
  216.             border-radius: 10px;
  217.         }
  219.         main .jpkc h2 {
  220.             color: #444444;
  221.             text-align: center;
  222.             font-size: 16px;
  223.             font-weight: bold margin-bottom: 30px;
  224.         }
  226.         main .jpkc h2 span {
  227.             color: #23a7ff;
  228.             font-weight: bold;
  229.         }
  231.         main .jpkc-list {
  232.             display: grid;
  233.             margin-top: 58px;
  234.             grid-template-columns: repeat(5, 1fr);
  235.             grid-template-rows: repeat(3, 1fr);
  236.             gap: 15px;
  237.         }
  239.         main .jpkc-list>* {
  240.             box-shadow: 2px 2px 10px 2px rgb(218, 214, 214);
  241.             /* background-color: rgb(238, 238, 238); */
  242.             border-radius: 10px;
  243.             width: 218px;
  244.         }
  246.         main .jpkc-list li img {
  247.             width: 218px;
  248.             border-radius: 10px;
  249.         }
  251.         main .jpkc-list li img:hover {
  252.             opacity: 0.7;
  253.             transition: 0.2s;
  254.         }
  257.         main .jpkc-list>li:first-of-type {
  258.             grid-area: span 2;
  259.             height: 331px;
  260.         }
  262.         main .jpkc-list>li span {
  263.             background-color: rgb(116, 116, 116);
  264.             color: white;
  265.             margin-right: 5px;
  266.             font-size: 12px;
  267.             padding: 1px;
  268.             border-radius: 3px;
  269.         }
  271.         main .jpkc-list {
  272.             position: absolute;
  273.         }
  275.         main .jpkc-list .last {
  276.             position: relative;
  277.             text-align: center;
  278.             border-radius: 10px;
  279.             padding-top: 5px;
  280.             background-color: white;
  281.             bottom: 20px;
  282.             color: black;
  283.         }
  285.         main .jpkc-list .bf {
  286.             margin-left: 20px;
  287.             font-size: 10px;
  288.             margin-bottom: 10px;
  289.             color: #999;
  290.         }
  292.         /* 页脚样式 */
  293.         footer {
  294.             background-color: rgb(54, 53, 53);
  296.         }
  298.         footer .fo {
  299.             width: 1200px;
  300.             display: grid;
  301.             place-content: start center;
  302.         }
  304.         footer .fo .fo-dh {
  305.             display: grid;
  306.             padding-top: 20px;
  307.             padding-bottom: 20px;
  308.             grid-template-columns: repeat(9, 1fr);
  309.             gap: 5px;
  310.         }
  312.         footer .fo .fo-dh li a {
  313.             font-size: 10px;
  314.             color: #ffffffb6;
  315.         }
  317.         footer .sm {
  318.             color: #999;
  319.             font-size: 8px;
  320.             padding-bottom: 20px;
  321.         }
  323.         footer .fo-fo {
  324.             color: #999;
  326.         }
  328.         footer .fo-fo .hz {
  329.             display: grid;
  330.             grid-template-columns: repeat(4, 1fr);
  331.             width: 300px;
  332.             padding-top: 20px;
  333.             padding-bottom: 20px;
  334.         }
  336.         footer .fo-fo img {
  337.             width: 18px;
  338.             height: 15px;
  339.         }
  340.     </style>
  341. </head>
  343. <body>
  344.     <header>
  345.         <div class="logo">
  346.             <a href=""><img src="https://www.php.cn/static/images/logo.png" alt=""></a>
  347.         </div>
  348.         <div class="top-container">
  349.             <li><a href="">首页</a></li>
  350.             <li><a href="">视频教程</a></li>
  351.             <li><a href="">入门教程</a></li>
  352.             <li><a href="">社区问答</a></li>
  353.             <li><a href="">技术文章</a></li>
  354.             <li><a href="">资源下载</a></li>
  355.             <li><a href="">工具下载</a></li>
  356.             <li><a href="">PHP培训</a></li>
  357.         </div>
  358.         <div class="login">
  359.             <a href="">登录</a>
  360.             <a href="">注册</a>
  361.         </div>
  362.     </header>
  363.     <main>
  364.         <div class="body-top">
  365.             <div class="body-left">
  366.                 <li><a href="">php开发</a><span>&gt;</span></li>
  367.                 <li><a href="">前端开发</a><span>&gt;</span></li>
  368.                 <li><a href="">服务端开发</a><span>&gt;</span></li>
  369.                 <li><a href="">移动开发</a><span>&gt;</span></li>
  370.                 <li><a href="">数据库</a><span>&gt;</span></li>
  371.                 <li><a href="">服务器运维&下载</a><span>&gt;</span></li>
  372.                 <li><a href="">在线工具箱</a><span>&gt;</span></li>
  373.                 <li><a href="">常用类库</a><span>&gt;</span></li>
  374.             </div>
  375.             <div class="body-mian">
  376.                 <div class="nav-top">
  377.                     <li><a href="">PHP头条</a><span class="red">新</span></li>
  378.                     <li><a href="">独孤九贱</a></li>
  379.                     <li><a href="">学习路线</a><span class="blue">新</span></li>
  380.                     <li><a href="">在线工具</a></li>
  381.                     <li><a href="">趣味课堂</a><span class="yellow">新</span></li>
  382.                     <li><a href="">社区问答</a></li>
  383.                     <li><a href="">课程直播</a></li>
  384.                     <li><input type="text" name="searce" placeholder="请输入关键字"></li>
  385.                 </div>
  386.                 <div class="body-img"><img src="https://img.php.cn/upload/article/000/000/001/5fb478a8e82cb116.jpg"
  387.                         alt=""></div>
  388.                 <div class="body-hdp">
  389.                     <a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a>
  390.                     <a href=""><img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt=""></a>
  391.                     <a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a>
  392.                     <a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a>
  393.                 </div>
  394.             </div>
  395.         </div>
  396.         <div class="ggt">
  397.             <a href=""><img src="https://img.php.cn/upload/article/000/000/001/5fb478ce65c09239.jpg" alt=""></a>
  398.         </div>
  400.         <div class="jpkc">
  401.             <h2><span>&lt;/&gt;</span>PHP入门精品课程<span>&lt;/&gt;</span></h2>
  402.             <ul class="jpkc-list">
  403.                 <li><a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a></li>
  404.                 <li>
  405.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  408.                     <a href="">
  409.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  410.                     </a>
  411.                     <p class="bf"> 1W+次播放</p>
  412.                 </li>
  413.                 <li>
  414.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  416.                     <a href="">
  417.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  418.                     </a>
  419.                     <p class="bf"> 1W+次播放</p>
  420.                 </li>
  421.                 <li>
  422.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  424.                     <a href="">
  425.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  426.                     </a>
  427.                     <p class="bf"> 1W+次播放</p>
  428.                 </li>
  429.                 <li>
  430.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  432.                     <a href="">
  433.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  434.                     </a>
  435.                     <p class="bf"> 1W+次播放</p>
  436.                 </li>
  437.                 <li>
  438.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  440.                     <a href="">
  441.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  442.                     </a>
  443.                     <p class="bf"> 1W+次播放</p>
  444.                 </li>
  445.                 <li>
  446.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  448.                     <a href="">
  449.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  450.                     </a>
  451.                     <p class="bf"> 1W+次播放</p>
  452.                 </li>
  453.                 <li>
  454.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  456.                     <a href="">
  457.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  458.                     </a>
  459.                     <p class="bf"> 1W+次播放</p>
  460.                 </li>
  462.                 <li>
  463.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  465.                     <a href="">
  466.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  467.                     </a>
  468.                     <p class="bf"> 1W+次播放</p>
  469.                 </li>
  470.                 <li>
  471.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  473.                     <a href="">
  474.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  475.                     </a>
  476.                     <p class="bf"> 1W+次播放</p>
  477.                 </li>
  478.                 <li>
  479.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  481.                     <a href="">
  482.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  483.                     </a>
  484.                     <p class="bf"> 1W+次播放</p>
  485.                 </li>
  486.                 <li>
  487.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  489.                     <a href="">
  490.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  491.                     </a>
  492.                     <p class="bf"> 1W+次播放</p>
  493.                 </li>
  494.                 <li>
  495.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  497.                     <a href="">
  498.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  499.                     </a>
  500.                     <p class="bf"> 1W+次播放</p>
  501.                 </li>
  502.                 <li>
  503.                     <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a>
  505.                     <a href="">
  506.                         <p class="last"><span>初级</span>编程学习方法分享直播</p>
  507.                     </a>
  508.                     <p class="bf"> 1W+次播放</p>
  509.                 </li>
  510.             </ul>
  511.         </div>
  512.     </main>
  513.     <footer>
  514.         <div class="fo">
  515.             <div class="fo-dh">
  516.                 <li><a href="">网站首页</a></li>
  517.                 <li><a href="">PHP视频</a></li>
  518.                 <li><a href="">PHP实战</a></li>
  519.                 <li><a href="">PHP代码</a></li>
  520.                 <li><a href="">PHP手册</a></li>
  521.                 <li><a href="">词条</a></li>
  522.                 <li><a href="">手记</a></li>
  523.                 <li><a href="">编程词典</a></li>
  524.                 <li><a href="">PHP培训</a></li>
  525.             </div>
  526.             <div class="sm">
  527.                 <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
  528.             </div>
  529.             <div class="fo-fo">
  530.                 <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
  531.                     <img src="https://www.php.cn/static/images/foot_line.gif" alt="">
  532.                 </p>
  533.                 <div class="hz">
  534.                     <li><a href="">关于我们</a></li>
  535.                     <li><a href="">免责声明</a></li>
  536.                     <li><a href="">赞助与捐赠</a></li>
  537.                     <li><a href="">广告合作</a></li>
  538.                 </div>
  539.             </div>
  540.         </div>
  541.     </footer>
  542. </body>
  544. </html>

3.grid媒体查询与专业的媒体查询区别

grid媒体查询：根据grid容器的宽度，除以最小最大值之间的项目宽度，获得auto-fit的值，垂直方向绘制autofit个列宽的网格，水平方向也类似绘制，空轨折叠，不占据容器空间。

专业的媒体查询：不是依据某元素的父级容器宽度计算，以屏幕宽度查询。

上一条：详说grid布局下一条：箭头函数的应用场景和rest,sprend参数的使用方法；2. 获取dom元素的方式;classList对象与dataset对象的应该场景
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多