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

搜索
博主信息
博文 13
粉絲 0
評(píng)論 2
訪問(wèn)量 18372
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
學(xué)習(xí)仿做PHP中文網(wǎng)主頁(yè)
華宥為
原創(chuàng)
911人瀏覽過(guò)

學(xué)習(xí)仿做PHP中文網(wǎng)主頁(yè)

HTML部分

  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>學(xué)習(xí)仿作PHP中文網(wǎng)</title>
  7.     <link rel="stylesheet" href="/0101/php.css" />
  8.   </head>
  9.   <body>
  10.     <!-- 頁(yè)眉 -->
  11.     <header>
  12.       <div class="headernavs">
  13.         <ul class="navs">
  14.           <li>
  15.             <a href=""><img src="/0101/images/1.png" alt="" /></a>
  16.           </li>
  17.           <li><a href="">首頁(yè)</a></li>
  18.           <li><a href="">視頻教程</a></li>
  19.           <li><a href="">入門(mén)教程</a></li>
  20.           <li><a href="">社區(qū)問(wèn)答</a></li>
  21.           <li><a href="">技術(shù)文章</a></li>
  22.           <li><a href="">資源下載</a></li>
  23.           <li><a href="">編程詞典</a></li>
  24.           <li><a href="">工具下載</a></li>
  25.           <li><a href="">PHP培訓(xùn)</a></li>
  27.           <li></li>
  28.         </ul>
  29.       </div>
  30.     </header>
  32.     <div class="main-top">
  33.       <!-- 側(cè)邊菜單 -->
  34.       <nav class="menus">
  35.         <a href=""><img src="/0101/images/cbl.png" alt="" /></a>
  36.       </nav>
  38.       <!-- 頂部菜單 -->
  39.       <ul class="navs">
  40.         <li><a href="">PHP頭條</a></li>
  41.         <li><a href="">獨(dú)孤九賤</a></li>
  42.         <li><a href="">學(xué)習(xí)路線</a></li>
  43.         <li><a href="">在線工具</a></li>
  44.         <li><a href="">趣味課堂</a></li>
  45.         <li><a href="">社區(qū)問(wèn)答</a></li>
  46.         <li><a href="">課程直播</a></li>
  48.         <li><input type="text" placeholder="輸入關(guān)鍵字" /></li>
  49.       </ul>
  50.       <div class="slider">
  51.         <!-- 輪播圖 -->
  52.         <a href=""><img src="/0101/picture/61.jpg" alt="" /></a>
  53.       </div>
  54.       <!-- 課程推薦區(qū) -->
  55.       <ul class="course">
  56.         <li>
  57.           <a href=""><img src="/0101/picture/99.jpg" alt="" /></a>
  58.         </li>
  59.         <li>
  60.           <a href=""><img src="/0101/picture/98.jpg" alt="" /></a>
  61.         </li>
  62.         <li>
  63.           <a href=""><img src="/0101/picture/97.jpg" alt="" /></a>
  64.         </li>
  65.         <li>
  66.           <a href=""><img src="/0101/picture/96.jpg" alt="" /></a>
  67.         </li>
  68.       </ul>
  69.     </div>
  70.     <div class="main-min">
  71.       <a href=""><img src="/0101/picture/69.jpg" alt="" /></a>
  72.     </div>
  73.     <!-- 課程列表區(qū) -->
  74.     <div class="main-coures">
  75.       <h3>&lt;\&gt;php入門(mén)精品課程&lt;\&gt;</h3>
  76.       <ul class="coures-list">
  77.         <li>
  78.           <a href=""><img src="/0101/picture/1342.jpg" alt="" /></a>
  79.         </li>
  80.         <li>
  81.           <a href=""><img src="/0101/picture/100.jpg" alt="" /></a>
  82.         </li>
  83.         <li>
  84.           <a href=""><img src="/0101/picture/101.jpg" alt="" /></a>
  85.         </li>
  86.         <li>
  87.           <a href=""><img src="/0101/picture/102.jpg" alt="" /></a>
  88.         </li>
  89.         <li>
  90.           <a href=""><img src="/0101/picture/103.jpg" alt="" /></a>
  91.         </li>
  92.         <li>
  93.           <a href=""><img src="/0101/picture/104.jpg" alt="" /></a>
  94.         </li>
  95.         <li>
  96.           <a href=""><img src="/0101/picture/105.jpg" alt="" /></a>
  97.         </li>
  98.         <li>
  99.           <a href=""><img src="/0101/picture/107.jpg" alt="" /></a>
  100.         </li>
  101.         <li>
  102.           <a href=""><img src="/0101/picture/108.jpg" alt="" /></a>
  103.         </li>
  104.         <li>
  105.           <a href=""><img src="/0101/picture/109.jpg" alt="" /></a>
  106.         </li>
  107.         <li>
  108.           <a href=""><img src="/0101/picture/110.jpg" alt="" /></a>
  109.         </li>
  110.         <li>
  111.           <a href=""><img src="/0101/picture/111.jpg" alt="" /></a>
  112.         </li>
  113.         <li>
  114.           <a href=""><img src="/0101/picture/112.jpg" alt="" /></a>
  115.         </li>
  116.         <li>
  117.           <a href=""><img src="/0101/picture/113.jpg" alt="" /></a>
  118.         </li>
  119.       </ul>
  120.     </div>
  121.     <!-- 頁(yè)腳 -->
  122.     <footer>頁(yè)腳</footer>
  123.   </body>
  124. </html>

css部分

  • php.css
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. li {
  8.   list-style: none;
  9. }
  11. a {
  12.   color: #444444;
  13.   text-decoration: none;
  14. }
  16. header {
  17.   height: 80px;
  18.   background-color: lightskyblue;
  19.   margin-bottom: 30px;
  20. }
  21. .headernavs > ul.navs {
  22.   display: grid;
  23.   grid-template-columns: 160px repeat(10, 130px) 1fr;
  24.   place-items: center;
  25. }
  27. footer {
  28.   height: 60px;
  29.   color: #eee;
  30.   background-color: #444;
  31. }
  33. /* --------------------------------- */
  35. .main-top {
  36.   height: 550px;
  37.   width: 1200px;
  38.   margin-bottom: 30px;
  39.   /* background-color: #ccc; */
  41.   display: grid;
  42.   grid-template-columns: 216px 1fr;
  43.   grid-template-rows: 60px 1fr 155px;
  44.   margin: auto;
  45. }
  46. .main-min > a > img {
  47.   width: 1200px;
  48.   height: 80px;
  49.   margin-bottom: 30px;
  50.   background-color: brown;
  52.   display: grid;
  53.   grid-template-columns: 1fr;
  54.   grid-template-rows: 1fr;
  55.   margin: 30px auto;
  56.   border-radius: 10px;
  57. }
  59. /* 左側(cè)導(dǎo)航區(qū) */
  60. .main-top > nav.menus {
  61.   grid-area: span 3;
  62.   background-color: lightgreen;
  63.   border-radius: 10px 0 0 10px;
  64. }
  65. /* 左側(cè)導(dǎo)航區(qū)附一張圖片代替 */
  66. .main-top > nav.menus > a > img {
  67.   width: 100%;
  68.   height: 100%;
  69.   border-radius: 10px 0 0 10px;
  70. }
  72. /* 頂部的導(dǎo)航區(qū) */
  73. .main-top > ul.navs {
  74.   background-color: lightcyan;
  75.   display: grid;
  76.   grid-template-columns: repeat(8, 103px) 1fr;
  77.   place-items: center;
  78.   border-radius: 0 10px 0 0;
  79. }
  81. .main-top > ul.navs > li:last-of-type {
  82.   place-self: center start;
  83.   padding-left: 80px;
  84. }
  86. /* 輪播圖已經(jīng)自動(dòng)歸位了 */
  87. .main-top > ul.course {
  88.   background-color: wheat;
  89.   padding: 10px;
  90.   display: grid;
  91.   grid-template-columns: repeat(4, 1fr);
  92.   gap: 10px;
  93.   border-radius: 0 0 10px 0;
  94. }
  95. .main-top > ul.course > *:hover {
  96.   background-color: pink;
  97.   cursor: pointer;
  98.   transition: 1s;
  99. }
  101. .main-top .slider {
  102.   background-color: #cccc;
  103. }
  104. .main-top .slider > a > img {
  105.   height: 100%;
  106.   width: 100%;
  107. }
  108. .main-top > ul.course > * {
  109.   background-color: violet;
  110.   cursor: pointer;
  111.   border-radius: 5px;
  112. }
  113. .main-top > ul.course > li > a > img {
  114.   height: 100%;
  115.   width: 100%;
  116.   cursor: pointer;
  117.   border-radius: 5px;
  118. }
  120. /* ------------------------------ */
  122. .main-coures {
  123.   width: 1200px;
  124.   height: 646px;
  126.   padding: 15px;
  127.   background-color: lightskyblue;
  128.   margin: 30px auto;
  129.   display: grid;
  130.   grid-template-rows: 50px 1fr;
  131.   gap: 20px;
  133.   border-radius: 10px;
  134. }
  136. .main-coures h3 {
  137.   color: #444444;
  138.   text-align: center;
  139.   /* margin-bottom: 30px; */
  140. }
  142. .main-coures .coures-list {
  143.   display: grid;
  144.   grid-template-columns: repeat(5, 1fr);
  145.   grid-template-rows: repeat(3, 1fr);
  146.   /* grid-template-columns: repeat(auto-fit,minmax(15em,1fr)); */
  147.   /* grid-template-rows: repeat(auto-fit,minmax(13em,70%)); */
  148.   gap: 10px;
  149. }
  151. .main-coures .coures-list > * {
  152.   background-color: lightcyan;
  153.   border-radius: 10px;
  154. }
  155. .main-coures .coures-list > li > a > img {
  156.   width: 100%;
  157. }
  159. .main-coures .coures-list > li:first-of-type {
  160.   grid-area: span 2;
  161. }
批改老師：天蓬老師天蓬老師

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

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

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

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