search

博客列表 >grid对齐属性|grid仿写php中文网局部|grid媒体查询

grid对齐属性|grid仿写php中文网局部|grid媒体查询

幸福敲门的博客
幸福敲门的博客原创
2020年12月28日 10:42:45727浏览

一、plce-sele: 某一个项目在网络单元中的对齐方式

序号 属性 说明
1 start 起始位置
2 end 结束位置
3 center 居中对齐
4 stretch 拉伸
5 space-around 在每个网格项之间放置一个均匀的空间，两端放置一半的空间
6 space-between 在每个网格项之间放置一个均匀的空间，两端没有空间
7 space-evenly 在每个网格项目之间放置一个均匀的空间，两端放置一个均匀的空间

实例：在grid三行四列容器中的对齐方式

  1. <!DOCTYPE  html>
  2. <html  lang="en">
  3. <head>
  4.      <meta   charset="utf-8">
  5.      <meta   name="viewport" content="width=divice-width,initial-scale=1.0">
  6.      <title>plce-sele对齐方式演示</title>
  7.        <style>
  8.          .container{
  9.             height: 40em;
  10.             width:50em;
  11.             border: 2px solid #000;
  12.             margin: auto;
  13.             display: grid;
  14.             grid-template-columns: repeat(4,10em);
  15.             grid-template-rows: repeat(3,10em);
  16.             gap: 0.5em;
  17.         /* 所有项目挤到容器中间 */ 
  18.         /*  place-content:center center; */ 
  19.         /* 所有项目对齐到右下角 */
  20.         /* place-content:end end; */
  21.         /* 分布均匀的空间，左右两端没有空间，两个值都一样可以只写一个 */ 
  22.          /*  place-content:space-between space-between; */
  23.          /* 分布均匀的空间，左右两端放置一半的空间*/
  24.         /* / place-content: space-around space-between;*/
  25.         }
  26.         .container>.item{
  27.             width:10em;
  28.             height: 10em;
  29.             background-color:red;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.      <div  class="container">
  35.      <div  class="item"></div>
  36.      <div  class="item"></div>
  37.      <div  class="item"></div>
  38.      <div  class="item"></div>
  39.      <div  class="item"></div>
  40.      <div  class="item"></div>
  41.      <div  class="item"></div>
  42.      <div  class="item"></div>
  43.      <div  class="item"></div>
  44.      <div  class="item"></div>
  45.      <div  class="item"></div>
  46.      <div  class="item"></div>
  47.     </div>
  48. </body>
  49. </html>

图示：
grid3行四列图示

所有项目挤到容器中间在.container加入代码

  1. place-content:center center;

图示：

所有项目对齐到右下角 在.container加入代码

  1.   place-content:end end

图示：

二、设置容器中的“所有项目”在网格单元中的对齐方式

place-items: 垂直方向 水平方向;place-items是align-items 与 justify-items的缩写，一个设置垂直方向，一个是设置水平方向的对齐方式。
place-items: start center
当第二个值与第一个值相同时,可以省第二个值
place-items: center;

place-items值 说明
place-items: initial; place-items: auto; place-items: unset; 默认值，垂直居上，水平居左
place-items: stretch 拉伸（取消项目固定尺寸，生效
place-items: center 垂直水平都居中
place-items: inherit 继承初始值，垂直居上，水平居左
place-items: start auto 垂直居上，水平居左
place-items: start norma 垂直居上，水平正常居左（取消项目固定尺寸则拉伸）
place-items: start end 垂直居上，水平居右
place-items: end start 垂直居下，水平居左

以上均提供了完整的代码这些只需要在.container中去改变相关的值就可以

三、place-self 某个项目在单元格中的对齐

实例：

  1. <!DOCTYPE  html>
  2. <html  lang="en">
  3. <head>
  4.      <meta   charset="utf-8">
  5.      <meta   name="viewport" content="width=divice-width,initial-scale=1.0">
  6.      <title>space-self在网络单元中的对齐方式</title>
  7.      <style>
  8.         .container{
  9.             height: 40em;
  10.             width:50em;
  11.             border: 2px solid #000;
  12.             margin: auto;
  13.             display: grid;
  14.             grid-template-columns: repeat(4,10em);
  15.             grid-template-rows: repeat(3,10em);
  16.             gap: 0.5em;
  18.         }
  19.      .container>.item{  
  20.            width:10em;
  21.            height: 10em;
  22.            background-color:red;
  23.        }
  24.    /*设置第10个item到所在网格的中间*/
  25.         .container>.item:nth-of-type(10){
  26.          place-self:center ;
  27.          background-color: Black;
  28.       }
  29.   </style>
  30. </head>
  31.    <body>
  32.      <div  class="container">
  33.      <div  class="item"></div>
  34.      <div  class="item"></div>
  35.      <div  class="item"></div>
  36.      <div  class="item"></div>
  37.      <div  class="item"></div>
  38.      <div  class="item"></div>
  39.      <div  class="item"></div>
  40.      <div  class="item"></div>
  41.      <div  class="item"></div>
  42.      <div  class="item"></div>
  43.      <div  class="item"></div>
  44.      <div  class="item"></div>
  45.     </div>
  46. </body>
  47. </html>

图示：
space-self对齐

2.place-self 某个项目在 网格区域 中的对齐

  1. place-content 网格单元在容器中的对齐
    4.网格单元作为整体在容器中的对齐
    以上均提供了完整的代码这些只需要在.container中去改变相关的值就可以

四、grid的媒体查询

.grid的媒体查询，根据grid容器的宽度，除以最小最大值之间的项目宽度，获得auto-fit的值，垂直方向绘制auto-fit个列宽的网格，水平方向也类似绘制，空轨折叠，不占据容器空间。
.专业的媒体查询，不是依据某元素的父级容器宽度计算，以屏幕宽度查询

五、grid布局仿写php中文网首页主要组件（部分）

css代码部分

  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4.     box-sizing: border-box;
  5. }
  6. body{
  7.     background-color: #F0F2F4;
  8. }
  9. a{
  10.     text-decoration: none;
  11.     color:#B3B3B3;
  12. }
  13. li{
  14.     list-style: none;
  15. }
  16. header{
  17.     height: 60px;
  18.     background-color: #000000;
  19.     display: grid;
  20.     grid-template-columns: repeat(11,1fr);
  21.     place-items: center ;
  22. }
  24. footer {
  25.             height: 160px;
  26.             color: #eee;
  27.             background-color: #444;
  28.         }
  30. header a:first-of-type{
  31.     background:linear-gradient(to top, #DE3326 ,#EB605A);
  32.     padding: .5em;
  33.     border-radius: 48%;
  34.     color:white;
  35. }
  36. main > .nav{
  37.     margin:2em auto;
  38.     width: 1200px;
  39.     display: grid;
  40.     grid-template-columns: 220px 980px;
  41.     grid-template-rows: 60px 328px 120px;
  42. }
  43. main > .nav > .navlift{
  44.     grid-area: 1 / 1 / span 3 / span 1;
  45.     display: grid;
  46.     grid-template-rows: repeat(8,1fr);
  47.     place-items: center start ;
  48.     padding-left: 2em;
  49.     background-color: #2B333B;
  50.     color:#AAADB0;
  51.     border-radius: .5em 0 0 .5em;
  52. }
  54. main > .nav > .navtop{
  55.     grid-area: 1 / 2 / sapn 1 / span 1;
  56.     display: grid;
  57.     grid-template-columns: repeat(9,1fr);
  58.     padding-left: 1em;
  59.     line-height: 80px;
  60.     background-color: #FFFFFF;
  61.     font-size: 1.1rem;
  62. }
  64. main > .nav > .navtop > li >input{
  65.     grid-area: span 2;
  66. }
  67. main > .nav > .main_banner{
  68.     grid-area: 2 / 2 ;
  69. }
  70. main > .nav > .main_banner >img{
  71.     width:980px;
  72.     height: 328px;
  73. }
  74. main > .nav > .navbottom{
  75.     grid-area: 3 /2 ;
  76.     display: grid;
  77.     grid-template-columns: repeat(4,1fr);
  78.     place-items: center;
  79. }
  80. main > .nav > .navbottom img{
  81.     border-radius:.5em;
  82. }
  83.   /* ------------------------------ */
  84. main > .phprmjpk{
  85.     background-color: #fff;
  86.     width:1200px;
  87.     padding: 15px;
  88.     margin:30px auto;
  89. }
  90. main > .phprmjpk >h3{
  91.     text-align: center;
  92. }
  93. main > .phprmjpk > ul{
  94.     display: grid;
  95.     grid-template-columns: repeat(5,1fr);
  96.     grid-template-rows: repeat(3,1fr);
  97.     gap: 20px;
  98.     height: 560px;
  99.     margin:10px auto;
  100. }
  101. main > .phprmjpk > ul >*{
  102.     background-color: lightcyan;
  103.     border-radius: 10px;
  104. }
  105. main > .phprmjpk> ul > li>img{
  106.     width:100%;
  107.     height: 100%;
  108.     border-radius:20px;
  109. }
  110. main > .phprmjpk > ul >:first-of-type{
  111.     grid-area: span 2;
  112. }
  113.   /* ------------------------------ */
  114.   main > .phpjjxx{
  115.     background-color: #fff;
  116.     width:1200px;
  117.     padding: 15px;
  118.     margin:30px auto;
  119. }
  120. main > .phpjjxx >h3{
  121.     text-align: center;
  122. }
  123. main > .phpjjxx > ul{
  124.     display: grid;
  125.     grid-template-columns: repeat(5,1fr);
  126.     grid-template-rows: repeat(3,1fr);
  127.     gap: 20px;
  128.     height: 560px;
  129.     margin:10px auto;
  130. }
  131. main > .phpjjxx > ul >*{
  132.     background-color: lightcyan;
  133.     border-radius: 10px;
  134. }
  135. main > .phpjjxx> ul > li>img{
  136.     width:100%;
  137.     height: 100%;
  138.     border-radius:20px;
  139. }
  140. main > .phpjjxx > ul >:first-of-type{
  141.     grid-area: span 2;
  142. }

网页代码部分

  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.cn首页的部分组件</title>
  7.     <link rel="stylesheet" href="copyphp.css">
  8. </head>
  9. <body>
  10.     <header>
  11.         <a href="">php中文网</a>
  12.         <a href="https://www.php.cn/">
  13.             <p>首页</p>
  14.         </a>
  15.         <a href="https://www.php.cn/course.html">
  16.             <p>视频教程</p>
  17.         </a>
  18.         <a href="https://www.php.cn/course/type/3.html">
  19.             <p>入门教程</p>
  20.         </a>
  21.         <a href="https://www.php.cn/wenda.html">
  22.             <p>社区问答</p>
  23.         </a>
  24.         <a href="https://www.php.cn/article.html">
  25.             <p>技术文章</p>
  26.         </a>
  27.         <a href="https://www.php.cn/xiazai/">
  28.             <p>资源下载</p>
  29.         </a>
  30.         <a href="https://www.php.cn/dic.html">
  31.             <p>编程词典</p>
  32.         </a>
  33.         <a href="https://www.php.cn/xiazai/gongju">
  34.             <p>工具下载</p>
  35.         </a>
  36.         <a href="https://www.php.cn/k.html">
  37.             <p>php培训</p>
  38.         </a>
  39.     </header>
  40.     <main>
  41.         <div class="nav">
  42.             <ul class="navlift">
  43.                 <li>php开发</li>
  44.                 <li>前端开发</li>
  45.                 <li>服务端开发</li>
  46.                 <li>移动开发</li>
  47.                 <li>数据库</li>
  48.                 <li>服务器运维&下载</li>
  49.                 <li>在线工具箱</li>
  50.                 <li>常用类库</li>
  51.             </ul>
  52.             <ul class="navtop">
  53.                 <li>php头条</li>
  54.                 <li>独狐九贱</li>
  55.                 <li>学习路线</li>
  56.                 <li>在线工具</li>
  57.                 <li>趣味课堂</li>
  58.                 <li>社区问答</li>
  59.                 <li>课程直播</li>
  60.                 <li><input type="text" value="输入关键词搜索"></li>
  61.             </ul>
  62.             <div class="main_banner"><img src="img/1.jpg" alt=""></div>
  63.             <ul class="navbottom">
  64.                 <li><img src="img/01.jpg" alt=""> </li>
  65.                 <li><img src="img/02.jpg" alt=""></li>
  66.                 <li><img src="img/03.jpg" alt=""></li>
  67.                 <li><img src="img/04.jpg" alt=""></li>
  68.             </ul>
  69.         </div>
  71.            <!-- 课程列表区 -->
  72.         <div class="phprmjpk">
  73.             <h3>&lt;\&gt;php入门精品课程&lt;\&gt;</h3>
  74.             <ul class="class_list">
  75.                 <li>
  76.                     <img src="img/index_learn_first.jpg"alt="" ></img>
  77.                 </li>
  78.                 <li>
  79.                     <img src="img/5b63c72c61569244.png"alt="" ></img>
  80.                 </li>
  81.                 <li>
  82.                     <img src="img/5aa23f0ded921649.jpg" alt="" ></img>
  83.                 </li>
  84.                 <li>
  85.                     <img src="img/5ab346fc62ce4221.jpg" alt="" ></img>
  86.                 </li>
  87.                 <li>
  88.                     <img src="img/5acc118f11d6b969.jpg" alt="" ></img>
  89.                 </li>
  90.                 <li>
  91.                     <img src="img/5d1c6e0d2b744633.jpg" alt="" ></img>
  92.                 </li>
  93.                 <li>
  94.                     <img src="img/5a9fb97057b15707.jpeg" alt=""></img>
  95.                 </li>
  96.                 <li>
  97.                     <img src="img/5d24019911a24370.jpg" alt=""></img>
  98.                 </li>
  99.                 <li>
  100.                     <img src="img/5a699f1b2da2b398.jpg" alt=""></img>
  101.                 </li>
  102.                 <li>
  103.                     <img src="img/5cecd27a4348b582.jpg" alt=""></img>
  104.                 </li>
  105.                 <li>
  106.                     <img src="img/5d1c6dfc9eb09885.jpg" alt=""></img>
  107.                 </li>
  108.                 <li>
  109.                     <img src="img/5a13c87351613730.jpg" alt=""></img>
  110.                 </li>
  111.                 <li>
  112.                     <img src="img/5b19ef2990649817.jpg"alt=""></img>
  113.                 </li>
  114.                 <li>
  115.                     <img src="img/5d240300be85b731.jpg"alt=""></img>
  116.                 </li>
  117.             </ul>
  118.         </div> 
  119.            <!-- 课程列表区 -->
  120.         <div class="phpjjxx">
  121.             <h3>&lt;\&gt;php进阶学习路径&lt;\&gt;</h3>
  122.             <ul class="class_list">
  123.                 <li>
  124.                     <img src="img/index_learn_middel.jpg"></img>
  125.                 </li>
  126.                 <li>
  127.                     <img src="img/5d1c6e1577037989.jpg"></img>
  128.                 </li>
  129.                 <li>
  130.                     <img src="img/5d24010108e3d268.jpg"></img>
  131.                 </li>
  132.                 <li>
  133.                     <img src="img/5a372b552a2c4233.jpg"></img>
  134.                 </li>
  135.                 <li>
  136.                     <img src="img/5a3728258bf9f213.jpg"></img>
  137.                 </li>
  138.                 <li>
  139.                     <img src="img/5a373991d9cd9819.jpg"></img>
  140.                 </li>
  141.                 <li>
  142.                     <img src="img/5a530c9c6c775990.jpg"></img>
  143.                 </li>
  144.                 <li>
  145.                     <img src="img/5a5322a085219472.jpg"></img>
  146.                 </li>
  147.                 <li>
  148.                     <img src="img/5a53090b27254106.jpg"></img>
  149.                 </li>
  150.                 <li>
  151.                     <img src="img/5d22b615e56bf130.jpg"></img>
  152.                 </li>
  153.                 <li>
  154.                     <img src="img/5d242759adb88970.jpg"></img>
  155.                 </li>
  156.                 <li>
  157.                     <img src="img/5d2426f409839992.jpg"></img>
  158.                 </li>
  159.                 <li>
  160.                     <img src="img/5d24230536122573.jpg"></img>
  161.                 </li>
  162.                 <li>
  163.                     <img src="img/5d2402695ce37351.jpg"></img>
  164.                 </li>
  165.             </ul>
  166.         </div>  
  168.     </main>
  169.     <footer></footer>
  170. </body>
  171. </html>

图示：
仿php中文网头部
仿php中文网底部

上一条：1224 grid网格布局及属性下一条：flex容器与项目的常用属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多