登录  /  注册
博主信息
博文 40
粉丝 0
评论 1
访问量 37979
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
grid布局实现PHP中文网课程栏目——100%还原
Dong.
原创
685人浏览过

Grid 布局实现PHP中文网首页课程列表

项目示例 :

代码演示:

  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. <title>grid布局仿PHP中文网</title>
  7. </head>
  8. <style>
  9. /* 初始化三部曲 */
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. box-sizing: border-box;
  14. }
  15. span {
  16. color: #666;
  17. font-size: 14px;
  18. }
  19. a {
  20. color: black;
  21. text-decoration: none;
  22. font-size: 14px;
  23. }
  24. h2 {
  25. color: #4d555d;
  26. margin-bottom: 30px;
  27. text-align: center;
  28. }
  29. .courses-list {
  30. width: 1200px;
  31. height: 646px;
  32. display: grid;
  33. margin: auto;
  34. }
  35. .courses-list > .courses-title {
  36. color: #666;
  37. text-align: center;
  38. }
  39. .courses-list > .container {
  40. display: grid;
  41. grid-template-columns: repeat(5 , 1fr);
  42. grid-template-rows: repeat(3 , 1fr);
  43. gap: 20px;
  44. }
  45. .courses-list > .container > .course {
  46. width: 217px;
  47. height: 166px;
  48. border-radius: 5%;
  49. box-shadow: 0 0 10px #888;
  50. /* 项目在单元格中的对齐方式 */
  51. place-self: start center;
  52. overflow: hidden;
  53. position: relative;
  54. }
  55. .courses-list > .container > .course.first {
  56. grid-row: span 2;
  57. height: 362px;
  58. }
  59. /* 课程图片 */
  60. .courses-list > .container > .course img {
  61. width: 100%;
  62. border-radius: 5%;
  63. }
  64. /* 课程描述 */
  65. .courses-list > .container > .course .desc {
  66. display: grid;
  67. place-content: space-between;
  68. min-height: 84px;
  69. background-color: #fff;
  70. border-radius: 5%;
  71. padding: 10px;
  72. /* 绝对定位 向上移动42像素*/
  73. position: relative;
  74. top: -40px;
  75. transition: all 0.5s;
  76. }
  77. .courses-list > .container > .course .span {
  78. position: absolute;
  79. display: block;
  80. width: 100%;
  81. left: 0;
  82. bottom: 0;
  83. line-height: 50px;
  84. height: 50px;
  85. padding: 0 20px;
  86. box-sizing: border-box;
  87. background-color: #fff;
  88. z-index: 2;
  89. }
  90. .courses-list > .container > .course .desc span {
  91. font-size: smaller;
  92. color: #555;
  93. }
  94. .courses-list > .container > .course .desc span {
  95. background-color: #939999;
  96. color: white;
  97. padding: 3px;
  98. border-radius: 2px;
  99. }
  100. .courses-list > .container > .course:hover .desc {
  101. min-height: 130px;
  102. cursor: pointer;
  103. position: relative;
  104. top: -90px;
  105. }
  106. </style>
  107. <body>
  108. <div class="courses-list">
  109. <h2 class="course-title"><strong>&lt;/&gt;</strong>PHP进阶学习路径<strong>&lt;/&gt;</strong></h2>
  110. <div class="container">
  111. <div class="course first">
  112. <a href=""><img src="https://www.php.cn/static/images/index_learn_middel.jpg" alt="" /></a>
  113. </div>
  114. <div class="course">
  115. <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e1577037989.jpg" alt="" /></a>
  116. <div class="desc">
  117. <a href=""><span>中级</span>孤独九剑(7)_Bootstrap视频教程</a>
  118. </div>
  119. <span class="span">6W+播放</span>
  120. </div>
  121. <div class="course">
  122. <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24010108e3d268.jpg" alt="" /></a>
  123. <div class="desc">
  124. <a href=""><span>中级</span>最新ThinkPHP 5.1全球首发视频教程(60天成就PHP)</a>
  125. </div>
  126. <span class="span">6W+播放</span>
  127. </div>
  128. <div class="course">
  129. <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a372b552a2c4233.jpg" alt="" /></a>
  130. <div class="desc">
  131. <a href=""><span>中级</span>MySQLi面向对象编程急速入门</a>
  132. </div>
  133. <span class="span">6W+播放</span>
  134. </div>
  135. <div class="course">
  136. <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a3728258bf9f213.jpg" alt="" /></a>
  137. <div class="desc">
  138. <a href=""><span>中级</span>PDO操作急速入门</a>
  139. </div>
  140. <span class="span">12W+播放</span>
  141. </div>
  142. <div class="course">
  143. <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a373991d9cd9819.jpg" alt="" /></a>
  144. <div class="desc">
  145. <a href=""><span>中级</span>PHP与Ajax急速入门</a>
  146. </div>
  147. <span class="span">10W+播放</span>
  148. </div>
  149. <div class="course">
  150. <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="" /></a>
  151. <div class="desc">
  152. <a href=""><span>中级</span>正则表达式急速入门</a>
  153. </div>
  154. <span class="span">10W+播放</span>
  155. </div>
  156. <div class="course">
  157. <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a5322a085219472.jpg" alt="" /></a>
  158. <div class="desc">
  159. <a href=""><span>中级</span>命名空间急速入门</a>
  160. </div>
  161. <span class="span">5W+播放</span>
  162. </div>
  163. <div class="course">
  164. <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a53090b27254106.jpg" alt="" /></a>
  165. <div class="desc">
  166. <a href=""><span>初级</span>PHP字符串操作经典入门</a>
  167. </div>
  168. <span class="span">6W+播放</span>
  169. </div>
  170. <div class="course">
  171. <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d22b615e56bf130.jpg" alt="" /></a>
  172. <div class="desc">
  173. <a href=""><span>中级</span>Ci框架30分钟急速入门</a>
  174. </div>
  175. <span class="span">6W+播放</span>
  176. </div>
  177. <div class="course">
  178. <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt="" /></a>
  179. <div class="desc">
  180. <a href=""><span>中级</span>PHP实战天龙八部微信支付实战视频</a>
  181. </div>
  182. <span class="span">45W+播放</span>
  183. </div>
  184. <div class="course">
  185. <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="" /></a>
  186. <div class="desc">
  187. <a href=""><span>中级</span>PHP实战天龙八部之仿爱奇艺网站</a>
  188. </div>
  189. <span class="span">45W+播放</span>
  190. </div>
  191. <div class="course">
  192. <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24230536122573.jpg" alt="" /></a>
  193. <div class="desc">
  194. <a href=""><span>中级</span>大型公益实战天龙八部之开发Mini版MVC框架仿糗</a>
  195. </div>
  196. <span class="span">6W+播放</span>
  197. </div>
  198. <div class="course">
  199. <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2402695ce37351.jpg" alt="" /></a>
  200. <div class="desc">
  201. <a href=""><span>中级</span>PHP全栈开发之小博客大智慧</a>
  202. </div>
  203. <span class="span">6W+播放</span>
  204. </div>
  205. </div>
  206. </div>
  207. </body>
  208. </html>

还原效果:

总结

  • 利用grid与flex的嵌套,解决了以前很难解决的位置对齐和定位问题;
  • 此案例利用绝对定位来实现上下滑动效果;
  • 感受到了gird布局的强大与简便性
  • 对于前面学习的属性没有掌握透,很多属性都快忘了
批改老师:GuanhuiGuanhui

批改状态:合格

老师批语:写的很好!效果图很美观!
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学