简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >《grid实战PHP中文网首页》20201225

《grid实战PHP中文网首页》20201225

杨凡的博客
杨凡的博客原创
2020年12月30日 23:22:22663浏览

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的媒体查询与专业的媒体查询有什么区别？
上一条：箭头函数-rest剩余参数|dom元素|classList与dataset对象下一条：seo排名工具_网站排名优化常用工具
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多