亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 8
粉絲 0
評論 0
訪問量 12096
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
grid布局仿照php中文網(wǎng)的一個模塊
努力努力再努力
原創(chuàng)
903人瀏覽過
仿照的結(jié)果圖

仿照的代碼為
  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>Document</title>
  7.     <style>
  8.       * {
  9.         margin: 0px;
  10.         padding: 0px;
  11.         box-sizing: border-box;
  12.       }
  14.       .course {
  15.         width: 1200px;
  16.         height: 647px;
  17.         margin: 10px auto;
  18.       }
  20.       /* 設(shè)置標題 */
  21.       .course > .course-title {
  22.         font-size: 1.2rem;
  23.         width: 1185px;
  24.         line-height: 30px;
  25.         text-align: center;
  26.         margin: 20px;
  27.       }
  29.       /* 設(shè)置gride布局  已將設(shè)置寬度了 直接設(shè)置高度即可*/
  30.       .course > .contariner {
  31.         height: 567px;
  32.         display: grid;
  34.         grid-template-columns: repeat(5, 1fr);
  35.         grid-template-rows: repeat(3, 1fr);
  36.       }
  38.       /* 設(shè)置每個的項目在單元格的位置以及大小 */
  39.       .course > .contariner > .course-list {
  40.         width: 217px;
  41.         height: 172px;
  42.         box-shadow: 0 0 10px #555;
  43.         /* 設(shè)置項目垂直居上 水平居中 */
  44.         place-self: start center;
  45.         border-radius: 5%;
  46.         position: relative;
  47.         /* 隱藏p標簽描述的文字超出問題 */
  48.         overflow: hidden;
  49.       }
  51.       .course > .contariner > .course-list:first-of-type {
  52.         grid-row: span 2;
  53.         height: 364px;
  54.       }
  56.       .course > .contariner > .course-list img {
  57.         /* 圓角 */
  58.         width: 100%;
  59.         border-radius: 5%;
  60.       }
  62.       /* 去掉下劃線 */
  63.       .course > .contariner > .course-list > a {
  64.         text-decoration: none;
  65.         cursor: pointer;
  66.       }
  68.       /* 設(shè)置播放量  添加背景是為了隱藏與播放次數(shù)之間的文字*/
  69.       .course > .contariner > .course-list .num {
  70.         position: absolute;
  71.         width: 100%;
  72.         height: 42px;
  73.         padding: 0 20px;
  74.         bottom: 0px;
  75.         color: #93999f;
  76.         font-size: 12px;
  77.         line-height: 36px;
  78.         background-color: #fff;
  79.         border-radius: 8px;
  80.       }
  82.       /* 設(shè)置圖片標題 */
  83.       .course > .contariner > .course-list .desc {
  84.         height: 40px;
  85.         font-size: 12px;
  86.         color: #656;
  87.         line-height: 21px;
  88.         padding: 16px 17px 6px;
  89.         position: relative;
  90.         top: -35px;
  91.         border-radius: 8px;
  92.         background-color: #fff;
  93.       }
  95.       /* 設(shè)置過度 */
  96.       .course > .contariner > .course-list > a > .desc:hover {
  97.         height: 130px;
  98.         margin-top: -60px;
  99.         transition: 0.5s;
  100.       }
  101.       .course > .contariner > .course-list .desc span {
  102.         padding: 2px;
  103.         margin-right: 4px;
  104.         margin-top: 2px;
  105.         font-size: 12px;
  106.         color: #fff;
  107.         line-height: 12px;
  108.         border-radius: 1px;
  109.         background-color: #93999f;
  110.       }
  112.       .course > .contariner > .course-list .desc p {
  113.         margin-top: 5px;
  114.       }
  115.     </style>
  116.   </head>
  117.   <body>
  118.     <div class="course">
  119.       <div class="course-title">php入門精品課程</div>
  120.       <div class="contariner">
  121.         <div class="course-list"><img src="./images/1.jpg" alt="" /></div>
  122.         <div class="course-list">
  123.           <a href="">
  124.             <img src="./images/2.jpg" alt="" />
  125.             <div class="desc">
  126.               <h3><span>初級</span>編程學(xué)習(xí)方法分享直播公益課</h3>
  127.             </div>
  128.             <div class="num">1w+次播放</div>
  129.           </a>
  130.         </div>
  131.         <div class="course-list">
  132.           <a href="">
  133.             <img src="./images/3.jpg" alt="" />
  134.             <div class="desc">
  135.               <h3><span>初級</span>編程學(xué)習(xí)方法分享直播公益課</h3>
  136.             </div>
  137.             <div class="num">18w+次播放</div>
  138.           </a>
  139.         </div>
  140.         <div class="course-list">
  141.           <a href="">
  142.             <img src="./images/4.jpg" alt="" />
  143.             <div class="desc">
  144.               <h3><span>初級</span>CSS視頻教程-玉女心經(jīng)版</h3>
  145.               <p>
  146.                     本章節(jié)講解的是有關(guān)CSS基礎(chǔ)的內(nèi)容，輕松明快，適合新手觀看學(xué)習(xí)。
  147.               </p>
  148.             </div>
  149.             <div class="num">10w+次播放</div>
  150.           </a>
  151.         </div>
  152.         <div class="course-list">
  153.           <a href="">
  154.             <img src="./images/5.jpg" alt="" />
  155.             <div class="desc">
  156.               <h3><span>初級</span>JavaScript極速入門_玉女心經(jīng)系列</h3>
  157.             </div>
  158.             <div class="num">18w+次播放</div>
  159.           </a>
  160.         </div>
  161.         <div class="course-list">
  162.           <a href="">
  163.             <img src="./images/6.jpg" alt="" />
  164.             <div class="desc">
  165.               <h3><span>中級</span>獨孤九賤(6)_jQuery視頻教程</h3>
  166.             </div>
  167.             <div class="num">12w+次播放</div>
  168.           </a>
  169.         </div>
  170.         <div class="course-list">
  171.           <a href="">
  172.             <img src="./images/7.jpg" alt="" />
  173.             <div class="desc">
  174.               <h3><span>初級</span>30分鐘學(xué)會網(wǎng)站布局</h3>
  175.             </div>
  176.             <div class="num">6w+次播放</div>
  177.           </a>
  178.         </div>
  179.         <div class="course-list">
  180.           <a href="">
  181.             <img src="./images/8.jpg" alt="" />
  182.             <div class="desc">
  183.               <h3><span>初級</span>[公益直播]Web前端開發(fā)極速入門</h3>
  184.             </div>
  185.             <div class="num">5w+次播放</div>
  186.           </a>
  187.         </div>
  188.         <div class="course-list">
  189.           <a href="">
  190.             <img src="./images/9.jpg" alt="" />
  191.             <div class="desc">
  192.               <h3><span>初級</span>phpStudy極速入門視頻教程</h3>
  193.             </div>
  194.             <div class="num">40w+次播放</div>
  195.           </a>
  196.         </div>
  197.         <div class="course-list">
  198.           <a href="">
  199.             <img src="./images/10.jpg" alt="" />
  200.             <div class="desc">
  201.               <h3><span>中級</span>ThinkPHP6.0極速入門(視頻教程)</h3>
  202.             </div>
  203.             <div class="num">4w+次播放</div>
  204.           </a>
  205.         </div>
  206.         <div class="course-list">
  207.           <a href="">
  208.             <img src="./images/11.jpg" alt="" />
  209.             <div class="desc">
  210.               <h3><span>中級</span>獨孤九賤(4)_PHP視頻教程</h3>
  211.             </div>
  212.             <div class="num">40w+次播放</div>
  213.           </a>
  214.         </div>
  215.         <div class="course-list">
  216.           <a href="">
  217.             <img src="./images/12.jpg" alt="" />
  218.             <div class="desc">
  219.               <h3><span>初級</span>php完全自學(xué)手冊</h3>
  220.             </div>
  221.             <div class="num">20w+次播放</div>
  222.           </a>
  223.         </div>
  224.         <div class="course-list">
  225.           <a href="">
  226.             <img src="./images/13.jpg" alt="" />
  227.             <div class="desc">
  228.               <h3><span>初級</span>MySQL權(quán)威開發(fā)指南（教程）</h3>
  229.             </div>
  230.             <div class="num">2w+次播放</div>
  231.           </a>
  232.         </div>
  233.         <div class="course-list">
  234.           <a href="">
  235.             <img src="./images/14.jpg" alt="" />
  236.             <div class="desc">
  237.               <h3><span>中級</span>[公益直播]PHP實戰(zhàn)開發(fā)極速入門</h3>
  238.             </div>
  239.             <div class="num">3w+次播放</div>
  240.           </a>
  241.         </div>
  242.       </div>
  243.     </div>
  244.   </body>
  245. </html>
批改老師：GuanhuiGuanhui

批改狀態(tài)：合格

老師批語：課程的陰影可以調(diào)整一下，陰影太過深了！
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)