search

博客列表 >快速实现PHP首页(组件与布局) 与 grid媒体查询和专业媒体查询的区别

快速实现PHP首页(组件与布局) 与 grid媒体查询和专业媒体查询的区别

lus菜
lus菜原创
2020年12月27日 15:46:35578浏览

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

网格单元:

  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. 专业媒体查询:由媒体查询类型和一个或多个检查媒体特性的条件表达式组成。
上一条：gird 属性与属性值应用下一条：flex 属性 和属性值的应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多