Blogger Information
Blog 100
fans 8
comment 2
visits 150187
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
grid布局实现php中文网课程栏目目录(几乎100%还原了)
lilove的博客
Original
795 people have browsed it

废话不多说了,直接上代码:


  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>小刚日志:grid布局案例(仿php中文网首页局部页面)</title>
  7. </head>
  8. <style>
  9. * {
  10. padding: 0;
  11. margin: 0;
  12. box-sizing: border-box;
  13. }
  14. body {
  15. background-color: #edeff1;
  16. }
  17. a {
  18. color: #4d555d;
  19. text-decoration: none;
  20. }
  21. .panel {
  22. width: 1200px;
  23. background-color: #fff;
  24. border-radius: 10px;
  25. padding: 20px;
  26. margin: 10px auto;
  27. }
  28. .panel-header {
  29. color: #4d555d;
  30. margin-bottom: 30px;
  31. text-align: center;
  32. }
  33. .panel-header strong {
  34. font-size: medium;
  35. color: #1e9fff;
  36. }
  37. .panel-body {
  38. display: grid;
  39. /* 指定容器的行数列数 */
  40. /* 简写 */
  41. grid-template-rows: repeat(3, 170px);
  42. grid-template-columns: repeat(5, 217px);
  43. /* 行列间隔 */
  44. /* 简写 */
  45. gap: 20px;
  46. }
  47. .panel-body > .item:first-of-type {
  48. /* 第一个项目所跨的单元格区域 */
  49. /* 简写 */
  50. grid-row: 1 / 3;
  51. grid-column: 1 / 2;
  52. }
  53. .panel-body > .item:not(:first-of-type) {
  54. border-radius: 10px;
  55. box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
  56. }
  57. .panel-body > .item:not(:first-of-type) img {
  58. border-radius: 10px 10px 0 0;
  59. }
  60. .panel-body > .item img {
  61. width: 217px;
  62. border-radius: 10px;
  63. }
  64. .panel-body > .item > a {
  65. width: 217px;
  66. height: 172px;
  67. border-radius: 10px;
  68. display: flex;
  69. flex-flow: column nowrap;
  70. position: relative;
  71. }
  72. .panel-body > .item > a > div {
  73. height: 84px;
  74. background-color: #fff;
  75. border-radius: 10px;
  76. display: flex;
  77. flex-direction: column;
  78. position: absolute;
  79. bottom: 0;
  80. /* 过渡效果包含的属性如果不定义,效果无效 */
  81. transition: height 500ms;
  82. /* Safari */
  83. -webkit-transition: height 500ms;
  84. }
  85. .panel-body > .item > a:hover > div {
  86. height: 144px;
  87. }
  88. .panel-body > .item > a > div > h3,
  89. .panel-body > .item > a > p {
  90. width: 217px;
  91. }
  92. .panel-body > .item > a > div > h3 {
  93. height: 30px;
  94. color: #07111b;
  95. font-size: 14px;
  96. font-weight: 400;
  97. padding: 20px;
  98. }
  99. .panel-body > .item > a > div > h3 > span {
  100. font-size: 12px;
  101. color: #fff;
  102. background-color: #93999f;
  103. margin-right: 5px;
  104. }
  105. .panel-body > .item > a > p {
  106. height: 45px;
  107. font-size: 10px;
  108. color: #afa6c7;
  109. background-color: #fff;
  110. border-radius: 0 0 10px 10px;
  111. padding: 10px 20px;
  112. position: absolute;
  113. bottom: 0;
  114. }
  115. .panel-body > .item > a > div > small {
  116. width: 177px;
  117. font-size: 12px;
  118. margin: 20px auto;
  119. overflow: hidden;
  120. }
  121. </style>
  122. <body>
  123. <div class="panel">
  124. <h3 class="panel-header">
  125. <strong>&lt;/&gt;</strong>
  126. php入门精品课程
  127. <strong>&lt;/&gt;</strong>
  128. </h3>
  129. <div class="panel-body">
  130. <div class="item">
  131. <img src="images/index_learn_first.jpg" alt="" />
  132. </div>
  133. <div class="item">
  134. <a href="">
  135. <img src="images/5b63c72c61569244.png" alt="" />
  136. <div>
  137. <h3><span>初级</span>编程学习方法分享直播公益课</h3>
  138. </div>
  139. <p>1W+次播放</p>
  140. </a>
  141. </div>
  142. <div class="item">
  143. <a href="">
  144. <img src="images/5aa23f0ded921649.jpg" alt="" />
  145. <div>
  146. <h3><span>初级</span>2018前端入门_HTML5</h3>
  147. </div>
  148. <p>18W+次播放</p>
  149. </a>
  150. </div>
  151. <div class="item">
  152. <a href="">
  153. <img src="images/5ab346fc62ce4221.jpg" alt="" />
  154. <div>
  155. <h3><span>初级</span>CSS视频教程_玉女心经版</h3>
  156. <small>
  157. 本章节讲解的是有关CSS基础的内容,轻松明快,适合新手观看学习。
  158. </small>
  159. </div>
  160. <p>10W+次播放</p>
  161. </a>
  162. </div>
  163. <div class="item">
  164. <a href="">
  165. <img src="images/5acc118f11d6b969.jpeg" alt="" />
  166. <div>
  167. <h3><span>初级</span>JavaScript极速入门_玉女心经系列</h3>
  168. </div>
  169. <p>18W+次播放</p>
  170. </a>
  171. </div>
  172. <div class="item">
  173. <a href="">
  174. <img src="images/5d1c6e0d2b744633.jpg" alt="" />
  175. <div>
  176. <h3><span>中级</span>独孤九贱(6)_jQuery视频教程</h3>
  177. </div>
  178. <p>12W+次播放</p>
  179. </a>
  180. </div>
  181. <div class="item">
  182. <a href="">
  183. <img src="images/5a9fb97057b15707.jpeg" alt="" />
  184. <div>
  185. <h3><span>初级</span>30分钟学会网站布局</h3>
  186. </div>
  187. <p>6W+次播放</p>
  188. </a>
  189. </div>
  190. <div class="item">
  191. <a href="">
  192. <img src="images/5d24019911a24370.jpg" alt="" />
  193. <div>
  194. <h3><span>初级</span>[公益直播]Web前端开发极速入门</h3>
  195. </div>
  196. <p>5W+次播放</p>
  197. </a>
  198. </div>
  199. <div class="item">
  200. <a href="">
  201. <img src="images/5a699f1b2da2b398.jpg" alt="" />
  202. <div>
  203. <h3><span>初级</span>phpStudy极速入门视频教程</h3>
  204. </div>
  205. <p>40W+次播放</p>
  206. </a>
  207. </div>
  208. <div class="item">
  209. <a href="">
  210. <img src="images/5cecd27a4348b582.jpg" alt="" />
  211. <div>
  212. <h3><span>中级</span>ThinkPHP6.0极速入门(视频教程)</h3>
  213. </div>
  214. <p>4W+次播放</p>
  215. </a>
  216. </div>
  217. <div class="item">
  218. <a href="">
  219. <img src="images/5d1c6dfc9eb09885.jpg" alt="" />
  220. <div>
  221. <h3><span>中级</span>独孤九贱(4)_PHP视频教程</h3>
  222. </div>
  223. <p>50W+次播放</p>
  224. </a>
  225. </div>
  226. <div class="item">
  227. <a href="">
  228. <img src="images/5a13c87351613730.jpg" alt="" />
  229. <div>
  230. <h3><span>初级</span>php完全自学手册</h3>
  231. </div>
  232. <p>20W+次播放</p>
  233. </a>
  234. </div>
  235. <div class="item">
  236. <a href="">
  237. <img src="images/5b19ef2990649817.jpg" alt="" />
  238. <div>
  239. <h3><span>初级</span>MySQL权威开发指南(教程)</h3>
  240. </div>
  241. <p>2W+次播放</p>
  242. </a>
  243. </div>
  244. <div class="item">
  245. <a href="">
  246. <img src="images/5d240300be85b731.jpg" alt="" />
  247. <div>
  248. <h3><span>中级</span>[公益直播]PHP实战开发极速入门</h3>
  249. </div>
  250. <p>3W+次播放</p>
  251. </a>
  252. </div>
  253. </div>
  254. </div>
  255. </body>
  256. </html>
  • 运行效果:

不得不感叹grid布局的强大。


总结:

  1. 此案例中用到了grid与flex的嵌套,解决了以前很难解决的位置对齐和定位问题;
  2. 案例中有个运用over-flow: hidden;隐藏文字的技巧;
  3. 加入了过渡效果transition;
Correcting teacher:GuanhuiGuanhui

Correction status:qualified

Teacher's comments:不错!不错!完成的很好!
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