Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > grid网格布局仿制php中文网课程网页
Blogger Information
Blog 53
fans 3
comment 0
visits 46964
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网格布局仿制php中文网课程网页
emagic
Original
731 people have browsed it

0628作业

前端grid容器布局仿制php中文网课程网页布局：

html部分代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="mofang.css" />
  7.     <title>php中文网课程</title>
  8.   </head>
  9.   <body>
  10.     <h2>php入门精品课程</h2>
  11.     <div class="container">
  12.       <div class="item">
  13.         <img src="images/1.jpg" alt="" />
  14.         <a href=""></a>
  15.       </div>
  16.       <div class="item">
  17.         <img src="images/2.jpg" alt="" />
  18.         <div>
  19.           <span>初级</span>
  20.           <a href="">编程分享学习方法分享直播</a>
  21.           <span>1W+次播放</span>
  22.         </div>
  23.       </div>
  24.       <div class="item">
  25.         <img src="images/3.jpg" alt="" />
  26.         <div>
  27.           <span>初级</span>
  28.           <a href="">2018前端入门_HTML5</a>
  29.           <span>18W+次播放</span>
  30.         </div>
  31.       </div>
  32.       <div class="item">
  33.         <img src="images/4.jpg" alt="" />
  34.         <div>
  35.           <span>初级</span>
  36.           <a href="">CSS视频教程-玉女心经</a>
  37.           <span>10W+次播放</span>
  38.         </div>
  39.       </div>
  40.       <div class="item">
  41.         <img src="images/5.jpg" alt="" />
  42.         <div>
  43.           <span>初级</span>
  44.           <a href="">Javascript极速入门-玉女心经</a>
  45.           <span>10W+次播放</span>
  46.         </div>
  47.       </div>
  48.       <div class="item">
  49.         <img src="images/6.jpg" alt="" />
  50.         <div>
  51.           <span>初级</span>
  52.           <a href="">独孤九剑(6)_jQuery视频教程</a>
  53.           <span>12W+次播放</span>
  54.         </div>
  55.       </div>
  56.       <div class="item">
  57.         <img src="images/7.jpg" alt="" />
  58.         <div>
  59.           <span>初级</span>
  60.           <a href="">30分钟学会网站布局</a>
  61.           <span>6W+次播放</span>
  62.         </div>
  63.       </div>
  64.       <div class="item">
  65.         <img src="images/8.jpg" alt="" />
  66.         <div>
  67.           <span>初级</span>
  68.           <a href="">[公益直播]Web前端开发</a>
  69.           <span>5W+次播放</span>
  70.         </div>
  71.       </div>
  72.       <div class="item">
  73.         <img src="images/9.jpg" alt="" />
  74.         <div>
  75.           <span>初级</span>
  76.           <a href="">phpStudy极速入门视频</a>
  77.           <span>40W+次播放</span>
  78.         </div>
  79.       </div>
  80.       <div class="item">
  81.         <img src="images/10.jpg" alt="" />
  82.         <div>
  83.           <span>中级</span>
  84.           <a href="">ThinkPHP6.0极速入门</a>
  85.           <span>4W+次播放</span>
  86.         </div>
  87.       </div>
  88.       <div class="item">
  89.         <img src="images/11.jpg" alt="" />
  90.         <div>
  91.           <span>初级</span>
  92.           <a href="">独孤九剑(4)_PHP视频</a>
  93.           <span>50W+次播放</span>
  94.         </div>
  95.       </div>
  96.       <div class="item">
  97.         <img src="images/12.jpg" alt="" />
  98.         <div>
  99.           <span>初级</span>
  100.           <a href="">php完全自学手册</a>
  101.           <span>20W+次播放</span>
  102.         </div>
  103.       </div>
  104.       <div class="item">
  105.         <img src="images/13.jpg" alt="" />
  106.         <div>
  107.           <span>初级</span>
  108.           <a href="">MySQL权威开发指南</a>
  109.           <span>2W+次播放</span>
  110.         </div>
  111.       </div>
  112.       <div class="item">
  113.         <img src="images/14.jpg" alt="" />
  114.         <div>
  115.           <span>中级</span>
  116.           <a href="">[公益直播]PHP实战开发</a>
  117.           <span>3W+次播放</span>
  118.         </div>
  119.       </div>
  120.     </div>
  121.   </body>
  122. </html>

css代码部分

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. a {
  8.   text-decoration: none;
  9.   color: #555;
  10. }
  12. .item > span:nth-of-type(2n-1) {
  13.   color: white;
  14.   font-size: 0.6rem;
  15.   padding: 2px;
  16.   background-color: #999;
  17.   border-radius: 3px;
  18. }
  20. html,
  21. body {
  22.   width: 100%;
  23.   height: 100%;
  24.   overflow: hidden;
  25. }
  27. .container {
  28.   width: 1042px;
  29.   height: 600px;
  30.   display: grid;
  31.   /* 注意参数中间是有逗号的 */
  32.   grid-template-columns: repeat(5, 200px);
  33.   grid-template-rows: repeat(3, 180px);
  34.   gap: 20px;
  36.   margin: auto;
  38.   /* 设置命名区域名称 */
  39.   grid-template-areas:
  40.     "pic1 . . . ."
  41.     ". . . . ."
  42.     ". . . . .";
  43. }
  45. .container > .item {
  46.   /* border: 1px solid #000; */
  47.   border-radius: 10px;
  48.   box-shadow: 0 0 6px rgb(179, 179, 179);
  49.   position: relative;
  50. }
  52. .container > .item:first-of-type {
  53.   grid-row: span 2;
  54.   text-align: center;
  55.   color: #4d555d;
  56.   grid-area: pic1;
  57. }
  59. h2 {
  60.   text-align: center;
  61.   margin: 20px;
  62. }
  64. .item > img {
  65.   width: 100%;
  66.   height: 80%;
  67.   border-radius: 5px 5px 0 0;
  68. }
  70. .item > img:first-of-type {
  71.   width: 100%;
  72.   height: 100%;
  73.   border-radius: 5px;
  74. }
  76. .item > div {
  77.   position: relative;
  78.   height: 60px;
  79.   top: -30%;
  80.   background-color: whitesmoke;
  81.   padding: 3px;
  82.   border-radius: 4px;
  83. }
  85. .item > div > span:first-of-type {
  86.   background-color: #999;
  87.   padding: 3px;
  88.   color: aliceblue;
  89.   font-size: 0.6rem;
  90.   border-radius: 5px;
  91.   text-align: center;
  93. }
  95. .item > div > a {
  96.   font-size: 0.8rem;
  97.   padding: 2px;
  98.   white-space: nowrap;
  99.   text-overflow: clip;
  100. }
  102. /* a标签后面添加一个伪类after，强制换行，播放次数信息就重新开一行 */
  103. .item > div > a::after {
  104.   content: "\A";
  105.   white-space: pre;
  106. }
  108. .item > div > span:last-of-type {
  109.   color: #888;
  110.   font-size: 0.6rem;
  111.   padding: 2px;
  112.   text-align: left;
  113. }
  115. .item > div:hover {
  116.   color: #333;
  117.   top: -68%;
  118.   height: 120px;
  119. }

关键步骤

1.命名区域布局比较方便

  1.     grid-template-areas:
  2.     "pic1 . . . ."
  3.     ". . . . ."
  4.     ". . . . .";
  5. }

2.每个格子对应一个item，第一个item跨了行，grid-row: span 2
3.第一个item绑定pic1放入项目即可
4.下方 初级，课程名，播放次数等信息放进一个div中，并使用相对定位，向上偏移一定的距离
5.div设置hover效果，调整偏移距离，显示提拉效果
6.a标签后面添加一个伪类after，强制换行，播放次数信息就重新开一行

仿制目标图

效果图：

课堂小结：

属性 功能
display:grid 声明grid容器
grid-template-column: grid-template-column:列1宽 列2宽 …… 列n宽，1fr为自适应(1fr指的是剩余空间分1份全都给它)
grid-template-row: grid-template-row:行1高 行2高 …… 行n高，1fr为自适应
gap column-gap列间隙,row-gap行间隙
grid-column-start 列开始
grid-column-end 列结束，默认跨一行或者一列。结束可以不写
grid-row-start 行开始
grid-row-end 行结束，默认跨一行或者一列。结束可以不写
grid-area 定义区域，上述四个定位的简写grid-area：行起始/列起始/行结束/列结束，可以结合span使用,这种叫索引网格区；如果是字符串，叫命名网格区
span 行与列的跨越。网格区域，矩形，不用计算，只需要知道跨越多少就行
grid-column参数合并简写 grid-column：起始/结束(span n)
grid-row参数合并简写 grid-row：起始/结束(span n)
grid-column：span n 根据项目的当前默认位置进行简化grid-column-end：span n同样效果
repeat(次数 尺寸) 基础尺寸重复n次
  • 占位符用.一个.代表一个单元格

flex : 容器 ->项目

grid:容器->项目->项目

grid布局的步骤

1.画格子
2.放项目
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来是理解也, grid属性众多, 今晚还要介绍一些
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