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

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

博主信息

博文 49

粉丝 0

访问量 51009

专题推荐

更多>

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

网格单元:

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

样式代码:

<style>
      .container {
        border: 1px solid #000;
        padding: 0.5em;
        display: grid;
        //轨道宽度
        grid-template-columns: repeat(3, 1fr);
        //轨道高度
        grid-template-rows: repeat(2, 5em);
        //隐式轨道高度
        grid-auto-rows: 5em;
        //间距
        gap: 0.5em;
      }
      .container > .item {
        background-color: lightblue;
        border: 1px solid #000;
        padding: 0.5em;
      }
      //默认:项目在网格单元中是拉伸的
      .container > .item {
        width: 5em;
        height: 2em;
      }
      //设置容器中的"所有项目"在网格单元中的对齐方式
      .container {
        //垂直居上,水平居中
        place-items: start center;
        //垂直水平都居中
        place-items: center center;
        //当第二个值与第一个值相同时,可以省第二个值
        place-items: center;
        //normal
        place-items: normal center;
        //normal当成auto的同义词
        place-items: auto center;
      //设置容器中的"某一项目"在网格单元中的对齐方式:这个属性必须用在项目上: place-self
      .container>.item:nth-of-type(5){
          background-color: yellow;
          place-self: center center;
          //end垂直 start水平向左
          place-self: end start;
          //省去第二个start
          place-self: end;
          //与下面的等效
          place-self: end end;
      }
     //网格单元有二种表现形式: 单元格,网络区域(多个单元格组成)
      .container>.item:nth-of-type(5){
          grid-area: span 2 / span 2 ;
          place-self: center;
      }
    </style>
<body>
    <div class="container">
      <div class="item">wss1</div>
      <div class="item">wss2</div>
      <div class="item">wss3</div>
      <div class="item">wss4</div>
      <div class="item">wss5</div>
      <div class="item">wss6</div>
      <div class="item">wss7</div>
      <div class="item">wss8</div>
      <div class="item">wss9</div>
    </div>
  </body>

效果示例:

网格容器:

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

样式代码:

 <style>
      .container {
        height: 25em;
        border: 1px solid #000;
        padding: 0.5em;
        display: grid;
        grid-template-columns: repeat(3, 10em);
        grid-template-rows: repeat(2, 5em);
        grid-auto-rows: 5em;
        gap: 0.5em;
       //将所有项目做为一个整体在容器中对齐
        place-content: start center;
        place-content: center center;
        place-content: center;
       //将所有项目打散成独立个体在容器中设置对齐方式
        //两端对齐
        place-content: space-between;
        //垂直分散对齐
        place-content: space-around space-evenly;
      }
      .container > .item {
        background-color: lightblue;
        border: 1px solid #000;
        padding: 0.5em;
      }
    </style>
<body>
    <div class="container">
      <div class="item">wou1</div>
      <div class="item">wou2</div>
      <div class="item">wou3</div>
      <div class="item">wou4</div>
      <div class="item">wou5</div>
      <div class="item">wou6</div>
      <div class="item">wou7</div>
      <div class="item">wou8</div>
      <div class="item">wou9</div>
    </div>
  </body>

效果示例:

快速实现php组件布局:

基本架构：

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

样式代码:

<title>仿php.cn首页的部分组件</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        list-style: none;
      }
      a {
        color: #444444;
        text-decoration: none;
      }
      .header {
        height: 60px;
        background-color: #cccccc;
        margin-bottom: 30px;
      }
      .header>.zww, .a{
        font-size: 2em;
      }
      .header .souye{
        position: absolute;
        left: 160px;
        top: 0;
        padding: 0;
        background: none;
      }
      footer {
        height: 160px;
        color: #eee;
        background-color: #444;
      }
      .main-top {
        height: 510px;
        width: 1200px;
        margin-bottom: 30px;
        display: grid;
        grid-template-columns: 216px 1fr;
        grid-template-rows: 60px 1fr 120px;
        margin: auto;
      }
      //左侧导航区
      .main-top >nav.menus {
        grid-area: span 3;
        background-color: lightgreen;
        border-radius: 10px 0 0 10px;
      }
      //顶部的导航区
      .main-top>ul.navs {
        background-color: lightcoral;
        display: grid;
        grid-template-columns: repeat(8, 83px) 1fr;
        place-items: center;
        border-radius: 0 10px 0 0;
      }
      .main-top>ul.navs>li:last-of-type {
        place-self: center start;
        padding-left: 30px;
      }
      //轮播图已经自动归位了
      .main-top>ul.course {
        background-color: wheat;
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        border-radius: 0 0 10px 0;
      }
      .main-top .slider{
          background-color: #cccc;
      }
      .main-top>ul.course>* {
        background-color: violet;
        cursor: pointer;
      }
      .main-courses {
        width: 1200px;
        height: 646px;
        padding: 15px;
        background-color: lightskyblue;
        margin: 30px auto;
        display: grid;
        grid-template-rows: 50px 1fr;
        gap: 20px;
        border-radius: 10px;
      }
      .main-courses h3 {
          color: #444444;
          text-align: center;
          margin-bottom: 30px;
      }
      .main-courses .course-list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 20px;
      }
      .main-courses .course-list > * {
        background-color: lightcyan;
        border-radius: 10px;
      }
      .main-courses .course-list>li:first-of-type{
          grid-area: span 2;
      }
    </style>
  </head>
  <body>
    //页眉
    <div class="header">
        <div class="zww">
            <a>php中文网</a>
        </div>
    </div>
    <div class="main-top">
      //侧边菜单
      <nav class="menus">菜单组</nav>
      //顶部菜单
      <ul class="navs">
        <li><a href="">PHP头条</a></li>
        <li><a href="">独孤九剑</a></li>
        <li><a href="">学习路线</a></li>
        <li><a href="">在线工具</a></li>
        <li><a href="">趣味课堂</a></li>
        <li><a href="">社区问答</a></li>
        <li><a href="">课程直播</a></li>
        <li><a href="">课程直播</a></li>
        <li><input type="text" placeholder="输入关键字" /></li>
      </ul>
      <div class="slider">轮播图</div>
      //底部的课程推荐
      <ul class="course">
      <li><a href=""><img src="" alt="图片1" /></a></li>
      <li><a href=""><img src="" alt="图片2" /></a></li>
      <li><a href=""><img src="" alt="图片3" /></a></li>
      <li><a href=""><img src="" alt="图片4" /></a></li>
      </ul>
    </div>
    //课程列表区
    <div class="main-courses">
      <h3>&lt;/&gt;php入门精品课程&lt;/&gt;</h3>
      <ul class="course-list">
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
        <li><a href=""><img src="" alt="" /></a></li>
      </ul>
    </div>
    <footer>页脚</footer>
  </body>

示例:

理解为什么?

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

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

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

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1217 选择器(字体图标、盒模型)示例:

2020-12-17 17:13:53