简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >PHP学习

PHP学习

P粉276126820
P粉276126820原创
2023年03月24日 01:01:00514浏览

仿PHP中文网热门推荐

css

  1. body{
  2.     background-color:rgb(235, 240, 238);
  3. }
  4. body a{
  5.     text-decoration: none;
  6.     color: #000;
  7.     font-size: small;
  8. }
  9. body a:hover{
  10.     color:red;
  12. }
  14. .hot-sourse{
  15.     width: 1020px;
  16.     margin:  0 auto;
  18. }
  19. .hot-more{
  20.     display: flex;
  21.     place-content : space-between;
  22. }
  23. .hot-more a{
  24.     display: flex;
  25.     place-items: end end;
  26.     margin-bottom: 5PX;
  27.     color:gray;
  28. }
  29. .hot-sourse .courses-list {
  30.     display: grid;
  31.     grid-template-columns: repeat(5,1fr);
  32.     gap: 10px 10px;
  33. }
  34. .hot-sourse .courses-list img{
  35.     width: 100%;
  36.     border-radius: 5px 5px 0 0;
  37. }
  38. .hot-sourse .courses-list img:hover{
  39.     transform:scale(1.1);
  40.     transition: 0.3s;
  41. } 
  42. .hot-sourse .courses-list .sourse{
  43.     background-color: aliceblue;
  44.     border-radius: 0 0 5px 5px;
  45.     overflow: hidden;
  46. }
  48. .hot-sourse .courses-list .sourse .source-dec{
  49.     background-color: aliceblue;
  50.     padding:  5px ;
  51. }
  52. .hot-sourse .courses-list .sourse .source-dec .title{
  53. padding:  10px;
  54. }
  55. .hot-sourse .courses-list .sourse .source-dec .tag{
  56.     color:red;
  57.     background-color:bisque;
  58.     border-radius: 2px;
  59.     padding: 2px 4px;
  60.     font-size: x-small;
  61. }
  62. .hot-sourse .courses-list .sourse .source-dec .title a{
  63.     margin-left: 5px;
  64. }
  65. .hot-sourse .courses-list .sourse .source-dec .other{
  66.     font-size:small;
  67.     color: grey;
  68.     margin: 10px;
  69.     display:flex;
  70.     place-content: space-between;
  71. }

html

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="gridcase2.css">
  10. </head>
  11. <body>
  12.     <div class="hot-sourse">
  13.         <div class="hot-more">
  14.             <h3>热门推荐</h3>
  15.             <a href="">更多></a>
  16.        </div>
  17.        <div class="courses-list">
  18.             <div class="sourse">
  19.                     <a href=""><img src="pic/source.jpg" alt=""></a>
  20.                     <div class="source-dec">
  21.                         <div class="title">
  22.                             <small class="tag">中级</small>
  23.                             <a href="">小白拯救者: PHP7基础语法快速预览</a>
  24.                         </div>
  25.                         <div class="other">
  26.                             <span>1256次学习</span>
  27.                             <span>收藏</span>
  28.                         </div>
  29.                     </div>
  30.             </div>
  31.             <div class="sourse">
  32.                 <a href=""><img src="pic/source1.jpg" alt=""></a>
  33.                 <div class="source-dec">
  34.                     <div class="title">
  35.                         <small class="tag">中级</small>
  36.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  37.                     </div>
  38.                     <div class="other">
  39.                         <span>1256次学习</span>
  40.                         <span>收藏</span>
  41.                     </div>
  42.                 </div>
  43.             </div>
  44.             <div class="sourse">
  45.                 <a href=""><img src="pic/source2.png" alt=""></a>
  46.                 <div class="source-dec">
  47.                     <div class="title">
  48.                         <small class="tag">中级</small>
  49.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  50.                     </div>
  51.                     <div class="other">
  52.                         <span>1256次学习</span>
  53.                         <span>收藏</span>
  54.                     </div>
  55.                 </div>
  56.             </div>
  57.             <div class="sourse">
  58.                 <a href=""><img src="pic/source3.jpg" alt=""></a>
  59.                 <div class="source-dec">
  60.                     <div class="title">
  61.                         <small class="tag">中级</small>
  62.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  63.                     </div>
  64.                     <div class="other">
  65.                         <span>1256次学习</span>
  66.                         <span>收藏</span>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.             <div class="sourse">
  71.                 <a href=""><img src="pic/source4.jpg" alt=""></a>
  72.                 <div class="source-dec">
  73.                     <div class="title">
  74.                         <small class="tag">中级</small>
  75.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  76.                     </div>
  77.                     <div class="other">
  78.                         <span>1256次学习</span>
  79.                         <span>收藏</span>
  80.                     </div>
  81.                 </div>
  82.             </div>
  83.             <div class="sourse">
  84.                 <a href=""><img src="pic/source5.png" alt=""></a>
  85.                 <div class="source-dec">
  86.                     <div class="title">
  87.                         <small class="tag">中级</small>
  88.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  89.                     </div>
  90.                     <div class="other">
  91.                         <span>1256次学习</span>
  92.                         <span>收藏</span>
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.             <div class="sourse">
  97.                 <a href=""><img src="pic/source6.jpg" alt=""></a>
  98.                 <div class="source-dec">
  99.                     <div class="title">
  100.                         <small class="tag">中级</small>
  101.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  102.                     </div>
  103.                     <div class="other">
  104.                         <span>1256次学习</span>
  105.                         <span>收藏</span>
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.             <div class="sourse">
  110.                 <a href=""><img src="pic/source7.png" alt=""></a>
  111.                 <div class="source-dec">
  112.                     <div class="title">
  113.                         <small class="tag">中级</small>
  114.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  115.                     </div>
  116.                     <div class="other">
  117.                         <span>1256次学习</span>
  118.                         <span>收藏</span>
  119.                     </div>
  120.                 </div>
  121.             </div>
  122.             <div class="sourse">
  123.                 <a href=""><img src="pic/source8.jpg" alt=""></a>
  124.                 <div class="source-dec">
  125.                     <div class="title">
  126.                         <small class="tag">中级</small>
  127.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  128.                     </div>
  129.                     <div class="other">
  130.                         <span>1256次学习</span>
  131.                         <span>收藏</span>
  132.                     </div>
  133.                 </div>
  134.             </div>
  135.             <div class="sourse">
  136.                 <a href=""><img src="pic/source9.jpg" alt=""></a>
  137.                 <div class="source-dec">
  138.                     <div class="title">
  139.                         <small class="tag">中级</small>
  140.                         <a href="">小白拯救者: PHP7基础语法快速预览</a>
  141.                     </div>
  142.                     <div class="other">
  143.                         <span>1256次学习</span>
  144.                         <span>收藏</span>
  145.                     </div>
  146.                 </div>
  147.             </div>
  148.         </div>
  149.      </div>
  150.     </div>
  151. </body>
  152. </html>

效果图

上一条：仿今日头条首页下一条：前端学习之字体图标的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多