search

博客列表 >仿PHP中文网其中片段

仿PHP中文网其中片段

vbokok
vbokok原创
2023年02月13日 13:52:32315浏览
  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.   <link rel="stylesheet" href="css/0208.css">
  8.   <title>Document</title>
  9. </head>
  10. <body>
  11.   <div class="new">
  12.     <h3>最新课程</h3>
  13.     <a href="">更多>></a>
  14.   </div>
  15.   <div class="course">  
  16.    <li class="item">
  17.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  18.   <div class="text">
  19.       <span>中级</span>
  20.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  21.   </div>  
  22.     <div class="detail">
  23.       <span>1177次学习</span>
  24.        <span>收藏</span>
  25.     </div>    
  26.    </li>
  27.    <li class="item">
  28.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  29.   <div class="text">
  30.       <span>中级</span>
  31.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  32.   </div>  
  33.     <div class="detail">
  34.       <span>1177次学习</span>
  35.        <span>收藏</span>
  36.     </div>    
  37.    </li>
  38.    <li class="item">
  39.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  40.   <div class="text">
  41.       <span>中级</span>
  42.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  43.   </div>  
  44.     <div class="detail">
  45.       <span>1177次学习</span>
  46.        <span>收藏</span>
  47.     </div>    
  48.    </li>
  49.    <li class="item">
  50.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  51.   <div class="text">
  52.       <span>中级</span>
  53.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  54.   </div>  
  55.     <div class="detail">
  56.       <span>1177次学习</span>
  57.        <span>收藏</span>
  58.     </div>    
  59.    </li>
  60.    <li class="item">
  61.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  62.   <div class="text">
  63.       <span>中级</span>
  64.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  65.   </div>  
  66.     <div class="detail">
  67.       <span>1177次学习</span>
  68.        <span>收藏</span>
  69.     </div>    
  70.    </li>
  71.    <li class="item">
  72.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  73.   <div class="text">
  74.       <span>中级</span>
  75.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  76.   </div>  
  77.     <div class="detail">
  78.       <span>1177次学习</span>
  79.        <span>收藏</span>
  80.     </div>    
  81.    </li>
  82.    <li class="item">
  83.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  84.   <div class="text">
  85.       <span>中级</span>
  86.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  87.   </div>  
  88.     <div class="detail">
  89.       <span>1177次学习</span>
  90.        <span>收藏</span>
  91.     </div>    
  92.    </li>
  93.    <li class="item">
  94.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  95.   <div class="text">
  96.       <span>中级</span>
  97.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  98.   </div>  
  99.     <div class="detail">
  100.       <span>1177次学习</span>
  101.        <span>收藏</span>
  102.     </div>    
  103.    </li>
  104.    <li class="item">
  105.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  106.   <div class="text">
  107.       <span>中级</span>
  108.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  109.   </div>  
  110.     <div class="detail">
  111.       <span>1177次学习</span>
  112.        <span>收藏</span>
  113.     </div>    
  114.    </li>
  115.    <li class="item">
  116.     <a href=""><img src="https://img.php.cn/upload/course/000/000/068/63e202276944f543.jpg" alt=""></a>
  117.   <div class="text">
  118.       <span>中级</span>
  119.       <a href="">PHP入门速学（台湾同胞）我来了我来也我来也我来也</a>
  120.   </div>  
  121.     <div class="detail">
  122.       <span>1177次学习</span>
  123.        <span>收藏</span>
  124.     </div>    
  125.    </li>
  126.   </div>
  127. </body>
  128. </html>
  130. * {
  131.     margin: 0;
  132.     padding: 0;
  133.     box-sizing: border-box;
  134. }
  135. html {
  136.     font-size: 0.625rem;
  137. }
  138. body {
  139.     width: 1200px;
  140.     height: 580px;
  141.     border: 1px solid red;
  143. }
  144. div.new {
  145.     display: flex;
  146.     flex-flow: row nowrap;
  147.     place-content: space-between;
  148.     place-items: center ;
  149.     height: 50px;
  150. }
  151. div.new > h3 {
  152.     font-size: 2.2rem;
  153.     flex:10px;
  154. }
  155. div.new > a {
  156.     font-size: 1.8rem;
  157. }
  158. div.course {
  159.     display: grid;
  160.     height: 53rem;
  161.     grid-template-columns: repeat(5, 1fr);
  162.     grid-template-rows: repeat(2, 1fr);
  163.     gap: 20px;
  164.     place-items:stretch;
  165.     place-self:center;
  166. }
  167. div.course > li {
  168.     list-style:none;
  169. }
  171. div.course > li.item > a img {
  172.     width: 224px;
  173.     height: 160px;
  174.     border-radius: 6px 6px 0px 0px;
  175. }
  176. div.course > li > div.text {
  177.     display:flex;
  178.     margin: 18px;
  179. }
  181. div.course > li >div.text > span {
  182.     font-size:1.1rem;
  183.     width: 32px;
  184.     height: 20px;
  185.     background-color: #FCE7E0;
  186.     color: #FD4029;
  187.     text-align: center;
  188. }
  189. div.course > li >div.text > a {
  190.         margin-left: 10px;
  191.         width: 140px;
  193. }
  194. div.course > li > div.detail {
  195.     display:flex;
  196.     place-content: space-between;
  197.     margin-left:18px;
  198.     margin-right:18px;
  200. }

上一条：仿写手淘首页页脚与主体下一条：绝对定位与固定定位和flex必会的容器与项目属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议