search

博客列表 >Grid布局php中文网部分页面

Grid布局php中文网部分页面

longlong
longlong原创
2020年06月29日 18:09:23629浏览

1.分析页面结构

我们要做的页面就是红色方框中的页面，我是这样分析的：

  1. 先看整体页面，body有背景色，在完成初始化工作以后就可以设置body了

  2. 整个大容器，有白色的背景，大容器分为两部分：标题栏和图文区

  3. 标题栏和图文区分别用容器（div）包裹起来，标题栏使用Flex居中显示，图文区使用Grid网格布局

  4. 网格布局好之后，第一张图文区跨越2行，然后准备填充网格项目

  5. 每个网格项目里面分为一张图片和一个被div包裹的文字区

  6. 让图片自适应，下方文字区需要使用绝对定位使其展示与图片下方

2. 写代码

代码如下：

  • HTML:
  1. <body>
  2.     <!-- 大容器 -->
  3.     <div class="wrapper">
  4.       <!-- 标题栏 -->
  5.       <div class="title">
  6.         <span class="iconfont icon-dashujukeshihuaico-"></span>
  7.         <h3>&nbsp;PHP入门精品课程&nbsp;</h3>
  8.         <span class="iconfont icon-dashujukeshihuaico-"></span>
  9.       </div>
  10.       <!-- 网格容器 -->
  11.       <div class="container">
  12.         <!-- 网格项目 -->
  13.         <div class="item">
  14.           <img src="./images/php-1.jpg" alt="" />
  15.         </div>
  16.         <div class="item">
  17.           <img src="./images/php-2.jpg" alt="" />
  18.           <div>
  19.             <a href="">初级</a>
  20.             <a href="">编程学习方法分享直播</a>
  21.             <span>1W+次播放</span>
  22.           </div>
  23.         </div>
  24.         <div class="item">
  25.           <img src="./images/php-3.jpg" alt="" />
  26.           <div>
  27.             <a href="">初级</a>
  28.             <a href="">2018前端入门_HTML5</a>
  29.             <span>18W+次播放</span>
  30.           </div>
  31.         </div>
  32.         <div class="item">
  33.           <img src="./images/php-4.jpg" alt="" />
  34.           <div>
  35.             <a href="">初级</a>
  36.             <a href="">CSS视频教程-玉女心</a>
  37.             <span>10W+次播放</span>
  38.           </div>
  39.         </div>
  40.         <div class="item">
  41.           <img src="./images/php-5.jpg" alt="" />
  42.           <div>
  43.             <a href="">初级</a>
  44.             <a href="">JavaScript极速入门_玉</a>
  45.             <span>18W+次播放</span>
  46.           </div>
  47.         </div>
  48.         <div class="item">
  49.           <img src="./images/php-6.jpg" alt="" />
  50.           <div>
  51.             <a href="">中级</a>
  52.             <a href="">独孤九贱(6)_jQuery视</a>
  53.             <span>12W+次播放</span>
  54.           </div>
  55.         </div>
  56.         <div class="item">
  57.           <img src="./images/php-7.jpg" alt="" />
  58.           <div>
  59.             <a href="">初级</a>
  60.             <a href="">30分钟学会网站布局</a>
  61.             <span>6W+次播放</span>
  62.           </div>
  63.         </div>
  64.         <div class="item">
  65.           <img src="./images/php-8.jpg" alt="" />
  66.           <div>
  67.             <a href="">初级</a>
  68.             <a href="">[公益直播]Web前端开</a>
  69.             <span>5W+次播放</span>
  70.           </div>
  71.         </div>
  72.         <div class="item">
  73.           <img src="./images/php-9.jpg" alt="" />
  74.           <div>
  75.             <a href="">初级</a>
  76.             <a href="">phpStudy极速入门</a>
  77.             <span>40W+次播放</span>
  78.           </div>
  79.         </div>
  80.         <div class="item">
  81.           <img src="./images/php-10.jpg" alt="" />
  82.           <div>
  83.             <a href="">中级</a>
  84.             <a href="">ThinkPHP6.0极速入门</a>
  85.             <span>4W+次播放</span>
  86.           </div>
  87.         </div>
  88.         <div class="item">
  89.           <img src="./images/php-11.jpg" alt="" />
  90.           <div>
  91.             <a href="">中级</a>
  92.             <a href="">独孤九贱(4)_PHP视频</a>
  93.             <span>50W+次播放</span>
  94.           </div>
  95.         </div>
  96.         <div class="item">
  97.           <img src="./images/php-12.jpg" alt="" />
  98.           <div>
  99.             <a href="">初级</a>
  100.             <a href="">php完全自学手册</a>
  101.             <span>20W+次播放</span>
  102.           </div>
  103.         </div>
  104.         <div class="item">
  105.           <img src="./images/php-13.jpg" alt="" />
  106.           <div>
  107.             <a href="">初级</a>
  108.             <a href="">MySQL权威开发指南</a>
  109.             <span>2W+次播放</span>
  110.           </div>
  111.         </div>
  112.         <div class="item">
  113.           <img src="./images/php-14.jpg" alt="" />
  114.           <div>
  115.             <a href="">中级</a>
  116.             <a href="">[公益直播]PHP实战开</a>
  117.             <span>3W+次播放</span>
  118.           </div>
  119.         </div>
  120.       </div>
  121.     </div>
  122.   </body>
  • CSS：
  1. <style>
  2.     /* 初始化 */
  3.     * {
  4.       margin: 0;
  5.       padding: 0;
  6.       box-sizing: border-box;
  7.     }
  8.     /* body背景色 */
  9.     body {
  10.       background: #f3f5f7;
  11.     }
  12.     /* 去掉a标签下划线，改变字体颜色和大小 */
  13.     a {
  14.       text-decoration: none;
  15.       color: black;
  16.       font-size: 14px;
  17.     }
  18.     /* 大容器的宽度，高度，圆角，背景色 */
  19.     .wrapper {
  20.       width: 1200px;
  21.       height: 660px;
  22.       margin: 50px auto;
  23.       background: white;
  24.       border-radius: 10px;
  25.     }
  26.     /* 大容器中的标题栏，设定高度后，转弹性盒，使文本垂直居中对齐 */
  27.     .title {
  28.       height: 80px;
  29.       display: flex;
  30.       align-items: center;
  31.       justify-content: center;
  32.       color: #666;
  33.     }
  34.     /* 标题栏中的字体图标样式 */
  35.     .title span {
  36.       font-size: 28px;
  37.       color: #1e9fff;
  38.     }
  39.     /* 中间图文区的容器，使用网格布局此容器 */
  40.     .container {
  41.       height: 570px;
  42.       width: 1180px;
  43.       margin: auto;
  44.       display: grid;
  45.       grid-template-columns: repeat(5, 1fr);
  46.       grid-template-rows: repeat(3, 1fr);
  47.       gap: 20px;
  48.     }
  49.     /* 第一个图文区跨2行 */
  50.     .container > div:first-of-type {
  51.       grid-row: span 2;
  52.     }
  53.     /* 设置每个图文区的边框圆角，盒子阴影效果，
  54.        定位父级 */
  55.     .container > .item {
  56.       border-radius: 10px;
  57.       box-shadow: 5px 10px 5px rgb(223, 220, 220);
  58.       position: relative;
  59.     }
  60.     /* 图片宽度自适应 */
  61.     .container img {
  62.       width: 100%;
  63.       border-radius: 10px;
  64.     }
  65.     /* 第一张图片高度自适应 */
  66.     .container .item:first-of-type img {
  67.       height: 100%;
  68.     }
  69.     /* 网格项目中最下面的“播放”字体显示 */
  70.     .item span {
  71.       font-size: 11px;
  72.       display: inline-block;
  73.       margin-left: 20px;
  74.       color: gray;
  75.     }
  76.     /* 网格项目中的文字区域高度，背景色，内边距和圆角
  77.     ，绝对定位 */
  78.     .item div {
  79.       height: 80px;
  80.       background: white;
  81.       border-radius: 10px;
  82.       position: absolute;
  83.       bottom: 0;
  84.     }
  85.     /* 文字区域中的“初级”“中级”字体显示样式 */
  86.     .item div a:first-of-type {
  87.       display: inline-block;
  88.       border-radius: 3px;
  89.       background: gray;
  90.       color: white;
  91.       padding: 2px;
  92.       margin: 10px 0 10px 20px;
  93.       font-size: 13px;
  94.     }
  95.     .item div a:last-of-type {
  96.       display: inline-block;
  97.       margin-left: 5px;
  98.       font-size: 13px;
  99.     }
  100.   </style>
  • 效果图：

3. 总结

初次体验了Grid布局，功能确实比Flex强大很多，在布局过程中，我也用到了Flex布局，有些细微之处，用Flex感觉还是不错，和老师的总结是不谋而合的。两者的属性用法还是有相似之处，都要区分好是容器还是项目。不过值得一提的是：grid在容器和项目之间还有一个中间层，就是单元格。

上一条：弹性盒子flex的基本操作及属性！下一条：Chapter6 盒模型与元素位置与大小
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
果冻2020-06-29 18:10:121楼
已修改，把图片放到DOM结构中了！

相关文章

查看更多