1、效果

2、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.     <!-- 页面初始化css -->
  8.     <link rel="stylesheet" href="static/css/reset.css" />
  9.     <!-- 字体图标库 -->
  10.     <link
  11.       rel="stylesheet"
  12.       href="//at.alicdn.com/t/font_3269118_mgnsjoz5gtp.css"
  13.     />
  14.     <!-- 头部样式 -->
  15.     <link rel="stylesheet" href="static/css/header.css" />
  16.     <link rel="stylesheet" href="static/css/main.css" />
  17.     <link
  18.       rel="stylesheet"
  19.       href="//at.alicdn.com/t/font_3288147_wz5ppbosode.css"
  20.     />
  21.     <title>仿PHP中文网首页</title>
  22.   </head>
  23.   <body>
  24.     <!-- 页眉 -->
  25.     <header>
  26.       <!-- 顶部 -->
  27.       <div class="top">
  28.         <div class="content">
  29.           <div class="title">PHP中文网-程序员梦开始的地方！</div>
  30.           <div class="right">
  31.             <a href="" class="iconfont icon-tixing"></a>
  32.             <a href=""><img src="static/images/user-pic.jpeg" /></a>
  33.           </div>
  34.         </div>
  35.       </div>
  36.       <!-- 导航 -->
  37.       <div class="navs">
  38.         <div class="content">
  39.           <a href="" class="logo"><img src="static/images/logo.png" /></a>
  40.           <nav>
  41.             <a href="" class="active">首页</a>
  42.             <a href="">视频教程</a>
  43.             <a href="">学习路径</a>
  44.             <a href="">php培训</a>
  45.             <a href="">资源下载</a>
  46.             <a href="">技术文章</a>
  47.             <a href="">社区</a>
  48.             <a href="">APP下载</a>
  49.             <a href="">...</a>
  50.           </nav>
  51.           <div class="search">
  52.             <input type="search" placeholder="输入关键词搜索" />
  53.             <span class="iconfont icon-fangdajing fdj"></span>
  54.           </div>
  55.         </div>
  56.       </div>
  57.     </header>
  58.     <!-- 主体 -->
  59.     <main>
  60.       <div class="navs">
  61.         <!-- 2行3列 -->
  62.         <div class="left">
  63.           <a href="">php开发</a>
  64.           <a href="">大前端</a>
  65.           <a href="">后端开发</a>
  66.           <a href="">数据库</a>
  67.           <a href="">移动端</a>
  68.           <a href="">运维开发</a>
  69.           <a href="">UI设计</a>
  70.           <a href="">计算机基础</a>
  71.         </div>
  72.         <div class="slider">
  73.           <a href="">
  74.             <img src="static/images/slider.jpeg" alt="" />
  75.           </a>
  76.         </div>
  77.         <div class="right">
  78.           <div class="right-top">
  79.             <!-- 我的学习 -->
  80.             <a href=""><img src="static/images/user-pic.jpeg" /></a>
  81.             <div class="user">
  82.               <a href="">为梦兼程</a>
  83.               <br />
  84.               <dd>P豆&nbsp80.5</dd>
  85.             </div>
  87.             <a href="" class="study">我的学习</a>
  88.           </div>
  89.           <div class="right-news">
  90.             <div class="f1">
  91.               <span>问答社区</span>
  92.               <a href="">答疑</a>
  93.             </div>
  94.             <div class="f2">
  95.               <p>
  96.                 <span>头条</span>
  97.                 <a href="">中文编程出现了</a>
  98.                 <!-- <marquee direction="up" style="float: right;">UP</marquee> -->
  99.               </p>
  100.               <p>
  101.                 <span>新课</span>
  102.                 <a href="">3.9号公益直播课</a>
  103.               </p>
  104.               <p>
  105.                 <span>新班</span>
  106.                 <a href="">19期PHP直播班</a>
  107.               </p>
  108.               <p>
  109.                 <span>招募</span>
  110.                 <a href="">课程合作计划</a>
  111.               </p>
  112.               <p>
  113.                 <span>公告</span>
  114.                 <a href="">APP上线啦</a>
  115.               </p>
  116.             </div>
  117.           </div>
  118.         </div>
  119.         <div class="bottom-left">
  120.           <!-- 学习路径 -->
  121.           <div class="desc">
  122.             <div class="title">学习路径</div>
  123.             <span>全部7个&gt</span>
  124.           </div>
  125.           <ul class="detail">
  126.             <li onclick="">
  127.               <img src="static/images/dgjj.png" alt="" />
  128.               <a href="">独孤九剑</a>
  129.               <span>九门课程</span>
  130.             </li>
  131.             <li onclick="">
  132.               <img src="static/images//ynxj.png" alt="" />
  133.               <a href="">独孤九贱</a>
  134.               <span>9门课程</span>
  135.             </li>
  136.             <li onclick="">
  137.               <img src="static/images//phpkjkf.png" alt="" />
  138.               <a href="">独孤九贱</a>
  139.               <span>9门课程</span>
  140.             </li>
  141.             <li onclick="">
  142.               <img src="static/images//phpksrm.png" alt="" />
  143.               <a href="">趣味闯关</a>
  144.               <span>9门课程</span>
  145.             </li>
  146.             <li onclick="">
  147.               <img src="static/images//dgjj.png" alt="" />
  148.               <a href="">独孤九贱</a>
  149.               <span>9门课程</span>
  150.             </li>
  151.           </ul>
  152.         </div>
  153.         <div class="bottom-right">
  154.           <ul class="content">
  155.             <li>
  156.               <a href="">
  157.                 <b class="iconfont icon-weixin-copy"></b>
  158.                 <h2>官方公众号</h2>
  159.               </a>
  160.             </li>
  161.             <li>
  162.               <a href="">
  163.                 <b class="iconfont icon-QQ-circle-fill"></b>
  164.                 <h2>官方QQ群</h2>
  165.               </a>
  166.             </li>
  167.           </ul>
  168.         </div>
  169.       </div>
  170.       <div class="live-class">
  171.         <div class="title">
  172.           <h2>最新课程</h2>
  173.           <a href="">更多&gt;</a>
  174.         </div>
  175.         <ul class="list">
  176.           <li>
  177.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  178.             <dl>
  179.               <dt>
  180.                 <i>初级</i
  181.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  182.               </dt>
  183.               <dd>
  184.                 <p>1359次学习</p>
  185.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  186.               </dd>
  187.             </dl>
  188.           </li>
  189.           <li>
  190.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  191.             <dl>
  192.               <dt>
  193.                 <i>初级</i
  194.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  195.               </dt>
  196.               <dd>
  197.                 <p>1359次学习</p>
  198.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  199.               </dd>
  200.             </dl>
  201.           </li>
  202.           <li>
  203.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  204.             <dl>
  205.               <dt>
  206.                 <i>初级</i
  207.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  208.               </dt>
  209.               <dd>
  210.                 <p>1359次学习</p>
  211.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  212.               </dd>
  213.             </dl>
  214.           </li>
  215.           <li>
  216.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  217.             <dl>
  218.               <dt>
  219.                 <i>初级</i
  220.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  221.               </dt>
  222.               <dd>
  223.                 <p>1359次学习</p>
  224.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  225.               </dd>
  226.             </dl>
  227.           </li>
  228.           <li>
  229.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  230.             <dl>
  231.               <dt>
  232.                 <i>初级</i
  233.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  234.               </dt>
  235.               <dd>
  236.                 <p>1359次学习</p>
  237.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  238.               </dd>
  239.             </dl>
  240.           </li>
  241.           <li>
  242.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  243.             <dl>
  244.               <dt>
  245.                 <i>初级</i
  246.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  247.               </dt>
  248.               <dd>
  249.                 <p>1359次学习</p>
  250.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  251.               </dd>
  252.             </dl>
  253.           </li>
  254.           <li>
  255.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  256.             <dl>
  257.               <dt>
  258.                 <i>初级</i
  259.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  260.               </dt>
  261.               <dd>
  262.                 <p>1359次学习</p>
  263.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  264.               </dd>
  265.             </dl>
  266.           </li>
  267.           <li>
  268.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  269.             <dl>
  270.               <dt>
  271.                 <i>初级</i
  272.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  273.               </dt>
  274.               <dd>
  275.                 <p>1359次学习</p>
  276.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  277.               </dd>
  278.             </dl>
  279.           </li>
  280.           <li>
  281.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  282.             <dl>
  283.               <dt>
  284.                 <i>初级</i
  285.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  286.               </dt>
  287.               <dd>
  288.                 <p>1359次学习</p>
  289.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  290.               </dd>
  291.             </dl>
  292.           </li>
  293.           <li>
  294.             <a href=""><img src="static/images/liveclass1.png" alt="" /></a>
  295.             <dl>
  296.               <dt>
  297.                 <i>初级</i
  298.                 ><a href="">前端基础HTML+CSS3从入门到精通（完整版）</a>
  299.               </dt>
  300.               <dd>
  301.                 <p>1359次学习</p>
  302.                 <a href=""><b class="iconfont icon-kongwujiaoxing"></b>收藏</a>
  303.               </dd>
  304.             </dl>
  305.           </li>
  306.         </ul>
  307.       </div>
  308.     </main>
  309.   </body>
  310. </html>

3、CSS代码

初始化代码reset.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #555;
  9. }
  10. body {
  11.   background-color: rgb(243, 245, 247);
  12. }
  13. li {
  14.   list-style: none;
  15. }

头部代码header.css

  1. header .top {
  2.   width: 100vw;
  3.   height: 40px;
  4.   background-color: rgb(52, 52, 52);
  5.   color: aliceblue;
  6. }
  7. header .top .content img {
  8.   width: 50%;
  9.   /* 下面属性是正圆 */
  10.   border-radius: 50%;
  11. }
  12. header .top .content {
  13.   width: 1200px;
  14.   display: grid;
  15.   /* 两列：400px 和 100px */
  16.   grid-template-columns: 400px 100px;
  17.   /* 限制隐式网格的高度 */
  18.   grid-auto-rows: 40px;
  19.   /* 两端对齐 */
  20.   place-content: space-between;
  21.   /* 垂直居中 水平默认*/
  22.   place-items: center start;
  23.   /* 挤到两边 */
  24.   margin: auto;
  25. }
  26. header .top .content .right .iconfont {
  27.   color: aliceblue;
  28.   font-size: larger;
  29. }
  30. header .top .content .right {
  31.   display: grid;
  32.   /* 两列自适应 */
  33.   grid-template-columns: repeat(2, 1fr);
  34.   /* 垂直居中 水平默认*/
  35.   place-items: center center;
  36. }
  38. /* 导航部分 */
  39. header .navs {
  40.   width: 100vw;
  41.   height: 90px;
  42.   background-color: #fff;
  43. }
  44. header .navs .content {
  45.   width: 1200px;
  46.   display: grid;
  47.   /* 三列：140px  1fr 200px */
  48.   grid-template-columns: 140px 1fr 200px;
  49.   /* 限制隐式网格的高度 */
  50.   grid-auto-rows: 90px;
  51.   /* 间隙10px */
  52.   gap: 10px;
  53.   /* 挤到两边 */
  54.   margin: auto;
  55.   /* 项目在单元格中垂直居中、水平靠右 */
  56.   place-items: center start;
  57. }
  58. header .navs .content img {
  59.   width: 100%;
  60. }
  61. /* 首页两个字样式 */
  62. header .navs .content nav a.active,
  63. header .navs .content nav a:hover {
  64.   color: red;
  65.   font-weight: bold;
  66. }
  67. header .navs .content .search {
  68.   display: flex;
  69. }
  70. header .navs .content nav a {
  71.   padding: 0 10px;
  72. }
  73. header .navs .content .search input[type="search"] {
  74.   width: 200px;
  75.   height: 36px;
  76.   border: none;
  77.   outline: none;
  78.   background-color: #f7f8fa;
  79.   /* 输入框圆角 */
  80.   border-radius: 13%;
  81.   padding-left: 10px;
  82. }
  83. header .navs .content .search .fdj {
  84.   font-size: 22px;
  85.   color: #ccc;
  86.   position: relative;
  87.   left: -40px;
  88.   top: 7px;
  89. }

中间部分main.css

  1. main {
  2.   font-size: 14px;
  3. }
  4. main .navs {
  5.   /* 2行3列 */
  6.   display: grid;
  7.   /* 3列 */
  8.   grid-template-columns: 160px 810px 190px;
  9.   /* 2行 */
  10.   grid-template-rows: 400px 80px;
  11.   /* 列间距 */
  12.   gap: 20px;
  13.   /* 内容水平和垂直全部居中 */
  14.   place-content: center;
  15.   margin: 30px;
  16. }
  18. main .navs > * {
  19.   background-color: #fff;
  20.   border-radius: 20px;
  21. }
  22. /* 底部左侧前两列合并 */
  23. main .navs .bottom-left {
  24.   grid-column: span 2;
  25. }
  26. main .navs .slider img {
  27.   width: 100%;
  28.   border-radius: 20px;
  29. }
  30. main .navs .left {
  31.   display: grid;
  32.   place-items: center;
  33.   padding: 20px 0px;
  34. }
  35. main .navs .left a {
  36.   border-radius: 20px;
  37.   padding: 10px 20px;
  38. }
  39. main .navs .left a:hover {
  40.   color: red;
  41.   background-color: rgb(250, 223, 227);
  42. }
  43. /* 学习路径 */
  44. main .navs .bottom-left {
  45.   display: grid;
  46.   grid-template-columns: 100px 1fr;
  47. }
  48. main .navs .bottom-left .desc {
  49.   display: grid;
  50.   place-content: center;
  51.   padding: 16px 0px;
  52. }
  53. main .navs .bottom-left .detail img {
  54.   width: 100%;
  55.   grid-row: span 2;
  56. }
  57. main .navs .bottom-left .detail {
  58.   /* flex横排 */
  59.   display: flex;
  60.   place-items: center;
  61.   place-content: space-between;
  62.   margin: 0px 15px;
  63. }
  64. main .navs .bottom-left .detail li {
  65.   display: grid;
  66.   grid-template-columns: 36px 85px;
  67.   gap: 0px 10px;
  68.   place-items: center start;
  69. }
  70. main .navs .bottom-left .detail li a {
  71.   font-size: 14px;
  72. }
  73. main .navs .bottom-left .detail li a:hover {
  74.   font-size: 14px;
  75.   color: red;
  76. }
  77. main .navs .bottom-left .detail li span {
  78.   font-size: 12px;
  79.   color: #999;
  80. }
  81. /* 右侧我的学习 */
  82. main .navs .right {
  83.   display: grid;
  84.   grid-template-rows: 142px 1fr;
  85.   gap: 10px;
  86. }
  87. main .navs .right .right-top img {
  88.   width: 60%;
  89.   border-radius: 50%;
  90.   margin-left: 20px;
  91.   margin-top: 20px;
  92. }
  94. main .navs .right .right-top {
  95.   display: grid;
  96.   grid-template-rows: repeat(2, 1fr);
  97.   grid-template-columns: repeat(2, 1fr);
  98.   place-content: center;
  99.   place-items: center;
  100.   background-color: #fff;
  101.   border-radius: 10px;
  102. }
  103. /* 会员信息靠左垂直居中 */
  104. main .navs .right .right-top .user {
  105.   place-self: center start;
  106.   padding: 10px 0;
  107. }
  108. main .navs .right .right-top .user a {
  109.   font-size: large;
  110.   font-weight: bold;
  111. }
  112. main .navs .right .right-top .user a:hover {
  113.   color: red;
  114. }
  115. main .navs .right .right-top dd {
  116.   font-size: 14px;
  117.   color: #d0d0df;
  118.   margin: 5px;
  119. }
  120. main .navs .right .right-top .study {
  121.   grid-column: span 2;
  122.   background-color: red;
  123.   color: #fff;
  124.   width: 150px;
  125.   height: 34px;
  126.   border-radius: 20px;
  127.   padding: 3px 0;
  128.   text-align: center;
  129.   font-size: large;
  130.   font-weight: bold;
  131. }
  132. main .navs .right .right-news {
  133.   display: grid;
  134.   grid-template-rows: 50px 1fr;
  135.   margin: 3px 20px;
  136. }
  137. main .navs .right .right-news f1 {
  138.   place-self: center start;
  139. }
  140. main .navs .right .right-news f1 span {
  141.   margin-left: 5px;
  142.   font-size: large;
  143. }
  144. main .navs .right .right-news .f1 a {
  145.   width: 31px;
  146.   height: 16px;
  147.   background-color: red;
  148.   color: #fff;
  149.   border-radius: 2px;
  150.   font-size: 12px;
  151.   line-height: 16px;
  152.   padding: 1px 3px;
  153. }
  154. main .navs .right .right-news .f2 {
  155.   display: grid;
  156.   place-items: center start;
  157. }
  158. main .navs .right .right-news .f2 a {
  159.   color: #999;
  160. }
  161. main .navs .right .right-news .f2 a:hover {
  162.   color: red;
  163. }
  165. /* 公众号部分 */
  166. main .navs .bottom-right .content {
  167.   display: grid;
  168.   grid-template-columns: repeat(2, 1fr);
  169.   place-items: center;
  170.   place-content: space-between;
  171. }
  172. main .navs .bottom-right .content li {
  173.   width: 70px;
  174.   height: 59px;
  175.   text-align: center;
  176.   place-content: center;
  177.   place-items: center;
  178.   margin: 10px 0;
  179. }
  180. main .navs .bottom-right .content li a b {
  181.   font-size: 30px;
  182.   place-content: center;
  183. }
  184. main .navs .bottom-right .content li a h2 {
  185.   font-size: 14px;
  186.   font-weight: bold;
  187.   height: 16px;
  188.   line-height: 16px;
  189.   place-content: center;
  190. }
  191. main .navs .bottom-right .content li a h2:hover {
  192.   color: red;
  193. }
  194. /* 直播课 */
  195. main .live-class {
  196.   width: 1200px;
  197.   margin: 30px 0;
  198.   margin: auto;
  199.   display: grid;
  200.   grid-template-rows: 32px 530px;
  201. }
  202. main .live-class .title {
  203.   display: grid;
  204.   grid-template-columns: 88px 78px;
  205.   grid-template-rows: 32px;
  206.   place-content: space-between;
  207.   place-items: center start;
  208. }
  209. main .live-class .title a {
  210.   padding: 10px 10px;
  211.   width: 78px;
  212.   height: 32px;
  213.   background: #f0f1f4;
  214.   color: #999999;
  215.   border-radius: 20px;
  216.   text-align: center;
  217. }
  219. /* 课程列表 */
  220. main .live-class .list {
  221.   display: grid;
  222.   grid-template-columns: repeat(5, 1fr);
  223.   grid-template-rows: repeat(2, 1fr);
  224.   place-content: space-between;
  225.   gap: 10px;
  226.   margin-top: 30px;
  227. }
  228. main .live-class .list li {
  229.   display: grid;
  230.   background-color: #fff;
  231.   border-radius: 5px;
  232. }
  233. main .live-class .list li img {
  234.   width: 100%;
  235.   border-radius: 6px 6px 0px 0px;
  236. }
  237. main .live-class .list li dl dt {
  238.   margin-left: 10px;
  239. }
  240. main .live-class .list li dl dt i {
  241.   float: left;
  242.   width: 28px;
  243.   height: 16px;
  244.   background: #93999f;
  245.   line-height: 16px;
  246.   overflow: hidden;
  247.   text-align: center;
  248.   font-style: normal;
  249.   font-size: 11px;
  250.   color: #ffffff;
  251.   margin-right: 10px;
  252.   margin-top: 3px;
  253. }
  254. main .live-class .list li dl dd {
  255.   display: flex;
  256.   margin-top: 15px;
  257.   margin-left: 15px;
  258.   place-content: space-between;
  259.   color: #b7b7b7;
  260. }
  261. main .live-class .list li dl dd a {
  262.   color: #b7b7b7;
  263.   margin-right: 15px;
  264. }