仿PHP中文网页面布局

html代码：

  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="static/css/reset.css" />
  8.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3269118_mgnsjoz5gtp.css" />
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3280624_aealr8wo2wk.css" />
  10.     <link rel="stylesheet" href="static/css/header.css" />
  11.     <link rel="stylesheet" href="static/css/main-nav.css" />
  12.     <title>仿php.cn中文网首页差头部</title>
  13.   </head>
  15.   <body>
  16.     <!-- 页眉 -->
  17.     <header>
  18.       <!-- 1 顶部 -->
  19.       <div class="top">
  20.         <div class="content">
  21.           <div class="title">php中文网,程序员梦开始的地方!</div>
  22.           <div class="right">
  23.             <a href="" class="iconfont icon-tixing"></a>
  24.             <a href=""><img src="static/images/user-pic.jpeg" alt="" /></a>
  25.           </div>
  26.         </div>
  27.       </div>
  29.       <!-- 2 导航 -->
  30.       <div class="navs">
  31.         <div class="content">
  32.           <a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
  33.           <nav>
  34.             <a href="" class="active">首页</a>
  35.             <a href="">视频教程</a>
  36.             <a href="">学习路径</a>
  37.             <a href="">php培训</a>
  38.             <a href="">资源下载</a>
  39.           </nav>
  40.           <div class="search">
  41.             <input type="search" placeholder="输入关键字搜索" />
  42.             <span class="iconfont icon-fangdajing fdj"></span>
  43.           </div>
  44.         </div>
  45.       </div>
  46.     </header>
  48.     <!-- 主体 -->
  49.     <main>
  50.       <div class="navs">
  51.         <!-- 2行3列 -->
  53.         <div class="left">
  54.           <a href="">php开发</a>
  55.           <a href="">大前端</a>
  56.           <a href="">后端开发</a>
  57.           <a href="">数据库</a>
  58.           <a href="">移动端</a>
  59.           <a href="">运维开发</a>
  60.           <a href="">UI设计</a>
  61.           <a href="">计算机基础</a>
  62.         </div>
  64.         <div class="slider">
  65.           <a href="">
  66.             <img src="static/images/slider.jpeg" alt="" />
  67.           </a>
  68.         </div>
  70.         <div class="right">
  71.           <div class="phpTbxxTitle2">
  72.             <div class="phpTbxxCont2">
  73.               <img src="/static/images/user_avatar.jpg" alt="头像" />
  74.               <dl>
  75.                 <dt>
  76.                   <a href="">土老帽</a>
  77.                 </dt>
  78.                 <dd>P豆：14.00</dd>
  79.               </dl>
  80.             </div>
  81.             <div class="phpTbxxXue">
  82.               <a href="#" target="_blank" title="我的学习">我的学习</a>
  83.             </div>
  84.           </div>
  85.           <div class="phpWenda">
  86.             <p class="cont1">
  87.               <span>问答社区</span>
  88.               <a href="">答疑</a>
  89.             </p>
  90.             <p class="cont2">
  91.               <span>头条</span>
  92.               <a href="">头条内容</a>
  93.             </p>
  94.             <p class="cont3">
  95.               <span>新课</span>
  96.               <a href="">3.9号公益直播课</a>
  97.             </p>
  98.             <p class="cont4">
  99.               <span>新班</span>
  100.               <a href="">19期PHP直播课</a>
  101.             </p>
  102.             <p class="cont5">
  103.               <span>招募</span>
  104.               <a href="">课程合作计划</a>
  105.             </p>
  106.             <p class="cont6">
  107.               <span>公告</span>
  108.               <a href="">APP上线啦</a>
  109.             </p>
  110.           </div>
  111.         </div>
  113.         <div class="bottom-left">
  114.           <!-- 学习路径  -->
  115.           <div class="desc">
  116.             <div class="title">学习路径</div>
  117.             <span>全部7个&gt;</span>
  118.           </div>
  119.           <ul class="detail">
  120.             <li onclick="">
  121.               <img src="static/images//dgjj.png" alt="" />
  122.               <a href="">独孤九贱</a>
  123.               <span>9门课程</span>
  124.             </li>
  125.             <li onclick="">
  126.               <img src="static/images//ynxj.png" alt="" />
  127.               <a href="">玉女心经</a>
  128.               <span>9门课程</span>
  129.             </li>
  130.             <li onclick="">
  131.               <img src="static/images//tlbb.png" alt="" />
  132.               <a href="">天龙八部</a>
  133.               <span>9门课程</span>
  134.             </li>
  135.             <li onclick="">
  136.               <img src="static/images//phpkjkf.png" alt="" />
  137.               <a href="">自学指南</a>
  138.               <span>9门课程</span>
  139.             </li>
  140.             <li onclick="">
  141.               <img src="static/images//phpksrm.png" alt="" />
  142.               <a href="">趣味闯关</a>
  143.               <span>9门课程</span>
  144.             </li>
  145.           </ul>
  146.         </div>
  147.         <div class="bottom-right">
  148.           <ul class="phpXxljMenu">
  149.             <li onclick="">
  150.               <a class="iconfont icon-logo-wechat wx" href=""></a>
  151.               <a href="">官方公众号</a>
  152.             </li>
  153.           </ul>
  154.           <ul class="aBlack">
  155.             <li onclick="">
  156.               <a class="iconfont icon-QQ-circle-fill qq" href=""></a>
  157.               <a href="">官方QQ群</a>
  158.             </li>
  159.           </ul>
  160.         </div>
  161.       </div>
  162.     </main>
  163.   </body>
  164. </html>

css代码

reset.css

  1. /* 页面元素样式初始化 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. a {
  10.     text-decoration: none;
  11.     color: #555;
  12. }
  14. body {
  15.     background-color: rgb(243, 245, 247);
  16. }
  18. li {
  19.     list-style: none;
  20. }

header.css

  1. header .top {
  2.   width: 100vw;
  3.   height: 40px;
  4.   background-color: rgb(52, 52, 52);
  5.   color: #aaa;
  6. }
  8. header .top .content img {
  9.   width: 50%;
  10.   border-radius: 50%;
  11. }
  13. header .top .content {
  14.   width: 1200px;
  15.   display: grid;
  16.   grid-template-columns: 400px 100px;
  17.   grid-auto-rows: 40px;
  18.   place-content: space-between;
  19.   place-items: center start;
  20.   margin: auto;
  21. }
  23. header .top .content .right .iconfont {
  24.   color: #eee;
  25.   font-size: larger;
  26. }
  28. header .top .content .right {
  29.   display: grid;
  30.   grid-template-columns: repeat(2, 1fr);
  31.   place-items: center;
  32. }
  34. /* 导航 */
  36. header .navs {
  37.   width: 100vw;
  38.   height: 90px;
  39.   background-color: #fff;
  40. }
  42. header .navs .content {
  43.   width: 1200px;
  44.   /* border: 1px solid #000; */
  45.   display: grid;
  46.   grid-template-columns: 140px 1fr 200px;
  47.   grid-auto-rows: 90px;
  48.   gap: 10px;
  49.   margin: auto;
  50.   place-items: center start;
  51. }
  53. header .navs .content img {
  54.   width: 100%;
  55. }
  57. header .navs .content nav a.active,
  58. header .navs .content nav a:hover {
  59.   color: red;
  60.   font-weight: bold;
  61. }
  63. header .navs .content .search {
  64.   display: flex;
  65. }
  67. header .navs .content nav a {
  68.   padding: 0 10px;
  69. }
  71. header .navs .content .search input[type="search"] {
  72.   width: 200px;
  73.   height: 36px;
  74.   border: none;
  75.   outline: none;
  76.   background-color: #f7f8fa;
  77.   border-radius: 20px;
  78.   padding-left: 10px;
  79. }
  81. header .navs .content .search .fdj {
  82.   font-size: 22px;
  83.   color: #ccc;
  84.   position: relative;
  85.   left: -40px;
  86.   top: 5px;
  87. }
  89. `

main-nav.css

  1. main {
  2.   font-size: 14px;
  3. }
  5. main .navs {
  6.   /* 2行3列 */
  7.   display: grid;
  8.   grid-template-columns: 160px 810px 190px;
  9.   grid-template-rows: 400px 80px;
  10.   gap: 20px;
  11.   place-content: center;
  12.   margin: 30px 0;
  13. }
  15. main .navs > * {
  16.   background-color: #fff;
  17.   border-radius: 20px;
  18.   /* outline: 1px solid red; */
  19. }
  21. /* 底部左侧占2列 */
  23. main .navs .bottom-left {
  24.   grid-column: span 2;
  25. }
  27. main .navs .slider img {
  28.   width: 100%;
  29.   border-radius: 20px;
  30. }
  32. /* 左侧导航 */
  34. main .navs .left {
  35.   display: grid;
  36.   place-items: center;
  37.   padding: 20px 0;
  38. }
  40. main .navs .left a:hover {
  41.   color: red;
  42.   background-color: rgb(250, 223, 227);
  43. }
  45. main .navs .left a {
  46.   border-radius: 20px;
  47.   padding: 10px 20px;
  48. }
  50. /* 底部左侧 */
  52. main .navs .bottom-left {
  53.   display: grid;
  54.   grid-template-columns: 100px 1fr;
  55. }
  57. main .navs .bottom-left .desc {
  58.   display: grid;
  59.   place-items: center;
  60.   padding: 16px;
  61. }
  63. main .navs .bottom-left .detail img {
  64.   width: 100%;
  65.   grid-row: span 2;
  66. }
  68. main .navs .bottom-left .detail {
  69.   display: flex;
  70.   place-items: center;
  71.   place-content: space-between;
  72. }
  74. main .navs .bottom-left .detail li {
  75.   display: grid;
  76.   grid-template-columns: 36px 85px;
  77.   gap: 0 10px;
  78.   place-items: center start;
  79. }
  81. main .navs .bottom-left .detail li a {
  82.   font-size: 14px;
  83. }
  85. main .navs .bottom-left .detail li a:hover {
  86.   color: red;
  87. }
  89. main .navs .bottom-left .detail li span,
  90. main .navs .bottom-left .desc span {
  91.   font-size: 12px;
  92.   color: #999;
  93. }
  95. main .navs .bottom-right .phpXxljMenu .iconfont,
  96. main .navs .bottom-right .aBlack .iconfont {
  97.   font-size: 3em;
  98. }
  100. main .navs .bottom-right {
  101.   width: 190px;
  102. }
  104. main .navs .bottom-right li {
  105.   float: left;
  106.   width: 70px;
  107.   margin-top: 13px;
  108.   margin-left: 20px;
  109.   display: inline-block;
  110.   text-align: center;
  111. }
  113. main .navs .bottom-right li a {
  114.   display: inline-block;
  115.   text-align: center;
  116. }
  118. main .navs .right .phpTbxxTitle2 {
  119.   width: 190px;
  120.   height: 141px;
  121.   border-bottom: 1px solid #eeeeee;
  122. }
  124. main .navs .right .phpTbxxCont2 {
  125.   width: 155px;
  126.   margin: auto;
  127. }
  129. main .navs .right .phpTbxxTitle2 img {
  130.   float: left;
  131.   width: 40px;
  132.   height: 40px;
  133.   border-radius: 100px;
  134.   display: block;
  135.   margin-top: 20px;
  136. }
  138. main .navs .right .phpTbxxTitle2 dl {
  139.   float: right;
  140.   width: 105px;
  141.   margin-top: 15px;
  142. }
  144. main .navs .right .phpTbxxTitle2 dd {
  145.   height: 16px;
  146.   line-height: 16px;
  147.   overflow: hidden;
  148.   font-size: 12px;
  149.   color: #999999;
  150.   margin-top: 10px;
  151. }
  153. main .navs .right .phpTbxxTitle2 .phpTbxxXue {
  154.   display: block;
  155.   width: 150px;
  156.   height: 34px;
  157.   background: #f11717;
  158.   border-radius: 100px;
  159.   line-height: 34px;
  160.   text-align: center;
  161.   color: #ffffff;
  162.   text-decoration: none;
  163.   overflow: hidden;
  164.   margin-top: 20px;
  165.   margin-left: 20px;
  166. }
  168. main .navs .right .phpWenda {
  169.   width: 150px;
  170.   margin: auto;
  171.   padding-top: 7px;
  172. }
  173. main .navs .right .phpWenda p {
  174.   height: 18px;
  175.   line-height: 18px;
  176.   overflow: hidden;
  177. }
  178. main .navs .right .phpWenda .cont1 a {
  179.   display: inline-block;
  180.   width: 31px;
  181.   height: 16px;
  182.   background: #ff583d;
  183.   border-radius: 2px;
  184.   font-size: 15px;
  185.   color: #ffffff;
  186.   line-height: 16px;
  187.   text-align: center;
  188. }