简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿制php中文网首页部分

仿制php中文网首页部分

P粉479712293
P粉479712293原创
2022年07月23日 11:36:43307浏览

仿制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. }

效果图如下：

上一条：VUE 创建项目流程下一条：变量与常量 作用域 函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多