Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid 网格布局中的项目对齐属性与 gird 快速布局实现php中文网首页部分组件
Blogger Information
Blog 29
fans 1
comment 0
visits 35319
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
grid 网格布局中的项目对齐属性与 gird 快速布局实现php中文网首页部分组件
祥子弟弟
Original
1467 people have browsed it

一、grid 网格布局中的项目对齐属性

提及 grid 网格容器中项目对齐我们首先要知道的是网格单元在容器中的对齐。我们需要知道的是，grid 网格布局时是否设置了网格单元的大小，因为如果没有设置网格单元的大小的话，也就是网格单元自适应，这时候就不会产生剩余空间。

如果没有剩余空间的话，那么网格单元的在容器中的对齐就没有了任何的意意义。

一个有剩余空间的容器如下


当一个容器中有了剩余空间之后才有必要和有去设置对齐方式的意义。

决定网格单元在容器中对齐方式的属性是place-content，这个属性是在容器中定义的。

它决定了网格单元是如何去分配容器的剩余空间的，是按照所有网格单元看成一个整体还是每一个网格单元是一个独立的个体去划分剩余空间的归属。

  1. 所有网格单元看成一个整体
垂直方向 水平方向 解释
start start (默认值)垂直向上，水平向左
start center 垂直向上，水平居中
satrt end 垂直向上，水平向右
center start 垂直居中，水平向左
center center 垂直水平居中
center end 垂直居中，水平向右
end start 垂直向下，水平向左
end center 垂直向下，水平居中
end end 垂直向下，水平向右

等于是将整个容器空间分成了 3*3 的九宫格布局，容器中的所有网格单元看成一个整体，然后 place-content 属性控制这个整体的移动。(如果垂直方向和水平方向的值是一样的，那么就只需要写一个值就行，例如:place-content:center center;等价于 place-content:center;)


2.每个网格单元是一个独立的个体

这个值的定义也是两值，和“1”中的定义方法一样，不过一般都是将它使用单值表示的，双值并不常用

值 解释
space-between (垂直水平方向)两端对齐
space-around (垂直水平方向)分散对齐
space-evenly (垂直水平方向)平均对齐

演示效果：

两端对齐

分散对齐

平均对齐

3.项目在网格单元中的对齐方式

和网格单元在容器中的对齐很是相似，控制项目在网格单元中对齐方式的属性是place-item，这个属性是在容器中定义的。

place-item属性和place-content属性是一样的用法，同样的，项目要设置大小，不然网格单元中没有剩余空间，这样对齐就毫无意义。

蓝色框圈住的是项目大小，红色框圈住的是网格单元大小。

place-item也是单双值表示，单值表示垂直方向和水平方向值一样，双值则分别代表了垂直方向和水平方向的设置。不过它一般也是单值使用居多。

垂直方向 水平方向 解释
start start (默认值)垂直向上，水平向左
start center 垂直向上，水平居中
satrt end 垂直向上，水平向右
center start 垂直居中，水平向左
center center 垂直水平居中
center end 垂直居中，水平向右
end start 垂直向下，水平向左
end center 垂直向下，水平居中
end end 垂直向下，水平向右

这里演示一下项目在网格单元中的居中：

可以看到的是此时所有项目都在网格单元中居中显示了。

  1. 容器中指定项目在单元格中的对齐方式

通过上述解释，我们知道了所有的项目在网格单元中的对齐方式，不过，有的时候我们仅仅只需要其中的某一个或者某几个去选择对齐方式，这时候就引出了控制指定项目在单元格中对齐方式的属性：place-self，这个属性是在项目中定义的。

place-self 属性的值和 place-item 的值是相同的，这里就不一一列举了，仅做个演示示例。
示例，将 item1 项目单个进行居中处理，其余的保持原样。

二、 grid 快速布局示例

  1. 使用 grid 布局完成一个经典的栅格布局组件

栅格组件的效果如下


栅格布局系统分为两步:
第一步先创建一个行;
第二步在行中进行列的划分

具体实现：
html 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>模拟12列栅格布局</title>
  6.     <link rel="stylesheet" href="css/grid.css" />
  7.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <!-- 栅格布局系统分为两步:
  11.         第一步先创建一个行;
  12.         第二步在行中进行列的划分  -->
  13.       <!-- 一等份 -->
  14.       <div class="row">
  15.         <div class="item col-12">12列</div>
  16.       </div>
  17.       <!-- 二等份 -->
  18.       <div class="row">
  19.         <div class="item col-6">六列</div>
  20.         <div class="item col-6">六列</div>
  21.       </div>
  22.       <!-- 三等份 -->
  23.       <div class="row">
  24.         <div class="item col-4">4列</div>
  25.         <div class="item col-4">4列</div>
  26.         <div class="item col-4">4列</div>
  27.       </div>
  28.       <!-- 四等份 -->
  29.       <div class="row">
  30.         <div class="item col-3">3列</div>
  31.         <div class="item col-3">3列</div>
  32.         <div class="item col-3">3列</div>
  33.         <div class="item col-3">3列</div>
  34.       </div>
  35.       <!-- 六等份 -->
  36.       <div class="row">
  37.         <div class="item col-2">2列</div>
  38.         <div class="item col-2">2列</div>
  39.         <div class="item col-2">2列</div>
  40.         <div class="item col-2">2列</div>
  41.         <div class="item col-2">2列</div>
  42.         <div class="item col-2">2列</div>
  43.       </div>
  44.       <!-- 12等份 -->
  45.       <div class="row">
  46.         <div class="item col-1">1列</div>
  47.         <div class="item col-1">1列</div>
  48.         <div class="item col-1">1列</div>
  49.         <div class="item col-1">1列</div>
  50.         <div class="item col-1">1列</div>
  51.         <div class="item col-1">1列</div>
  52.         <div class="item col-1">1列</div>
  53.         <div class="item col-1">1列</div>
  54.         <div class="item col-1">1列</div>
  55.         <div class="item col-1">1列</div>
  56.         <div class="item col-1">1列</div>
  57.         <div class="item col-1">1列</div>
  58.       </div>
  59.       <!-- 混合使用 -->
  60.       <div class="row">
  61.         <div class="item col-3">3列</div>
  62.         <div class="item col-6">6列</div>
  63.         <div class="item col-3">3列</div>
  64.       </div>
  65.     </div>
  66.   </body>
  67. </html>

css 代码

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   display: grid;
  11.   place-content: center;
  12. }
  13. .container {
  14.   /* border: 1px solid #000; */
  15.   min-width: 80vw;
  16.   display: grid;
  17.   gap: 0.5rem;
  18. }
  20. .container > .row {
  21.   display: grid;
  22.   /* 将一行划分为12等份 */
  23.   grid-template-columns: repeat(12, 1fr);
  24.   min-height: 3rem;
  25.   gap: 0.5rem;
  26. }
  28. .container > .row > .item {
  29.   padding: 0.5rem;
  30.   text-align: center;
  31.   background-color: lightcyan;
  32.   border: 1px solid;
  33.   border-radius: 0.3rem;
  34. }
  36. .col-12 {
  37.   /* 从当前行开始扩展12列 */
  38.   grid-area: auto / span 12;
  39. }
  40. .col-11 {
  41.   grid-area: auto / span 11;
  42. }
  43. .col-10 {
  44.   grid-area: auto / span 10;
  45. }
  46. .col-9 {
  47.   grid-area: auto / span 9;
  48. }
  49. .col-8 {
  50.   grid-area: auto / span 8;
  51. }
  52. .col-7 {
  53.   grid-area: auto / span 7;
  54. }
  55. .col-6 {
  56.   grid-area: span 1 / span 6;
  57. }
  58. .col-5 {
  59.   grid-area: auto / span 5;
  60. }
  61. .col-4 {
  62.   grid-area: auto / span 4;
  63. }
  64. .col-3 {
  65.   grid-area: span 1 / span 3;
  66. }
  67. .col-2 {
  68.   grid-area: span 1 / span 2;
  69. }
  70. .col-1 {
  71.   grid-area: auto / span 1;
  72. }

2.使用 grid 快速布局实现 php.cn 首页面的主要组件

这里我们可以使用以前介绍过的绝对定位来实现登录界面，也就是一个模态框。

由于 js 还没有掌握，所以轮播图组件依旧是用一张照片代替，这里仅完成了部分组件的模拟，其中还有部分问题没有解决。这里我用的是 rem 单位进行字体大小设置，不过展示效果不是很好，建议如果不是做响应式布局，还是使用 px 单位比较好，另外，这里的各个组件的尺寸还有颜色都是量过的，并不是随便写的。

示例代码：

html 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>仿php中文网主页</title>
  7.     <!-- 初始化 -->
  8.     <link rel="stylesheet" href="css/demo8/reset.css" />
  9.     <!-- 模态框 -->
  10.     <link rel="stylesheet" href="css/demo8/modal.css" />
  11.     <!-- 文字图标 -->
  12.     <link rel="stylesheet" href="iconfont/iconfont.css" />
  13.     <!-- 页眉 -->
  14.     <link rel="stylesheet" href="css/demo8/header.css" />
  15.     <!-- 菜单区 -->
  16.     <link rel="stylesheet" href="css/demo8/menu.css" />
  17.     <!-- 推荐课程 -->
  18.     <link rel="stylesheet" href="css/demo8/course.css" />
  19.     <!-- 页脚 -->
  20.     <link rel="stylesheet" href="css/demo8/footer.css" />
  21.   </head>
  22.   <body>
  23.     <!-- 页眉 -->
  24.     <header>
  25.       <div>
  26.         <a href=""><img src="img/header/log.png" alt="php中文网" /></a>
  27.       </div>
  28.       <div class="nav-top">
  29.         <a href="">首页</a>
  30.         <a href="">视频教程</a>
  31.         <a href="">入门教程</a>
  32.         <a href="">社区问答</a>
  33.         <a href="">技术文章</a>
  34.         <a href="">资源下载</a>
  35.         <a href="">编程词典</a>
  36.         <a href="">工具下载</a>
  37.         <a href="">PHP培训</a>
  38.       </div>
  39.       <button class="button">登录</button>
  40.     </header>
  41.     <!-- 模态框 -->
  42.     <div class="modal">
  43.       <!-- 蒙板：用来盖住后面的内容，使它半透明 -->
  44.       <div class="modal-coverback"></div>
  45.       <!-- 主体 -->
  46.       <div class="modal-body">
  47.         <button class="close">关闭</button>
  48.         <form action="" method="POST">
  49.           <table>
  50.             <caption>
  51.               用户登录
  52.             </caption>
  53.             <tr>
  54.               <td><label for="username">用户名:</label></td>
  55.               <td>
  56.                 <input type="text" name="username" id="username" required />
  57.               </td>
  58.             </tr>
  59.             <tr>
  60.               <td><label for="psd">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label></td>
  61.               <td><input type="password" name="psd" id="psd" required /></td>
  62.             </tr>
  64.             <tr>
  65.               <td></td>
  66.               <td><button>登录</button></td>
  67.             </tr>
  68.           </table>
  69.         </form>
  70.       </div>
  71.     </div>
  73.     <!-- 菜单区 -->
  75.     <div class="menu">
  76.       <div class="menu-left">
  77.         <div>
  78.           <a href="">php开发</a>
  79.           <a href=""><div class="iconfont icon-jiantou"></div></a>
  80.         </div>
  81.         <div>
  82.           <a href="">前端开发</a>
  83.           <a href=""><div class="iconfont icon-jiantou"></div></a>
  84.         </div>
  85.         <div>
  86.           <a href="">服务端开发</a>
  87.           <a href=""><div class="iconfont icon-jiantou"></div></a>
  88.         </div>
  89.         <div>
  90.           <a href="">移动开发</a>
  91.           <a href=""><div class="iconfont icon-jiantou"></div></a>
  92.         </div>
  93.         <div>
  94.           <a href="">数据库</a>
  95.           <a href=""><div class="iconfont icon-jiantou"></div></a>
  96.         </div>
  97.         <div>
  98.           <a href="">服务器运维&下载</a>
  99.           <a href=""><div class="iconfont icon-jiantou"></div></a>
  100.         </div>
  101.         <div>
  102.           <a href="">在线工具箱</a>
  103.           <a href=""><div class="iconfont icon-jiantou"></div></a>
  104.         </div>
  105.         <div>
  106.           <a href="">常用类库</a>
  107.           <a href=""><div class="iconfont icon-jiantou"></div></a>
  108.         </div>
  109.       </div>
  110.       <div class="menu-top">
  111.         <ul>
  112.           <li><a href="">PHP头条</a></li>
  113.           <li><a href="">独孤九贱</a></li>
  114.           <li><a href="">学习路线</a></li>
  115.           <li><a href="">在线工具</a></li>
  116.           <li><a href="">趣味课堂</a></li>
  117.           <li><a href="">社区问答</a></li>
  118.           <li><a href="">课程直播</a></li>
  119.           <li><input type="text" placeholder="输入关键字" /></li>
  120.         </ul>
  121.       </div>
  122.       <div>
  123.         <a href=""><img src="img/menu/1.jpg" alt="" /></a>
  124.       </div>
  125.       <div class="menu-bottom">
  126.         <ul>
  127.           <li>
  128.             <a href=""><img src="img/menu/2.jpg" alt="" /></a>
  129.           </li>
  130.           <li>
  131.             <a href=""><img src="img/menu/3.png" alt="" /></a>
  132.           </li>
  133.           <li>
  134.             <a href=""><img src="img/menu/4.jpg" alt="" /></a>
  135.           </li>
  136.           <li>
  137.             <a href=""><img src="img/menu/5.jpg" alt="" /></a>
  138.           </li>
  139.         </ul>
  140.       </div>
  141.     </div>
  143.     <!-- 过渡区 -->
  145.     <div class="transit">
  146.       <a href=""><img src="img/menu/6.jpg" alt="" /></a>
  147.     </div>
  149.     <!-- 新闻区 -->
  151.     <!-- 推荐课程 -->
  152.     <div class="course">
  153.       <h3><span>&lt;/&gt;</span>php入门精品课程<span>&lt;/&gt;</span></h3>
  154.       <ul>
  155.         <li>
  156.           <a href=""><img src="img/course/1.jpg" alt="" /></a>
  157.         </li>
  158.         <li>
  159.           <a href=""><img src="img/course/2.png" alt="" /></a>
  160.         </li>
  161.         <li>
  162.           <a href=""><img src="img/course/3.jpg" alt="" /></a>
  163.         </li>
  164.         <li>
  165.           <a href=""><img src="img/course/4.jpg" alt="" /></a>
  166.         </li>
  167.         <li>
  168.           <a href=""><img src="img/course/5.jpg" alt="" /></a>
  169.         </li>
  170.         <li>
  171.           <a href=""><img src="img/course/6.jpg" alt="" /></a>
  172.         </li>
  173.         <li>
  174.           <a href=""><img src="img/course/7.jpeg" alt="" /></a>
  175.         </li>
  176.         <li>
  177.           <a href=""><img src="img/course/8.jpg" alt="" /></a>
  178.         </li>
  179.         <li>
  180.           <a href=""><img src="img/course/9.jpg" alt="" /></a>
  181.         </li>
  182.         <li>
  183.           <a href=""><img src="img/course/10.jpg" alt="" /></a>
  184.         </li>
  185.         <li>
  186.           <a href=""><img src="img/course/11.jpg" alt="" /></a>
  187.         </li>
  188.         <li>
  189.           <a href=""><img src="img/course/12.jpg" alt="" /></a>
  190.         </li>
  191.         <li>
  192.           <a href=""><img src="img/course/13.jpg" alt="" /></a>
  193.         </li>
  194.         <li>
  195.           <a href=""><img src="img/course/14.jpg" alt="" /></a>
  196.         </li>
  197.       </ul>
  198.     </div>
  200.     <!-- 页脚 -->
  202.     <footer>
  203.       <div class="main">
  204.         <div class="main-left">
  205.           <ul class="main-lefttop">
  206.             <li><a href="">网站首页</a></li>
  207.             <li><a href="">PHP视频</a></li>
  208.             <li><a href="">PHP实战</a></li>
  209.             <li><a href="">PHP代码</a></li>
  210.             <li><a href="">PHP手册</a></li>
  211.             <li><a href="">词条</a></li>
  212.             <li><a href="">手记</a></li>
  213.             <li><a href="">编程词典</a></li>
  214.             <li><a href="">php培训</a></li>
  215.           </ul>
  216.           <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
  218.           <p>
  219.             Copyright 2014-2020 https://www.php.cn/ All Rights Reserved |
  220.             苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
  221.             <a href=""><img src="img/footer/3.gif" alt="" /></a>
  222.             <span>
  223.               <a href="">关于我们</a>
  224.               <a href="">免责声明</a>
  225.               <a href="">赞助与捐赠</a>
  226.               <a href="">广告合作</a>
  227.             </span>
  228.           </p>
  229.         </div>
  230.         <div class="main-right">
  231.           <img src="img/footer/1.jpg" alt="" />
  232.           &nbsp;&nbsp;
  233.           <img src="img/footer/2.jpg" alt="" />
  234.         </div>
  235.       </div>
  236.     </footer>
  237.   </body>
  238.   <script src="js/modal.js"></script>
  239. </html>

reset.css 代码

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  7. html {
  8.   font-size: 10px;
  9. }
  11. a {
  12.   color: #444;
  13.   text-decoration: none;
  14. }
  15. a:hover {
  16.   cursor: pointer;
  17. }
  18. li {
  19.   list-style: none;
  20. }
  22. body {
  23.   background-color: #f3f5f7;
  24. }
  26. /* 媒体查询 */
  27. @media screen and (min-width: 480px) {
  28.   html {
  29.     font-size: 4px;
  30.   }
  31. }
  32. @media screen and (min-width: 640px) {
  33.   html {
  34.     font-size: 6px;
  35.   }
  36. }
  37. @media screen and (min-width: 720px) {
  38.   html {
  39.     font-size: 8px;
  40.   }
  41. }
  43. @media screen and (min-width: 1280px) {
  44.   html {
  45.     font-size: 10px;
  46.   }
  47. }

header.css 代码

  1. header {
  2.   /* padding: 0.5rem; */
  3.   background-color: black;
  4.   height: 6rem;
  5.   display: grid;
  6.   grid-template-columns: 14rem 8fr 3fr;
  7.   place-items: space-between;
  8.   margin-bottom: 3rem;
  9. }
  11. header img {
  12.   width: 14rem;
  13.   /* height: 6rem; */
  14. }
  16. header .nav-top {
  17.   font-size: 1.5rem;
  18.   display: grid;
  19.   grid-template-columns: 6.8rem repeat(8, 1fr);
  20.   place-items: center;
  21. }
  23. header .nav-top a {
  24.   height: 6rem;
  25.   color: #b3b3b3;
  26.   line-height: 6rem;
  27. }
  29. header .nav-top a:hover {
  30.   color: #fafafa;
  31.   transition: 0.5s;
  32.   border-bottom: 3px solid lightgreen;
  33. }
  35. header .button {
  36.   background-color: black;
  37.   color: #b3b3b3;
  38.   padding-right: 3rem;
  39.   font-size: 1.5rem;
  40.   outline: none;
  41.   border: none;
  42.   place-self: center end;
  43. }
  44. header .button:hover {
  45.   cursor: pointer;
  46.   opacity: 0.8;
  47. }

modal.css 代码

  1. /* 模态框样式 */
  3. /* 蒙版 */
  4. /* 使用固定定位 */
  5. .modal .modal-coverback {
  6.   background-color: rgb(0, 0, 0, 0.5);
  7.   position: fixed;
  8.   top: 0;
  9.   left: 0;
  10.   right: 0;
  11.   bottom: 0;
  12. }
  13. /* 主体 */
  14. .modal .modal-body {
  15.   padding: 1rem;
  16.   /* min-width: 20rem;
  17.   min-height: 15rem; */
  18.   border: 1px solid #000;
  19.   /* 设置渐变色 */
  20.   background: linear-gradient(to right, lightcyan, #fff);
  22.   /* 固定定位 */
  23.   position: fixed;
  24.   /* top: 0;
  25.   left: 0;
  26.   right: 0;
  27.   bottom: 0; */
  28.   /* margin: auto; */
  29.   /* 实现屏幕居中 */
  30.   top: 50%;
  31.   left: 50%;
  32.   /* 向后平移以自身为基准的50% */
  33.   transform: translate(-50%, -50%);
  34. }
  35. .modal form table {
  36.   width: 80%;
  37. }
  38. .modal form table caption {
  39.   font-weight: bold;
  40.   margin-bottom: 2rem;
  41. }
  42. .modal form table td {
  43.   padding: 0.5rem 0;
  44.   margin-bottom: 3rem;
  45. }
  46. .modal form table td:first-of-type {
  47.   width: 5rem;
  48. }
  49. .modal form table td input {
  50.   width: auto;
  51.   height: auto;
  52. }
  53. .modal form table button {
  54.   width: 10rem;
  55.   height: 3rem;
  56. }
  57. .modal form table button:hover {
  58.   opacity: 0.8;
  59.   cursor: pointer;
  60. }
  62. .modal-body {
  63.   position: relative;
  64. }
  65. .modal .close {
  66.   font-size: 1rem;
  67.   position: absolute;
  68.   width: 4rem;
  69.   height: 2rem;
  70.   top: 1rem;
  71.   right: 1rem;
  72. }
  73. .modal .close:hover {
  74.   cursor: pointer;
  75.   background-color: lightcyan;
  76.   color: #000;
  77.   box-shadow: 0 0 2px #eee;
  78. }
  79. /* 页面初始化时，模态框应该隐藏 */
  80. .modal {
  81.   display: none;
  82. }

menu.css 代码

  1. /* 菜单区 */
  3. .menu {
  4.   /* margin-bottom: 2rem; */
  5.   width: 120rem;
  6.   height: 51rem;
  7.   /* background-color: #ccc; */
  8.   margin: 2rem auto;
  9.   display: grid;
  10.   grid-template-columns: 21.6rem 1fr;
  11.   grid-template-rows: 6rem 1fr 12rem;
  12. }
  14. .menu img {
  15.   width: 100%;
  16. }
  18. .menu .menu-left {
  19.   padding: 2rem 0;
  20.   grid-area: span 3;
  21.   background-color: #2b333b;
  22.   display: grid;
  23.   grid-template-rows: repeat(8, 1fr);
  24.   border-top-left-radius: 1rem;
  25.   border-bottom-left-radius: 1rem;
  26. }
  28. .menu .menu-left > div {
  29.   padding: 1rem;
  30.   display: flex;
  31.   justify-content: space-between;
  32.   align-items: center;
  33. }
  35. .menu .menu-left > div > a {
  36.   font-size: 1.5rem;
  37.   color: #b3b3b3;
  38. }
  40. .menu .menu-left > div:hover {
  41.   background-color: #666;
  42.   cursor: pointer;
  43. }
  45. .menu .menu-top {
  46.   padding: 0.5rem;
  47.   background-color: #fff;
  48.   border-top-right-radius: 1rem;
  49. }
  51. .menu .menu-top > ul {
  52.   height: 6rem;
  53.   font-size: 1.5rem;
  54.   display: grid;
  55.   grid-template-columns: repeat(7, 8.3rem) 1fr;
  56.   place-items: center;
  57. }
  58. .menu .menu-top > ul > li:last-of-type {
  59.   place-self: center;
  60. }
  62. .menu .menu-top > ul > li:last-of-type input {
  63.   padding: 1rem;
  64.   background-color: #f1f0f0;
  65.   font-size: 1.7rem;
  66.   outline: none;
  67.   border: none;
  68.   box-shadow: 1px 1px #b3b3b3;
  69.   border-radius: 0.5rem;
  70. }
  72. .menu .menu-top > ul > li:last-of-type input:hover {
  73.   background-color: #f1f9f9;
  74.   transition: 0.5s;
  75. }
  77. .menu .menu-bottom {
  78.   padding: 0.5rem;
  79.   background-color: #fff;
  80.   border-bottom-right-radius: 1rem;
  81. }
  83. .menu .menu-bottom ul {
  84.   display: grid;
  85.   height: 12rem;
  86.   grid-template-columns: repeat(4, 1fr);
  87.   gap: 0.5rem;
  88.   place-items: center;
  89. }
  91. .menu .menu-bottom ul li img {
  92.   border-radius: 0.5rem;
  93. }
  95. .transit {
  96.   /* background-color: lightgreen; */
  97.   width: 120rem;
  98.   height: 8rem;
  99.   margin: 2rem auto;
  100. }
  102. .transit img {
  103.   border-radius: 0.8rem;
  104. }

course.css 代码

  1. .course {
  2.   width: 120rem;
  3.   height: 64.6rem;
  4.   padding: 1.5rem 0;
  5.   margin: 3rem auto;
  6.   background-color: white;
  7.   display: grid;
  8.   grid-template-rows: 5rem 1fr;
  10.   border-radius: 0.5rem;
  11. }
  13. .course h3 {
  14.   width: 120rem;
  15.   font-size: 2rem;
  16.   color: #444;
  17.   text-align: center;
  18.   margin-bottom: 3rem;
  19. }
  21. .course h3 span {
  22.   color: skyblue;
  23. }
  25. .course img {
  26.   width: 100%;
  27.   height: 100%;
  28.   border-radius: 0.5rem;
  29. }
  30. .course ul {
  31.   padding: 1.5rem;
  32.   width: 120rem;
  33.   height: calc(64.4rem - 7rem);
  34.   display: grid;
  35.   grid-template-columns: repeat(5, 1fr);
  36.   grid-template-rows: repeat(3, 1fr);
  37.   gap: 1rem;
  38. }
  40. .course ul li:first-of-type {
  41.   grid-area: span 2;
  42. }
  44. .course ul li:hover {
  45.   opacity: 0.8;
  46.   transition: 0.5s;
  47. }

footer.css 代码

  1. footer {
  2.   height: 17.4rem;
  3.   background-color: #333;
  4.   padding-top: 2rem;
  5. }
  7. footer .main {
  8.   width: 120rem;
  9.   height: 15.4rem;
  10.   margin: 1rem auto;
  11.   padding: 1.5rem 0;
  12.   display: grid;
  13.   grid-template-columns: 90rem 30rem;
  14. }
  16. .main .main-left {
  17.   height: 12.4rem;
  18.   display: grid;
  19.   grid-template-rows: 2.8rem 4.1rem 5.5rem;
  20. }
  22. .main .main-left .main-lefttop {
  23.   width: 47.3rem;
  24.   height: 2.8rem;
  25.   display: grid;
  26.   grid-template-columns: repeat(5, 5.9rem) 3.4rem 3.4rem 5.9rem 5.4rem;
  27.   place-items: center end;
  28. }
  30. .main .main-left .main-lefttop li a {
  31.   color: #c3c3c3;
  32.   font-size: 1.3rem;
  33. }
  35. .main .main-left .main-lefttop li a:hover {
  36.   color: #f3f3f3;
  37. }
  39. .main .main-left p {
  40.   color: #666;
  41.   font-size: 1.1rem;
  42. }
  44. .main .main-left p:first-of-type {
  45.   padding-top: 2rem;
  46.   /* place-content: end start; */
  47. }
  49. .main .main-left p:last-of-type {
  50.   display: grid;
  51.   padding-top: 2rem;
  52.   grid-template-columns: 1fr 1.5rem 25rem;
  53.   place-content: start;
  54. }
  56. .main .main-left p:last-of-type img {
  57.   width: 1.5rem;
  58.   margin-right: 1rem;
  59. }
  61. .main .main-left p:last-of-type span {
  62.   display: grid;
  63.   grid-template-columns: repeat(4, 1fr);
  64.   place-items: start end;
  65.   margin-right: 1rem;
  66. }
  68. .main .main-left p:last-of-type span a {
  69.   color: #666;
  70. }
  71. .main .main-right img {
  72.   width: 100px;
  73.   height: 100px;
  74. }

这里面没有解决的问题就是两个，一个是页眉区的 php 中文网的那个 logo 我不能将它直接给背景色隐藏在内容区。第二个问题是课程区的多余部分的那个文字弹框不知道怎么实现那样的动画设置,所以我就设置了个图片充满内容区。

效果如下：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：图片弹层是js做的, 不必管
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