search

博客列表 >php中文网PC端最新课程部分模拟

php中文网PC端最新课程部分模拟

P粉019280626
P粉019280626原创
2023年02月17日 17:41:17415浏览
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>php中文网PC端课程</title>
  8.     <link rel="stylesheet" href="/cs/phpcn-css.css">
  9. </head>
  10. <body>
  11. <!-- 抬头  -->
  12. <div>
  13.     <div class="kechengtou1">
  14. <h3>最新课程</h3>
  15. <a href="https://www.php.cn/course/sort_new.html">更多</a>
  16. </div>
  18. <!-- 正文 -->
  19. <div class="container"><!--  -->
  20.     <ul class="zhengwen2">
  21.         <li class="zhengwen3">
  22.             <a href="https://www.php.cn/course/1519.html">
  23.                 <img src="/zuoye/image/63e202276944f543.jpg"  style="width:224px; height: 130px;"/> </a>
  24.                  <div class="chuji"> 
  25.                  <span>中级</span>
  26.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  27.                  </div>
  28.                  <div class="xuexiyushoucang">
  29.                 <span>1595次学习</span>
  30.                 <span>收藏</span>
  31.                 </div>
  32.         </li>
  33.     </ul>
  35.     <ul class="zhengwen2">
  36.         <li class="zhengwen3">
  37.             <a href="https://www.php.cn/course/1519.html">
  38.                 <img src="/zuoye/image/63e202276944f543.jpg" 
  39.                 style="width:224px; height: 130px;"/> </a>
  40.                  <div class="chuji"> 
  41.                  <span>中级</span>
  42.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  43.                  </div>
  44.                  <div class="xuexiyushoucang">
  45.                 <span>1595次学习</span>
  46.                 <span>收藏</span>
  47.             </div>
  48.         </li>
  49.     </ul>
  51.     <ul class="zhengwen2">
  52.         <li class="zhengwen3">
  53.             <a href="https://www.php.cn/course/1519.html">
  54.                 <img src="/zuoye/image/63e202276944f543.jpg" 
  55.                 style="width:224px; height: 130px;"/> </a>
  56.                  <div class="chuji"> 
  57.                  <span>中级</span>
  58.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  59.                  </div>
  60.                  <div class="xuexiyushoucang">
  61.                 <span>1595次学习</span>
  62.                 <span>收藏</span>
  63.             </div>
  64.         </li>
  65.     </ul>
  67.     <ul class="zhengwen2">
  68.         <li class="zhengwen3">
  69.             <a href="https://www.php.cn/course/1519.html">
  70.                 <img src="/zuoye/image/63e202276944f543.jpg" 
  71.                 style="width:224px; height: 130px;"/> </a>
  72.                  <div class="chuji"> 
  73.                  <span>中级</span>
  74.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  75.                  </div>
  76.                  <div class="xuexiyushoucang">
  77.                 <span>1595次学习</span>
  78.                 <span>收藏</span>
  79.             </div>
  80.         </li>
  81.     </ul>
  83.     <ul class="zhengwen2">
  84.         <li class="zhengwen3">
  85.             <a href="https://www.php.cn/course/1519.html">
  86.                 <img src="/zuoye/image/63e202276944f543.jpg" 
  87.                 style="width:224px; height: 130px;"/> </a>
  88.                  <div class="chuji"> 
  89.                  <span>中级</span>
  90.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  91.                  </div>
  92.                  <div class="xuexiyushoucang">
  93.                 <span>1595次学习</span>
  94.                 <span>收藏</span>
  95.             </div>
  96.         </li>
  97.     </ul>
  99.     <ul class="zhengwen2">
  100.         <li class="zhengwen3">
  101.             <a href="https://www.php.cn/course/1519.html">
  102.                 <img src="/zuoye/image/63e202276944f543.jpg" 
  103.                 style="width:224px; height: 130px;"/> </a>
  104.                  <div class="chuji"> 
  105.                  <span>中级</span>
  106.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  107.                  </div>
  108.                  <div class="xuexiyushoucang">
  109.                 <span>1595次学习</span>
  110.                 <span>收藏</span>
  111.             </div>
  112.         </li>
  113.     </ul>
  115.     <ul class="zhengwen2">
  116.         <li class="zhengwen3">
  117.             <a href="https://www.php.cn/course/1519.html">
  118.                 <img src="/zuoye/image/63e202276944f543.jpg" 
  119.                 style="width:224px; height: 130px;"/> </a>
  120.                  <div class="chuji"> 
  121.                  <span>中级</span>
  122.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  123.                  </div>
  124.                  <div class="xuexiyushoucang">
  125.                 <span>1595次学习</span>
  126.                 <span>收藏</span>
  127.             </div>
  128.         </li>
  129.     </ul>
  130.     <ul class="zhengwen2">
  131.         <li class="zhengwen3">
  132.             <a href="https://www.php.cn/course/1519.html">
  133.                 <img src="/zuoye/image/63e202276944f543.jpg" 
  134.                 style="width:224px; height: 130px;"/> </a>
  135.                  <div class="chuji"> 
  136.                  <span>中级</span>
  137.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  138.                  </div>
  139.                  <div class="xuexiyushoucang">
  140.                 <span>1595次学习</span>
  141.                 <span>收藏</span>
  142.             </div>
  143.         </li>
  144.     </ul>
  145.     <ul class="zhengwen2">
  146.         <li class="zhengwen3">
  147.             <a href="https://www.php.cn/course/1519.html">
  148.                 <img src="/zuoye/image/63e202276944f543.jpg" 
  149.                 style="width:224px; height: 130px;"/> </a>
  150.                  <div class="chuji"> 
  151.                  <span>中级</span>
  152.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  153.                  </div>
  154.                  <div class="xuexiyushoucang">
  155.                 <span>1595次学习</span>
  156.                 <span>收藏</span>
  157.             </div>
  158.         </li>
  159.     </ul>
  161.     <ul class="zhengwen2">
  162.         <li class="zhengwen3">
  163.             <a href="https://www.php.cn/course/1519.html">
  164.                 <img src="/zuoye/image/63e202276944f543.jpg" 
  165.                 style="width:224px; height: 130px;"/> </a>
  166.                  <div class="chuji"> 
  167.                  <span>中级</span>
  168.                  <a href="">Laravel 8 课程精讲（台湾同胞版）</a>
  169.                  </div>
  170.                  <div class="xuexiyushoucang">
  171.                 <span>1595次学习</span>
  172.                 <span>收藏</span>
  173.             </div>
  174.         </li>
  175.     </ul>
  177. </div>
  180. </div>
  181. </body>
  182. </html>

CSS

  1. *{
  2.     margin:0;
  3.     padding:0;
  4.     box-sizing: border-box;
  5. }
  7. .html{
  8.     display:flex;
  9.     background-color:slategrey;
  10. }
  12. .h3{
  13.     color:black;
  14.     }
  16. .kechengtou1 {
  17.     width:75rem;
  18.     display:flex;
  19.      place-content:space-between;
  20.     }
  23. /* .kechengtou1 span{
  24.     display:flex;
  25. } */
  28. .container{
  29.     width:75rem;
  30.     /* margin:30px;
  31.  */
  32.     display:grid;
  33.   /*   list-style: none; */
  35.     /* 显式网格 */
  36. grid-template-columns: repeat(5,1fr);
  37. grid-template-rows: repeat(2,1fr);
  39. gap: 20px ;
  40. }
  42. .container .zhengwen2 {
  43.     display:inline;
  44. }
  46. .container .zhengwen2 .zhengwen3{
  47.     list-style: none;
  48.     width:224px;
  49.     height:188px;
  50. }
  53. .container .zhengwen2 .chuji{
  54.     height:40px;
  55. }
  57. .container .zhengwen2 .zhengwen3 .xuexiyushoucang{
  58.         height: 35px;
  59. }

上一条：安装Node,与相关的JS插件下一条：数组与对象的声明与访问、作用域与作用链、对象的简化方案、分支结构与对应的语法糖
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
P粉0192806262023-02-17 17:42:101楼
在做的过程中，遇到 很多问题。也有老师和同学们的帮助。这个还需要进一步优化调整。