Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 《grid实战PHP中文网首页》20201225
Blogger Information
Blog 26
fans 1
comment 1
visits 19661
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
《grid实战PHP中文网首页》20201225
杨凡的博客
Original
664 people have browsed it

grid布局项目在网格单元中的对齐方式

所有项目在网格单元中的对齐方式

1、垂直居上 水平居中
  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>项目在网格单元中的对齐方式</title>
  7.     <style>
  8.         .container{
  9.             border: 1px solid #000;
  10.             padding: 0.5em;
  11.             /* grid布局 */
  12.             display: grid;
  13.             /* 轨道宽度 */
  14.             grid-template-columns: repeat(3,1fr);
  15.             /* 轨道高度 */
  16.             grid-template-rows: repeat(2,5em);
  17.             /* 隐式轨道高度 */
  18.             grid-auto-rows: 5em;
  19.             /* 轨道间隙 */
  20.             gap: 0.5em;
  22.         }
  23.         .container> .item{
  24.             background-color: lightcyan;
  25.             border: 1px solid#000;
  26.             padding: 0.5em;
  27.         }
  28.         /* 项目在网格单元中存在剩余空间，对齐才有必要且有意义 */
  29.         .container> .item{
  30.             width: 5em;
  31.             height: 2em;
  32.         }
  33.         /* 所有项目在网格单元中的对齐方式 */
  34.         .container{
  35.             /* place-items: 垂直方向 水平方向; */
  36.             /* 垂直居上 水平居中 */
  37.             /* place-items: normal center; */
  38.             place-items: start center;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="container">
  44.         <div class="item">item1</div>
  45.         <div class="item">item2</div>
  46.         <div class="item">item3</div>
  47.         <div class="item">item4</div>
  48.         <div class="item">item5</div>
  49.         <div class="item">item6</div>
  50.         <div class="item">item7</div>
  51.         <div class="item">item8</div>
  52.         <div class="item">item9</div>
  53.     </div>
  54. </body>
  55. </html>

2、垂直水平居中
  1.         .container{
  2.             /* place-items: 垂直方向 水平方向; */
  3.             /* 垂直水平居中 */
  4.             /*place-items: center center;*/
  5.             place-items: center;
  6.         }

3、拉伸效果
  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>项目在网格单元中的对齐方式</title>
  7.     <style>
  8.         .container{
  9.             border: 1px solid #000;
  10.             padding: 0.5em;
  11.             /* grid布局 */
  12.             display: grid;
  13.             /* 轨道宽度 */
  14.             grid-template-columns: repeat(3,1fr);
  15.             /* 轨道高度 */
  16.             grid-template-rows: repeat(2,5em);
  17.             /* 隐式轨道高度 */
  18.             grid-auto-rows: 5em;
  19.             /* 轨道间隙 */
  20.             gap: 0.5em;
  22.         }
  23.         .container> .item{
  24.             background-color: lightcyan;
  25.             border: 1px solid#000;
  26.             padding: 0.5em;
  27.         }
  28.         /* 项目在网格单元中存在剩余空间，对齐才有必要且有意义 */
  29.         .container> .item{
  30.             /* width: 5em;
  31.             height: 2em; */
  32.         }
  33.         /* 所有项目在网格单元中的对齐方式 */
  34.         .container {
  35.             /* place-items: 垂直方向 水平方向; */
  36.             place-items: normal center;
  37.             place-items: auto center;
  38.             /* 拉伸，取消固定尺寸可以看到拉升效果 */
  39.             place-items:stretch;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="container">
  46.         <div class="item">item1</div>
  47.         <div class="item">item2</div>
  48.         <div class="item">item3</div>
  49.         <div class="item">item4</div>
  50.         <div class="item">item5</div>
  51.         <div class="item">item6</div>
  52.         <div class="item">item7</div>
  53.         <div class="item">item8</div>
  54.         <div class="item">item9</div>
  55.     </div>
  56. </body>
  57. </html>

某个项目在网格单元中的对齐方式

1、水平垂直居中
  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>项目在网格单元中的对齐方式</title>
  7.     <style>
  8.         .container{
  9.             border: 1px solid #000;
  10.             padding: 0.5em;
  11.             /* grid布局 */
  12.             display: grid;
  13.             /* 轨道宽度 */
  14.             grid-template-columns: repeat(3,1fr);
  15.             /* 轨道高度 */
  16.             grid-template-rows: repeat(2,5em);
  17.             /* 隐式轨道高度 */
  18.             grid-auto-rows: 5em;
  19.             /* 轨道间隙 */
  20.             gap: 0.5em;
  22.         }
  23.         .container> .item{
  24.             background-color: lightcyan;
  25.             border: 1px solid#000;
  26.             padding: 0.5em;
  27.         }
  28.         /* 项目在网格单元中存在剩余空间，对齐才有必要且有意义 */
  29.         .container> .item{
  30.             width: 5em;
  31.             height: 2em;
  32.         }
  33.         /* 所有某个项目在网格单元中的对齐方式 */
  34.         .container> .item:nth-of-type(5){
  35.             background-color: yellow;
  36.             /* place-self: center center; */
  37.             place-self: center;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="container">
  43.         <div class="item">item1</div>
  44.         <div class="item">item2</div>
  45.         <div class="item">item3</div>
  46.         <div class="item">item4</div>
  47.         <div class="item">item5</div>
  48.         <div class="item">item6</div>
  49.         <div class="item">item7</div>
  50.         <div class="item">item8</div>
  51.         <div class="item">item9</div>
  52.     </div>
  53. </body>
  54. </html>

2、左下角
  1.         .container> .item:nth-of-type(5){
  2.             background-color: yellow;
  3.             place-self: end start;
  4.         }

3、右下角
  1.         .container> .item:nth-of-type(5){
  2.             background-color: yellow;
  3.             /* place-self: end end; */
  4.             place-self: end;
  5.         }

3、网格单元申明成网格区域，设置项目居中网格区域
  1.         .container> .item:nth-of-type(5){
  2.             background-color: yellow;
  3.             grid-area: span 2/span 2;
  4.             place-self: center;
  5.         }

所有项目在容器中的对齐方式

1、将所有项目作为整体在容器中对其
  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>项目在网格单元中的对齐方式</title>
  7.     <style>
  8.         .container{
  9.             height: 25em;
  10.             border: 1px solid #000;
  11.             padding: 0.5em;
  12.             /* grid布局 */
  13.             display: grid;
  14.             /* 轨道宽度 */
  15.             grid-template-columns: repeat(3,10em);
  16.             /* 轨道高度 */
  17.             grid-template-rows: repeat(2,5em);
  18.             /* 隐式轨道高度 */
  19.             grid-auto-rows: 5em;
  20.             /* 轨道间隙 */
  21.             gap: 0.5em;
  23.         }
  24.         .container> .item{
  25.             background-color: lightcyan;
  26.             border: 1px solid#000;
  27.             padding: 0.5em;
  28.         }
  30.         /* 设置所有项目在容器中的对其方式 place-content: 垂直方向 水平方向; */
  31.         .container{
  32.             /* 默认 */
  33.             place-content: start start;
  34.             /* 靠上居中 */
  35.             place-content: start center;
  36.             /* 水平垂直居中 */
  37.             place-content: center center;
  38.             /* 右下角对其 */
  39.             place-content: end end;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.         <div class="item">item9</div>
  54.     </div>
  55. </body>
  56. </html>

2、将所有项目作为个体在容器中设置对其方式
  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>项目在网格单元中的对齐方式</title>
  7.     <style>
  8.         .container{
  9.             height: 25em;
  10.             border: 1px solid #000;
  11.             padding: 0.5em;
  12.             /* grid布局 */
  13.             display: grid;
  14.             /* 轨道宽度 */
  15.             grid-template-columns: repeat(3,10em);
  16.             /* 轨道高度 */
  17.             grid-template-rows: repeat(2,5em);
  18.             /* 隐式轨道高度 */
  19.             grid-auto-rows: 5em;
  20.             /* 轨道间隙 */
  21.             gap: 0.5em;
  23.         }
  24.         .container> .item{
  25.             background-color: lightcyan;
  26.             border: 1px solid#000;
  27.             padding: 0.5em;
  28.         }
  30.         /* 设置所有项目在容器中的对其方式 place-content: 垂直方向 水平方向; */
  31.         .container{
  32.             /* 水平垂直方向两端对其 */
  33.             place-content: space-between space-between;
  34.             /* 水平垂直方向分散对其 */
  35.             place-content: space-around space-around;
  36.             /* 水平垂直方向平均对其 */
  37.             place-content: space-evenly space-evenly;
  38.             /* 水平方向两端对其 垂直方向平均对其 */
  39.             place-content: space-evenly space-between;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div class="container">
  45.         <div class="item">item1</div>
  46.         <div class="item">item2</div>
  47.         <div class="item">item3</div>
  48.         <div class="item">item4</div>
  49.         <div class="item">item5</div>
  50.         <div class="item">item6</div>
  51.         <div class="item">item7</div>
  52.         <div class="item">item8</div>
  53.         <div class="item">item9</div>
  54.     </div>
  55. </body>
  56. </html>

PHP中文网首页

  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>仿PHP中文网</title>
  7.     <style>
  8.         /* 页面初始化 */
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         /* 去除小黑点 */
  15.         li{
  16.             list-style: none;
  17.         }
  18.         /* 设置a标签字体颜色及去除下划线 */
  19.         a{
  20.             color: #444444;
  21.             text-decoration: none;
  22.         }
  23.         header{
  24.             height: 60px;
  25.             background-color: #000;
  26.             margin-bottom: 30px;
  27.             display: grid;
  28.             grid-template-columns: 140px 1fr;
  29.         }
  30.         header .logo img{
  31.             height: 60px;
  32.             width: 140px;
  34.         }
  35.         header .menus-top .navs-top{
  36.             display: grid;
  37.             grid-template-columns: repeat(9,100px);
  38.             line-height: 60px;
  39.             font-size: 14px;
  40.             margin-left: 40px;
  41.         }
  42.         header .menus-top .navs-top li:first-of-type{
  43.             background-color: rgba(255,255,255,.3);
  44.             width: 70px;
  45.             padding-left: 20px;
  46.         }
  47.         header .menus-top .navs-top a{
  48.             color: #B3B3B3;
  50.         }
  51.         footer{
  52.             height: 165px;
  53.             background-color: #393D49;
  54.             color: #eee;
  55.         }
  56.         .main-top{
  57.             height: 510px;
  58.             width: 1200px;
  59.             margin-bottom: 30px;
  61.             display: grid;
  62.             grid-template-columns: 216px 1fr;
  63.             grid-template-rows: 60px 1fr 120px;
  64.             margin: auto;
  66.             border-radius: 10px;
  67.         }
  68.         /* 左侧导航区 */
  69.         .main-top>nav.menus{
  70.             grid-area: span 3;
  71.             background-color: #2b333b;
  72.             border-radius: 10px 0 0 10px;
  73.             padding-top: 15px;
  74.             box-shadow: 1px 1px 5px #DCDFE2;
  75.         }
  76.         .main-top>nav.menus .navs-left>li{
  77.             height: 60px;
  78.             line-height: 60px;
  79.             cursor: pointer;
  80.             padding-left: 12px;
  81.             display: grid;
  82.             position: relative;
  83.         }
  84.         .main-top>nav.menus .navs-left>li:hover{
  85.             background-color: rgba(255,255,255,.3); 
  86.         }
  87.         .main-top>nav.menus .navs-left>li span{
  88.             position: absolute;
  89.             padding-right: 20px;
  90.             font-size: 20px;
  91.             right: 0;
  92.         }
  93.         .main-top>nav.menus .navs-left>li a{
  94.             color:  rgba(255,255,255,.6);
  95.             padding: 0 15px;
  96.             font-size: 16px;
  97.         }
  100.         /* 顶部导航区 */
  101.         .main-top>ul.navs {
  102.             background-color:#fff;
  103.             display: grid;
  104.             grid-template-columns: repeat(7,83px) 1fr;
  105.             place-items: center;
  106.             border-radius: 0 10px 0 0;
  107.             box-shadow: 1px 1px 5px#DCDFE2;
  108.             font-size: 14px;
  109.             gap: 0 10px;
  110.             padding-left: 10px;
  111.         }
  112.         /* 顶部导航区搜索框 */
  113.         .main-top>ul.navs>li:last-of-type {
  114.             place-self: center start;
  115.             padding-left: 50px;
  116.         }
  117.         .main-top>ul.navs>li a .hong{
  118.             background-color: #FF5722;
  119.             color: #fff;
  120.             border-radius: 3px;
  121.             padding: 0 5px;
  122.             font-size: 12px;
  123.         }
  124.         .main-top>ul.navs>li a .hui{
  125.             background-color: #2F4056;
  126.             color: #fff;
  127.             border-radius: 3px;
  128.             padding: 0 5px;
  129.             font-size: 12px;
  130.         }
  131.         .main-top>ul.navs>li a .huang{
  132.             background-color: #FFB800;
  133.             color: #fff;
  134.             border-radius: 3px;
  135.             padding: 0 5px;
  136.             font-size: 12px;
  137.         }
  138.         .main-top>ul.navs>li input{
  139.             width: 260px;
  140.             height: 40px;
  141.             border: none;
  142.             background-color: #F1F0F0;
  143.             padding: 10px;
  144.         }
  145.         /* 轮播图 */
  146.         .main-top .slider{
  147.             background-image: url('https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg');
  148.         }
  150.         /* 推荐课程 */
  151.         .main-top>ul.course {
  152.             display: grid;
  153.             grid-template-columns: repeat(4,1fr);
  154.             padding: 10px;
  155.             gap: 10px;
  156.             border-radius: 0 0 10px 0;
  157.             box-shadow: 1px 1px 5px#DCDFE2;
  158.         }
  159.         .main-top>ul.course>* {
  160.             cursor: pointer;
  162.         }
  163.         .main-top>ul.course img{
  164.             border-radius: 10px;
  165.             width: 236px;
  166.             height: 90px;
  167.         }
  168.         /* 广告图片 */
  169.         .gg_img {
  171.             margin: 15px auto;
  172.             display: grid;
  173.             width: 1200px;
  175.             cursor: pointer;
  176.         }
  177.         .gg_img>a>img{
  178.             border-radius: 10px;
  179.         }
  183.         /* 课程列表区 */
  184.         .mian-courses {
  185.             width: 1200px;
  186.             height: 646px;
  188.             padding: 15px;
  189.             background-color: #FFFFFF;
  190.             margin: 30px auto;
  191.             display: grid;
  192.             grid-template-rows: 50px 1fr;
  194.             border-radius: 10px;
  195.             box-shadow: 1px 1px 5px#DCDFE2;
  196.         }
  197.         .mian-courses h3{
  198.             color: #444444;
  199.             text-align: center;
  200.         }
  201.         .mian-courses .course-list {
  202.             display: grid;
  203.             grid-template-columns: repeat(5,1fr);
  204.             grid-template-rows: repeat(3,1fr);
  205.             gap: 20px;
  207.         }
  208.         .mian-courses .course-list>* {
  209.             border-radius: 10px;
  210.             /* box-shadow: 1px 1px 5px#DCDFE2; */
  211.         }
  212.         .mian-courses .course-list img{
  213.             border-radius: 10px;
  214.             box-shadow: 1px 1px 5px#DCDFE2;
  215.             width: 100%;
  216.         }
  217.         .mian-courses .course-list>li:first-of-type{
  218.             grid-area: span 2;
  219.         }
  220.     </style>
  221. </head>
  222. <body>
  223.     <header class="top">
  224.         <div class="logo"><img src="https://www.php.cn/static/images/logo.png" alt=""></div>
  225.         <nav class="menus-top">
  226.             <ul class="navs-top">
  227.                 <li><a href="">首页</a></li>
  228.                 <li><a href="">视频教程</a></li>
  229.                 <li><a href="">入门教程</a></li>
  230.                 <li><a href="">社区问答</a></li>
  231.                 <li><a href="">技术文章</a></li>
  232.                 <li><a href="">资源下载</a></li>
  233.                 <li><a href="">编程词典</a></li>
  234.                 <li><a href="">工具下载</a></li>
  235.                 <li><a href="">PHP培训</a></li>
  236.             </ul>
  237.         </nav>
  238.     </header>
  239.     <div class="main-top">
  240.         <!-- 左边菜单 -->
  241.         <nav class="menus">
  242.             <ul class="navs-left">
  243.                 <li><a href="">php开发<span>&gt</span></a></li>
  244.                 <li><a href="">前端开发<span>&gt</span></a></li>
  245.                 <li><a href="">服务端开发<span>&gt</span></a></li>
  246.                 <li><a href="">移动开发<span>&gt</span></a></li>
  247.                 <li><a href="">数据库<span>&gt</span></a></li>
  248.                 <li><a href="">服务器运维&下载<span>&gt</span></a></li>
  249.                 <li><a href="">在线工具箱<span>&gt</span></a></li>
  250.                 <li><a href="">常用类库<span>&gt</span></a></li>
  251.             </ul>
  252.         </nav>
  253.         <!-- 顶部菜单 -->
  254.         <ul class="navs">
  255.             <li><a href="">PHP头条<span class="hong">新</span></a></li>
  256.             <li><a href="">独孤九贱</a></li>
  257.             <li><a href="">学习路线<span class="hui">新</span></a></li>
  258.             <li><a href="">在线工具</a></li>
  259.             <li><a href="">趣味课堂<span class="huang">新</span></a></li>
  260.             <li><a href="">社区问答</a></li>
  261.             <li><a href="">课程直播</a></li>
  262.             <li><input type="text" placeholder="输入关键词搜索"></li>
  263.         </ul>
  264.         <div class="slider"></div>
  265.         <!-- 底部推荐课程 -->
  266.         <ul class="course">
  267.             <li><a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a></li>
  268.             <li><a href=""><img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt=""></a></li>
  269.             <li><a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a></li>
  270.             <li><a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a></li>
  271.         </ul>
  272.     </div>
  273.     <!-- 广告 -->
  274.     <div class="gg_img">
  275.         <a href="https://www.php.cn/k.html"  target="view_window"><img src="https://img.php.cn/upload/article/000/000/001/5fb478ce65c09239.jpg" alt=""></a>
  276.     </div>
  277.     <!-- 课程列表区 -->
  278.     <div class="mian-courses">
  279.         <h3>&lt;\&gt;php入门精品课程&lt;\&gt;</h3>
  280.         <ul class="course-list">
  281.             <li><a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a></li>
  282.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  283.             <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a></li>
  284.             <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg" alt=""></a></li>
  285.             <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""></a></li>
  286.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg" alt=""></a></li>
  287.             <li><a href=""><img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg" alt=""></a></li>
  288.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg" alt=""></a></li>
  289.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt=""></a></li>
  290.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg" alt=""></a></li>
  291.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt=""></a></li>
  292.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg" alt=""></a></li>
  293.             <li><a href=""><img src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg" alt=""></a></li>
  294.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg" alt=""></a></li>
  295.         </ul>
  296.     </div>
  297.     <div class="mian-courses">
  298.         <h3>&lt;\&gt;php进阶学习路径&lt;\&gt;</h3>
  299.         <ul class="course-list">
  300.             <li><a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a></li>
  301.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  302.             <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a></li>
  303.             <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg" alt=""></a></li>
  304.             <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""></a></li>
  305.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg" alt=""></a></li>
  306.             <li><a href=""><img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg" alt=""></a></li>
  307.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg" alt=""></a></li>
  308.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt=""></a></li>
  309.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg" alt=""></a></li>
  310.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt=""></a></li>
  311.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg" alt=""></a></li>
  312.             <li><a href=""><img src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg" alt=""></a></li>
  313.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg" alt=""></a></li>
  314.         </ul>
  315.     </div>
  316.     <footer>页脚</footer>
  317. </body>
  318. </html>

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

  1. 使用媒体查询:媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。用法：@media 媒体类型 and (媒体特性) {样式}
    2.grid媒体查询主要通过auto-fit属性自动填充来实现类似媒体查询功能

作业内容：

  1. 将项目在网格单元和容器中对齐的相关属性全部实例演示;
  2. 快速实现php.cn首页主要组件的布局，并理解为什么？
  3. 理解grid的媒体查询与专业的媒体查询有什么区别？
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post