Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿制php中文网首页部分
Blogger Information
Blog 49
fans 0
comment 3
visits 22908
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿制php中文网首页部分
P粉479712293
Original
308 people have browsed it

仿制php中文网首页部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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/reset2.css">
  8.     <link rel="stylesheet" href="../static/css/header2.css">
  9.     <link rel="stylesheet" href="../static/css/main-nav2.css">
  10.     <title>仿写php中文网页首页部分</title>
  11. </head>
  12. <body>
  13.    <!-- *页眉 -->
  14.    <header>
  15.        <!-- *1顶部 -->
  16.        <div>
  17.            <div class="top">
  18.                <!-- *在下面再创建一盒子好做居中 -->
  19.                <div class="content">
  20.                    <div class="title">php中文网-程序员梦开始的地方</div>
  21.                    <div class="right">
  22.                       <a href="" class="iconfont icon-tixing"></a>
  23.                       <a href=""><img src="../static/images/user-pic.jpeg" alt=""></a>
  24.                    </div>
  25.                </div>
  26.            </div>
  27.        </div>
  28.        <!-- *2导航 -->
  29.        <div>
  30.            <div class="navs">
  31.                 <!-- *在下面再创建一盒子好做居中 -->
  32.                 <div class="content">
  33.                     <a href="" class="logo"><img src="../static/images/logo.png" alt=""></a>
  34.                     <nav>
  35.                         <a href="" class="active">首页</a>
  36.                         <a href="">视频教程</a>
  37.                         <a href="">学习路径</a>
  38.                         <a href="">php培训</a>
  39.                         <a href="">资源下载</a>
  40.                         <a href="">技术文章</a>
  41.                         <a href="">社区</a>
  42.                     </nav>
  43.                     <div class="search">
  44.                         <input type="search" placeholder="输入关键字搜索">
  45.                         <span class="iconfont icon-fangdajing fdj"></span>
  46.                     </div>
  47.                 </div>
  48.            </div>
  49.        </div>
  50.    </header>
  51.    <!-- *主体 -->
  52.    <main>
  53.        <div class="navs">
  54.            <!-- *2行3列 -->
  55.            <!-- *.left>a*8 -->
  56.            <div class="left">
  57.                <a href="">php开发</a>
  58.                <a href="">大前端</a>
  59.                <a href="">后端开发</a>
  60.                <a href="">数据库</a>
  61.                <a href="">移动端</a>
  62.                <a href="">运维开发</a>
  63.                <a href="">UI设计</a>
  64.                <a href="">计算机基础</a>
  65.             </div>
  66.             <div class="slider">
  67.                 <a href="">
  68.                     <img src="../static/images/slider.jpeg" alt="">
  69.                 </a>
  70.             </div>
  71.             <div class="right">
  72.                 <!-- *图片与朱老师 -->
  73.                 <ul class="detail">
  74.                     <li onclick="">
  75.                         <img src="../static/images/user-pic.jpeg" alt="">
  76.                         <a href=""><div class="zls">朱老师</div></a>
  77.                         <span class="pdou">p豆100</span>
  78.                     </li>
  79.                     <li onclick="">
  80.                         <div>
  81.                             <a href=""><div class="xuexi">我的学习</div></a>
  82.                         </div>
  83.                     </li>
  84.                     <li onclick="">
  85.                         <span>问答社区</span>
  86.                         <a href=""><div class="dayi">答疑</div></a>
  87.                     </li>
  88.                     <li onclick="">
  89.                         <span>头条</span>
  90.                         <a href="">发展情况报告</a>
  91.                     </li>
  92.                     <li onclick="">
  93.                         <span>福利</span>
  94.                         <a href="">限时折扣</a>
  95.                     </li>
  96.                     <li onclick="">
  97.                         <span>新班</span>
  98.                         <a href="">20期php上线</a>
  99.                     </li>
  100.                     <li onclick="">
  101.                         <span>招募</span>
  102.                         <a href="">课程合作计划</a>
  103.                     </li>
  104.                     <li onclick="">
  105.                         <span>公告</span>
  106.                         <a href="">php上线啦</a>
  107.                     </li>
  108.                 </ul>
  109.             </div>
  110.             <div class="bottom-left">
  111.                 <!-- *学习路径 -->
  112.                 <div class="desc">
  113.                     <div class="title">学习路径</div>
  114.                     <span>全部7个&gt;</span>
  115.                 </div>
  116.                 <ul class="detail">
  117.                     <li onclick="">
  118.                         <img src="../static/images/dgjj.png" alt="">
  119.                         <a href="">孤独九贼</a>
  120.                         <span>九门课程</span>
  121.                     </li>
  122.                     <li onclick="">
  123.                         <img src="../static/images/ynxj.png" alt="">
  124.                         <a href="">孤独九贼</a>
  125.                         <span>九门课程</span>
  126.                     </li>
  127.                     <li onclick="">
  128.                         <img src="../static/images/tlbb.png" alt="">
  129.                         <a href="">孤独九贼</a>
  130.                         <span>九门课程</span>
  131.                     </li>
  132.                     <li onclick="">
  133.                         <img src="../static/images/phpksrm.png" alt="">
  134.                         <a href="">孤独九贼</a>
  135.                         <span>九门课程</span>
  136.                     </li>
  137.                     <li onclick="">
  138.                         <img src="../static/images/phpkjkf.png" alt="">
  139.                         <a href="">孤独九贼</a>
  140.                         <span>九门课程</span>
  141.                     </li>
  142.                 </ul>
  143.             </div>
  144.             <div class="bottom-right">
  145.                 <div class="gzh">
  146.                   <a href=""><span class="iconfont icon-weixin"></span></a>
  147.                   <span>官方公众号</span>
  148.                 </div>
  149.                 <div class="qqq">
  150.                     <a href=""><span class="iconfont icon-tree-round-QQgroup"></span></a>
  151.                     <span>官方QQ群</span>
  152.                   </div>
  153.             </div>
  154.        </div>
  155.    </main>
  156. </body>
  157. </html>

对应的reset2.css文件：

  1. @import "../icon_font/font_icon4/iconfont.css";
  2. /* *初始化三部曲 */
  3. *{
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  8. /* *a标签取消下划线 */
  9. a{
  10.     text-decoration: none;
  11.     color: #555;
  12. }
  13. body{
  14.     background-color: rgb(243,245,247); 
  15. }
  16. /* *取消无序列表中的小黑点 */
  17. li{
  18.     list-style: none;
  19. }

对应的header2.css文件：

  1. header .top{
  2.     width: 100vw;
  3.     height: 40px;
  4.     background-color: rgb(52,52,52);
  5.     /* *顶部文字颜色 */
  6.     color: #aaa;
  7. }
  8. header .top .content img{
  9.     width: 50%;
  10.     /* *边框半径50%就是一个圆 */
  11.     border-radius: 50%;
  12. }
  13. header .top .content{
  14.     /* *必须限定宽高，否则无法在容器中居中 */
  15.     width: 1200px;
  16.     /* *网格布局 */
  17.     display: grid;
  18.    /* *分成两列，一列宽400，另一列宽100 */
  19.     grid-template-columns: 400px 100px;
  20.     /* *行高40 */
  21.     grid-auto-rows: 40px;
  22.      /* *两端对齐 */
  23.      place-content: space-between;
  24.      /* *垂直居中 水平向左 */
  25.      place-items: center start;
  26.      /* *设置外边距margin-auto就可居中 */
  27.      margin: auto;
  28. }
  29. /* *设置文字图标 */
  30. header .top .content .right .iconfont{
  31.     color: #eee;
  32.     font-size: larger;
  33. }
  34. header .top .content .right{
  35.     /* *网格布局 */
  36.     display: grid;
  37.     /* *两列期剩余空间对半分 */
  38.     grid-template-columns: repeat(2,1fr);
  39.     /* *容器里边的两个项目在垂直与水平上居中 */
  40.     place-items: center;
  41. }
  42. /* *导航 */
  43. header .navs{
  44.     width: 100vw;
  45.     height: 90px;
  46.     background-color: #fff;
  47. }
  48. header .navs .content{
  49.     width: 1200px;
  50.     /* border: 1px solid #000; */
  51.     display: grid;
  52.     /* *各列宽度 */
  53.     grid-template-columns: 140px 1fr 200px;
  54.     /* *行高 */
  55.     grid-auto-rows: 90px;
  56.     /* *列与列及行与行之间的间隙 */
  57.     gap: 10px;
  58.     /* *居中对齐 */
  59.     margin: auto;
  60.     /* *所有项目在单元格中垂直居中，水平向左 */
  61.     place-items: center start;
  62. }
  63. /* *logo这张图片 */
  64. header .navs .content img{
  65.     width: 100%;
  66. }
  67. /* *第一项字体为红色，其余各项当鼠标放上时字体为红色 */
  68. header .navs .content nav a.active,
  69. header .navs .content nav a:hover{
  70.     color: red;
  71.     font-weight: bold;
  72. }
  73. header .navs .content nav{
  74.     /* *flex布局 */
  75.     display: flex;
  76. }
  77. header .navs .content nav a{
  78.     /* *上下为0，左右10px */
  79.     padding: 0 10px;
  80. }
  81. /* *设置搜索框 */
  82. header .navs .content .search input[type='search']{
  83.     width: 170px;
  84.     height: 36px;
  85.     border: 1px solid red;
  86.     outline: none;
  87.     background-color: #f7f8fa;
  88.     border-radius: 20px;
  89.     padding-left: 10px;
  90. }

对应的main-nav2.css文件：

  1. main{
  2.     font-size: 14px;
  3. }
  4. main .navs{
  5.     /* *grid布局 */
  6.     display: grid;
  7.     /* *3列的列宽分别是160，810，190 */
  8.     grid-template-columns: 160px 810px 190px;
  9.     /* *两行的行高分别是400，80 */
  10.     grid-template-rows: 400px 80px;
  11.     /* *行列间隙 */
  12.     gap: 20px;
  13.     /* *垂直与水平居中 */
  14.     place-content: center;
  15.     /* *外边距上下30，左右为0 */
  16.     margin: 30px 0;
  17. }
  18. /* *主体的导航的所有儿子 */
  19. main .navs>*{
  20.     background-color: #fff;
  21.     border-radius: 20px;
  22.     /* *添加轮廓线作为辅助线则看得更清晰 */
  23.     /* outline: 1px solid red; */
  24. }
  25. /* *底部左侧占两列 */
  26. main .navs .bottom-left{
  27.    grid-column: span 2;
  28. }
  29. main .navs .slider img{
  30.     width: 100%;
  31.     /* *图片加圆角 */
  32.     border-radius: 20px;
  33. }
  34. /* *左侧导航 */
  35. main .navs .left{
  36.    /* *grid: 默认每个项目都是"块级", 垂直排列  */
  37.     display: grid;
  38.     /* *当前项目在每个网络单元中, 垂直,水平均居中 */
  39.     place-items: center;
  40.     /* *内边距上下20，左右为0 */
  41.     padding: 20px 0;
  42. }
  43. /* *当鼠标放上a标签上时 */
  44. main .navs .left a:hover{
  45.     color: red;
  46.     background-color: rgb(258, 223, 223);
  47. }
  48. /* *a标签的设置 */
  49. main .navs .left a{
  50.     border-radius: 20px;
  51.     padding: 10px 20px;
  52. }
  53. /* *底部左侧 */
  54. main .navs .bottom-left{
  55.     /* *网格布局 */
  56.     display: grid;
  57.     /* *分为两列 */
  58.     grid-template-columns: 100px 1fr;
  59. }
  60. main .navs .bottom-left .desc{
  61.     display: grid;
  62.     place-items: center;
  63.     /* *学习路径两行之间分得太开 */
  64.     padding: 16px ;
  65. }
  66. main .navs .bottom-left .detail img{
  67.     width: 100%;
  68.     /* *图片跨行处理 */
  69.     grid-row: span 2;
  70. }
  71. main .navs .bottom-left .detail{
  72.     display: flex;
  73.     place-items: center;
  74.     place-content: space-between;
  75. }
  76. main .navs .bottom-left .detail li{
  77.     display: grid;
  78.     grid-template-columns: 36px 85px;
  79.     gap: 0 10px;
  80.     /* *每项垂直居中，水平靠左 */
  81.     place-items: center start;
  82. }
  83. main .navs .bottom-left .detail li a{
  85.     font-size: 14px;
  86. }
  87. main .navs .bottom-left .detail li span{
  88.     font-size: 12px;
  89. }
  90. main .navs .bottom-left .detail li a:hover{
  91.     color: red;
  92. }
  93. main .navs .bottom-left .detail li span,
  94. main .navs .bottom-left .desc span{
  95.     font-size: 12px;
  96.     color: #999;
  97. }
  98. main .navs .right .detail{
  99.     display: grid;
  100.     place-items: center;
  101. }
  102. main .navs .right .detail li{
  103.     display: grid;
  104.     grid-template-columns: 60px 130px;
  105.     gap: 0 10px;
  106.     /* *每项垂直居中，水平靠左 */
  107.     place-items: center start;
  108.     padding: 15px 10px;
  109. }
  110. main .navs .right .detail img{
  111.     width: 50%;
  112.     border-radius: 50%;
  113.     /* *图片跨行处理 */
  114.     grid-row: span 2;
  115. }
  116. main .navs .right .detail a>.dayi{
  117.     display: block;
  118.     width: 2em;
  119.     height: 1em;
  120.     background-color: red;
  121.     color: white;
  122.     border-radius: 3px;
  123. }
  124. main .navs .right .detail a>.xuexi{
  125.     display: block;
  126.     width: 8em;
  127.     height: 2.5em;
  128.     background-color: red;
  129.     color: white;
  130.     border-radius: 20px;
  131.     padding: 10px 30px;
  132.     font-size: 16px;
  133. }
  134. main .navs .right .detail .zls{
  135.     font-size: 16px;
  136.     color: #000;
  137.     font-weight: bold;
  138. }
  139. main .navs .right .detail .pdou{
  140.     color: #999;
  141. }
  142. main .navs .right .detail a{
  143.     color: #999;
  144. }
  145. main .navs .right .detail a:hover{
  146.     color: red;
  147. }
  148. main .navs .bottom-right{
  149.     display: grid;
  150.     grid-template-columns:1fr 1fr;
  151. }
  152. main .navs .bottom-right .gzh{
  153.     display: grid;
  154.     place-items: center;
  155.     /* *学习路径两行之间分得太开 */
  156.     padding: 10px ;
  157. }
  158. main .navs .bottom-right .qqq{
  159.     display: grid;
  160.     place-items: center;
  161.     /* *学习路径两行之间分得太开 */
  162.     padding: 10px ;
  163. }
  164. .iconfont.icon-weixin,.iconfont.icon-tree-round-QQgroup{
  165.     font-size: 25px;
  166. }
  167. main .navs .bottom-right .gzh a:hover{
  168.     color: red;
  169. }
  170. main .navs .bottom-right .qqq a:hover{
  171.     color: red;
  172. }
  173. main .navs .right .detail a>.zls:hover{
  174.     color:red
  175. }

效果图如下：

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post