search

博客列表 >学习仿做PHP中文网主页

学习仿做PHP中文网主页

华宥为
华宥为原创
2021年01月03日 20:14:04694浏览

学习仿做PHP中文网主页

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>学习仿作PHP中文网</title>
  7.     <link rel="stylesheet" href="/0101/php.css" />
  8.   </head>
  9.   <body>
  10.     <!-- 页眉 -->
  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="">首页</a></li>
  18.           <li><a href="">视频教程</a></li>
  19.           <li><a href="">入门教程</a></li>
  20.           <li><a href="">社区问答</a></li>
  21.           <li><a href="">技术文章</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培训</a></li>
  27.           <li></li>
  28.         </ul>
  29.       </div>
  30.     </header>
  32.     <div class="main-top">
  33.       <!-- 侧边菜单 -->
  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="">独孤九贱</a></li>
  42.         <li><a href="">学习路线</a></li>
  43.         <li><a href="">在线工具</a></li>
  44.         <li><a href="">趣味课堂</a></li>
  45.         <li><a href="">社区问答</a></li>
  46.         <li><a href="">课程直播</a></li>
  48.         <li><input type="text" placeholder="输入关键字" /></li>
  49.       </ul>
  50.       <div class="slider">
  51.         <!-- 轮播图 -->
  52.         <a href=""><img src="/0101/picture/61.jpg" alt="" /></a>
  53.       </div>
  54.       <!-- 课程推荐区 -->
  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.     <!-- 课程列表区 -->
  74.     <div class="main-coures">
  75.       <h3>&lt;\&gt;php入门精品课程&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.     <!-- 页脚 -->
  122.     <footer>页脚</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. /* 左侧导航区 */
  60. .main-top > nav.menus {
  61.   grid-area: span 3;
  62.   background-color: lightgreen;
  63.   border-radius: 10px 0 0 10px;
  64. }
  65. /* 左侧导航区附一张图片代替 */
  66. .main-top > nav.menus > a > img {
  67.   width: 100%;
  68.   height: 100%;
  69.   border-radius: 10px 0 0 10px;
  70. }
  72. /* 顶部的导航区 */
  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. /* 轮播图已经自动归位了 */
  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. }
上一条：CSS的样式与内联框下一条：尝试仿作“京东商城”手机网站
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多