search

博客列表 >grid网格布局仿制php中文网课程网页

grid网格布局仿制php中文网课程网页

emagic
emagic原创
2020年06月29日 17:26:51727浏览

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.放项目
上一条：grid实现网页布局，仿php中文网-web前端第12章6.28下一条：grid网格布局-仿PHP中文网板块
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多