Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 快速实现PHP首页(组件与布局) 与 grid媒体查询和专业媒体查询的区别
Blogger Information
Blog 46
fans 0
comment 0
visits 39604
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
快速实现PHP首页(组件与布局) 与 grid媒体查询和专业媒体查询的区别
lus菜
Original
584 people have browsed it

项目在网格单元与容器中对齐相关属性:

网格单元:

  1.         place-items: 所有项目在网格单元中的对齐方式, place-items: 垂直方向 水平方向;
  2.         place-sele: 某一个项目在网格单元中的对齐方式
  3.         只有项目在网格单元中存在剩余空间的时候,对齐才有必要且意义

样式代码:

  1. <style>
  2.       .container {
  3.         border: 1px solid #000;
  4.         padding: 0.5em;
  5.         display: grid;
  6.         //轨道宽度
  7.         grid-template-columns: repeat(3, 1fr);
  8.         //轨道高度
  9.         grid-template-rows: repeat(2, 5em);
  10.         //隐式轨道高度
  11.         grid-auto-rows: 5em;
  12.         //间距
  13.         gap: 0.5em;
  14.       }
  15.       .container > .item {
  16.         background-color: lightblue;
  17.         border: 1px solid #000;
  18.         padding: 0.5em;
  19.       }
  20.       //默认:项目在网格单元中是拉伸的
  21.       .container > .item {
  22.         width: 5em;
  23.         height: 2em;
  24.       }
  25.       //设置容器中的"所有项目"在网格单元中的对齐方式
  26.       .container {
  27.         //垂直居上,水平居中
  28.         place-items: start center;
  29.         //垂直水平都居中
  30.         place-items: center center;
  31.         //当第二个值与第一个值相同时,可以省第二个值
  32.         place-items: center;
  34.         //normal
  35.         place-items: normal center;
  36.         //normal当成auto的同义词
  37.         place-items: auto center;
  38.       //设置容器中的"某一项目"在网格单元中的对齐方式:这个属性必须用在项目上: place-self
  39.       .container>.item:nth-of-type(5){
  40.           background-color: yellow;
  41.           place-self: center center;
  42.           //end垂直 start水平向左
  43.           place-self: end start;
  44.           //省去第二个start
  45.           place-self: end;
  46.           //与下面的等效
  47.           place-self: end end;
  48.       }
  49.      //网格单元有二种表现形式: 单元格,网络区域(多个单元格组成)
  50.       .container>.item:nth-of-type(5){
  51.           grid-area: span 2 / span 2 ;
  52.           place-self: center;
  53.       }
  54.     </style>
  55. <body>
  56.     <div class="container">
  57.       <div class="item">wss1</div>
  58.       <div class="item">wss2</div>
  59.       <div class="item">wss3</div>
  60.       <div class="item">wss4</div>
  61.       <div class="item">wss5</div>
  62.       <div class="item">wss6</div>
  63.       <div class="item">wss7</div>
  64.       <div class="item">wss8</div>
  65.       <div class="item">wss9</div>
  66.     </div>
  67.   </body>

效果示例:

网格容器:

  1.      place-content: 垂直方向 水平方向; 只有所有项目在容器中存在剩余空间时对齐才有必要且有意义

样式代码:

  1.  <style>
  2.       .container {
  3.         height: 25em;
  4.         border: 1px solid #000;
  5.         padding: 0.5em;
  6.         display: grid;
  7.         grid-template-columns: repeat(3, 10em);
  8.         grid-template-rows: repeat(2, 5em);
  9.         grid-auto-rows: 5em;
  10.         gap: 0.5em;
  11.        //将所有项目做为一个整体在容器中对齐
  12.         place-content: start center;
  13.         place-content: center center;
  14.         place-content: center;
  15.        //将所有项目打散成独立个体在容器中设置对齐方式
  16.         //两端对齐
  17.         place-content: space-between;
  18.         //垂直分散对齐
  19.         place-content: space-around space-evenly;
  20.       }
  21.       .container > .item {
  22.         background-color: lightblue;
  23.         border: 1px solid #000;
  24.         padding: 0.5em;
  25.       }
  26.     </style>
  27. <body>
  28.     <div class="container">
  29.       <div class="item">wou1</div>
  30.       <div class="item">wou2</div>
  31.       <div class="item">wou3</div>
  32.       <div class="item">wou4</div>
  33.       <div class="item">wou5</div>
  34.       <div class="item">wou6</div>
  35.       <div class="item">wou7</div>
  36.       <div class="item">wou8</div>
  37.       <div class="item">wou9</div>
  38.     </div>
  39.   </body>

效果示例:

快速实现php组件布局:

基本架构：

  1. 页眉、左边菜单组、头部菜单条搜索框、中间轮播图、底下课程推荐、精品课程列表推荐区、页脚、

样式代码:

  1. <title>仿php.cn首页的部分组件</title>
  2.     <style>
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.         box-sizing: border-box;
  7.       }
  8.       li {
  9.         list-style: none;
  10.       }
  11.       a {
  12.         color: #444444;
  13.         text-decoration: none;
  14.       }
  15.       .header {
  16.         height: 60px;
  17.         background-color: #cccccc;
  18.         margin-bottom: 30px;
  19.       }
  20.       .header>.zww, .a{
  21.         font-size: 2em;
  22.       }
  23.       .header .souye{
  24.         position: absolute;
  25.         left: 160px;
  26.         top: 0;
  27.         padding: 0;
  28.         background: none;
  29.       }
  30.       footer {
  31.         height: 160px;
  32.         color: #eee;
  33.         background-color: #444;
  34.       }
  35.       .main-top {
  36.         height: 510px;
  37.         width: 1200px;
  38.         margin-bottom: 30px;
  39.         display: grid;
  40.         grid-template-columns: 216px 1fr;
  41.         grid-template-rows: 60px 1fr 120px;
  42.         margin: auto;
  43.       }
  44.       //左侧导航区
  45.       .main-top >nav.menus {
  46.         grid-area: span 3;
  47.         background-color: lightgreen;
  48.         border-radius: 10px 0 0 10px;
  49.       }
  50.       //顶部的导航区
  51.       .main-top>ul.navs {
  52.         background-color: lightcoral;
  53.         display: grid;
  54.         grid-template-columns: repeat(8, 83px) 1fr;
  55.         place-items: center;
  56.         border-radius: 0 10px 0 0;
  57.       }
  58.       .main-top>ul.navs>li:last-of-type {
  59.         place-self: center start;
  60.         padding-left: 30px;
  61.       }
  62.       //轮播图已经自动归位了
  63.       .main-top>ul.course {
  64.         background-color: wheat;
  65.         padding: 10px;
  66.         display: grid;
  67.         grid-template-columns: repeat(4, 1fr);
  68.         gap: 10px;
  69.         border-radius: 0 0 10px 0;
  70.       }
  71.       .main-top .slider{
  72.           background-color: #cccc;
  73.       }
  74.       .main-top>ul.course>* {
  75.         background-color: violet;
  76.         cursor: pointer;
  77.       }
  78.       .main-courses {
  79.         width: 1200px;
  80.         height: 646px;
  81.         padding: 15px;
  82.         background-color: lightskyblue;
  83.         margin: 30px auto;
  84.         display: grid;
  85.         grid-template-rows: 50px 1fr;
  86.         gap: 20px;
  87.         border-radius: 10px;
  88.       }
  89.       .main-courses h3 {
  90.           color: #444444;
  91.           text-align: center;
  92.           margin-bottom: 30px;
  93.       }
  94.       .main-courses .course-list {
  95.         display: grid;
  96.         grid-template-columns: repeat(5, 1fr);
  97.         grid-template-rows: repeat(3, 1fr);
  98.         gap: 20px;
  99.       }
  100.       .main-courses .course-list > * {
  101.         background-color: lightcyan;
  102.         border-radius: 10px;
  103.       }
  104.       .main-courses .course-list>li:first-of-type{
  105.           grid-area: span 2;
  106.       }
  107.     </style>
  108.   </head>
  109.   <body>
  110.     //页眉
  111.     <div class="header">
  112.         <div class="zww">
  113.             <a>php中文网</a>
  114.         </div>
  115.     </div>
  116.     <div class="main-top">
  117.       //侧边菜单
  118.       <nav class="menus">菜单组</nav>
  119.       //顶部菜单
  120.       <ul class="navs">
  121.         <li><a href="">PHP头条</a></li>
  122.         <li><a href="">独孤九剑</a></li>
  123.         <li><a href="">学习路线</a></li>
  124.         <li><a href="">在线工具</a></li>
  125.         <li><a href="">趣味课堂</a></li>
  126.         <li><a href="">社区问答</a></li>
  127.         <li><a href="">课程直播</a></li>
  128.         <li><a href="">课程直播</a></li>
  129.         <li><input type="text" placeholder="输入关键字" /></li>
  130.       </ul>
  131.       <div class="slider">轮播图</div>
  132.       //底部的课程推荐
  133.       <ul class="course">
  134.       <li><a href=""><img src="" alt="图片1" /></a></li>
  135.       <li><a href=""><img src="" alt="图片2" /></a></li>
  136.       <li><a href=""><img src="" alt="图片3" /></a></li>
  137.       <li><a href=""><img src="" alt="图片4" /></a></li>
  138.       </ul>
  139.     </div>
  140.     //课程列表区
  141.     <div class="main-courses">
  142.       <h3>&lt;/&gt;php入门精品课程&lt;/&gt;</h3>
  143.       <ul class="course-list">
  144.         <li><a href=""><img src="" alt="" /></a></li>
  145.         <li><a href=""><img src="" alt="" /></a></li>
  146.         <li><a href=""><img src="" alt="" /></a></li>
  147.         <li><a href=""><img src="" alt="" /></a></li>
  148.         <li><a href=""><img src="" alt="" /></a></li>
  149.         <li><a href=""><img src="" alt="" /></a></li>
  150.         <li><a href=""><img src="" alt="" /></a></li>
  151.         <li><a href=""><img src="" alt="" /></a></li>
  152.         <li><a href=""><img src="" alt="" /></a></li>
  153.         <li><a href=""><img src="" alt="" /></a></li>
  154.         <li><a href=""><img src="" alt="" /></a></li>
  155.         <li><a href=""><img src="" alt="" /></a></li>
  156.         <li><a href=""><img src="" alt="" /></a></li>
  157.         <li><a href=""><img src="" alt="" /></a></li>
  158.       </ul>
  159.     </div>
  160.     <footer>页脚</footer>
  161.   </body>

示例:

理解为什么?

因为这样方便元素转grid网格布局与嵌套

grid媒体查询与专业媒体查询有何区别:

  1. grid媒体查询:根据grid容器的宽度,除以最小最大值之间的项目宽度,是一种模拟的,不能像伪元素一样隐藏,grid媒体查询看上去有个好的响应效果。
  2. 专业媒体查询:由媒体查询类型和一个或多个检查媒体特性的条件表达式组成。
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