Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模仿PHP中文网首页
Blogger Information
Blog 9
fans 0
comment 0
visits 5615
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中文网首页
进
Original
265 people have browsed it

模仿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="https://at.alicdn.com/t/font_3205780_7eqow85axa.css">
  8.     <link rel="stylesheet" href="static/style/top.css">
  9.     <link rel="stylesheet" href="static/style/main.css">
  10.     <title>php中文网</title>
  11. </head>
  12. <body>
  13.     <!-- 页眉 -->
  14.     <header>
  15.         <!-- 顶部 -->
  16.         <div class="top">
  17.             <!-- 左侧 -->
  18.             <div class="neirong">
  19.                 <div class="wenzi">php中文网，程序员梦开始的地方！</div>
  20.             <!-- 右侧用户 -->
  21.                 <div class="you">
  22.                     <a class="iconfont icon-tixingtianchong" href=""></a>
  23.                     <a class="touxiang" href=""><img src="static/images/user-pic.jpeg" alt=""></a>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.         <!-- 导航 -->
  28.         <div class="navs">
  29.             <div class="content">
  30.                 <a href="" class="logo"><img src="static/images/logo.png" alt=""></a>
  31.                 <nav>
  32.                     <a href="" class="active">首页</a>
  33.                     <a href="">视频教程</a>
  34.                     <a href="">学习路径</a>
  35.                     <a href="">PHP培训</a>
  36.                     <a href="">资源下载</a>
  37.                 </nav>
  38.                 <div class="search">
  39.                     <input type="search" placeholder="请输入搜索内容！" />
  40.                     <span class="iconfont icon-fangdajing1"></span>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.     </header>
  46.     <!-- 内容 -->
  47.     <main>
  48.         <div class="navs">
  49.           <div class="left">
  50.             <a href="">php开发</a>
  51.             <a href="">大前端</a>
  52.             <a href="">后端开发</a>
  53.             <a href="">数据库</a>
  54.             <a href="">移动端</a>
  55.             <a href="">运维开发</a>
  56.             <a href="">UI设计</a>
  57.             <a href="">计算机基础</a>
  58.           </div>
  59.           <div class="slider">
  60.             <a href=""><img src="static/images/slider.jpeg" alt="" /></a>
  61.           </div>
  62.           <div class="right">
  63.             <div class="righttop">
  65.               <div class="touxiang"><a href=""><img src="static/images/user-pic.jpeg"  alt=""></a></div>
  66.               <span><a href="" class="name">进</a><p>p豆 16</p></span>
  68.               <button class="xuexi">我的学习</button>
  69.             </div>
  70.             <div class="fengexian"></div>
  71.             <div class="rightfoot">
  72.               <p class="xinxi1">
  73.                 <span>答问社区</span>
  74.                 <a href="">答疑</a>
  75.               </p>
  76.               <p class="xinxi2">
  77.                 <span>头条</span>
  78.                 <a href="">今日头条</a>
  79.               </p>
  80.               <p class="xinxi3">
  81.                 <span>福利</span>
  82.                 <a href="">限时折扣>></a>
  83.               </p>
  84.               <p class="xinxi4">
  85.                 <span>新班</span>
  86.                 <a href="">20期PHP线上班</a>
  87.               </p>
  88.               <p class="xinxi5">
  89.                 <span>招募</span>
  90.                 <a href="">课程合作计划</a>
  91.               </p>
  92.               <p class="xinxi6">
  93.                 <span>公告</span>
  94.                 <a href="">APP上线啦</a>
  95.               </p>
  96.             </div>
  97.           </div>
  98.           <div class="bottom-left">
  99.             <div class="desc">
  100.               <div class="title">学习路径</div>
  101.               <span>全部7个&gt;</span>
  102.             </div>
  103.             <ul class="detail">
  104.               <li onclick="">
  105.                 <img src="static/images/dgjj.png" alt="" />
  106.                 <a href="">独孤九贱</a>
  107.                 <span>9门课程</span>
  108.               </li>
  109.               <li onclick="">
  110.                 <img src="static/images/ynxj.png" alt="" />
  111.                 <a href="">独孤九贱</a>
  112.                 <span>9门课程</span>
  113.               </li>
  114.               <li onclick="">
  115.                 <img src="static/images/tlbb.png" alt="" />
  116.                 <a href="">独孤九贱</a>
  117.                 <span>9门课程</span>
  118.               </li>
  119.               <li onclick="">
  120.                 <img src="static/images/phpkjkf.png" alt="" />
  121.                 <a href="">独孤九贱</a>
  122.                 <span>9门课程</span>
  123.               </li>
  124.               <li onclick="">
  125.                 <img src="static/images/phpksrm.png" alt="" />
  126.                 <a href="">独孤九贱</a>
  127.                 <span>9门课程</span>
  128.               </li>
  129.             </ul>
  130.           </div>
  131.           <div class="bottom-right">
  132.             <div class="weixin">
  133.               <text class="iconfont icon-weixin-copy"></text>
  134.               <h4>官方公众号</h4>
  135.             </div>
  136.             <div class="qq">
  137.               <text class="iconfont icon-QQ-circle-fill"></text>
  138.               <h4>官方QQ群</h4>
  139.             </div>
  140.           </div>
  141.         </div>
  142.       </main>
  143. </body>
  144. </html>

1.1css代码re.css

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

1.2css代码top.css

  1. @import url(re.css);
  2. header .top {
  3.     width: 100vw;
  4.     height: 40px;
  5.     background-color: #343434;
  6.     color: white;
  7. }
  9. header .top .neirong {
  10.     width: 1200px;
  11.     display: grid;
  12.     grid-template-columns: 400px 100px;
  13.     grid-auto-rows: 40px;
  14.     place-content: space-between;
  15.     place-items: center start;
  16.     margin: auto;
  17. }
  19. header .top .neirong a {
  20.     color: white;
  21. }
  23. header .top .neirong img {
  24.     width: 50%;
  25.     border-radius: 50%;
  26. }
  28. header .top .neirong .you {
  29.     display: grid;
  30.     grid-template-columns: repeat(2, 1fr);
  31.     place-items: center;
  32. }
  34. header .top .neirong .you .iconfont {
  35.     font-size: larger;
  36. }
  39. /* 导航 */
  40. header .navs {
  41.     width: 100vw;
  42.     height: 90px;
  43.     background-color: white;
  44.     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  45. }
  47. header .navs .content {
  48.     width: 1200px;
  49.     display: grid;
  50.     grid-template-columns: 140px 1fr 200px;
  51.     grid-auto-rows: 90px;
  52.     place-items: center start;
  53.     margin: auto;
  54.     gap: 10px;
  55. }
  57. header .navs .content nav {
  58.     display: flex;
  59. }
  61. header .navs .content nav a {
  62.     padding: 0 10px;
  63. }
  65. header .navs .content nav a:hover,
  66. header .navs .content nav a.active {
  67.     font-size: bold;
  68.     color: red;
  69. }
  71. header .navs .content a img {
  72.     width: 100%;
  73. }
  75. header .navs .content .search {
  76.     display: flex;
  77. }
  79. header .navs .content .search input[type='search'] {
  80.     border: none;
  81.     background-color: #eee;
  82.     width: 200px;
  83.     height: 36px;
  84.     outline: none;
  85.     border-radius: 20px;
  86.     padding-left: 10px;
  87. }
  89. header .navs .content .search .iconfont {
  90.     position: relative;
  91.     font-size: 22px;
  92.     left: -40px;
  93.     top: 6px;
  94.     color: #ccc;
  95. }
  97. header .navs .content .search .iconfont:hover {
  98.     cursor: pointer;
  99.     color: red;
  100. }

1.3css代码main.css

  1. @import url(font_icon/iconfont.css);
  2. main {
  3.     font-size: 14px;
  4. }
  6. main .navs {
  7.     display: grid;
  8.     grid-template-rows: 400px 80px;
  9.     grid-template-columns: 160px 810px 190px;
  10.     gap: 20px;
  11.     place-content: center;
  12.     margin: 30px 0;
  13. }
  14. /* 统一样式 */
  15. main .navs > * {
  16.     background-color: white;
  17.     border-radius: 20px;
  18. }
  20. main .navs .bottom-left {
  21.     grid-column: span 2;
  22. }
  24. main .navs .left {
  25.     padding: 20px 0;
  26.     display: grid;
  27.     place-items: center;
  28. }
  30. main .navs .left a {
  31.     padding: 10px 20px;
  32.     width: 120px;
  33.     text-align: center;
  34. }
  36. main .navs .left a:hover {
  37.     color: red;
  38.     border-radius: 20px;
  39.     background-color: rgb(250, 223, 227);
  40. }
  42. main .navs .slider img {
  43.     width: 100%;
  44.     border-radius: 20px;
  45. }
  47. main .navs .bottom-left {
  48.     display: grid;
  49.     grid-template-columns: 100px 1fr;
  50. }
  52. main .navs .bottom-left .detail img {
  53.     width: 100%;
  54.     grid-row: span 2;
  55. }
  57. main .navs .bottom-left .detail li {
  58.     display: grid;
  59.     grid-template-columns: 36px 85px;
  60.     gap: 3px;
  61.     /* grid-template-columns: repeat(2,36); */
  62. }
  64. main .navs .bottom-left .detail a:hover {
  65.     color: #ff583d;
  66. }
  68. main .navs .bottom-left .detail span {
  69.     color: #b6b6b6;
  70.     font-size: 12px;
  71. }
  73. main .navs .bottom-left .detail a {
  74.     color: black;
  75. }
  77. main .navs .bottom-left .desc span {
  78.     color: #b6b6b6;
  79.     font-size: 12px;
  80. }
  82. main .navs .bottom-left .detail {
  83.     display: flex;
  84.     place-items: center;
  85.     place-content: space-between;
  86. }
  88. main .navs .bottom-left .desc {
  89.     padding: 16px 0;
  90.     display: grid;
  91.     place-items: center;
  92. }
  94. /* 作业部分 */
  96. main .navs .right {
  97.     display: grid;
  98.     grid-template-rows: 142px 1fr 240px;
  99. }
  101. main .navs .right .righttop {
  102.     display: grid;
  103.     grid-template-rows: 80px 34px ;
  104.     grid-template-columns: 40px 150px;
  105.     margin: 0 20px;
  106.     place-items:center start;
  107.     gap: 10px;
  109. }
  111. main .navs .right .righttop .touxiang img{
  112.     width: 100%;
  113.     border-radius: 50%;
  114. }
  116. main .navs .right .righttop .xuexi {
  117.     width: 150px;
  118.     height: 34px;
  119.     border: none;
  120.     background-color: red;
  121.     color: white;
  122.     border-radius: 20px;
  123. }
  124. main .navs .right .righttop .xuexi:hover {
  125.     cursor: pointer;
  126.     background-color: rgb(231, 0, 0);
  127. }
  129. main .navs .right .rightfoot {
  130.     display: grid;
  131.     grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  132.     place-items: center start;
  133.     margin: 0 20px;
  134. }
  136. main .navs .right .rightfoot p {
  137.     display: grid;
  138.     grid-template-columns: 1fr 100px;
  139.     place-items: center start;
  140.     gap: 10px;
  141.     margin: 0 10px 0 0;
  142. }
  144. main .navs .right .fengexian {
  145.     width: 190px;
  146.     height: 1px;
  147.     background-color: #eee;
  148. }
  150. main .navs .right .rightfoot .xinxi1 a{
  151.     width: 31px;
  152.     height: 16px;
  153.     background-color: #ff583d;
  154.     color: white;
  155.     font-size: 14px;
  156.     text-align: center;
  157.     line-height: 16px;
  158.     border-radius: 3px;
  159. }
  161. main .navs .right .rightfoot>span {
  162.     font-size: bold;
  163. }
  164. main .navs .right .rightfoot a {
  165.     color: #b6b6b6;
  166. }
  168. main .navs .right .righttop .name {
  169.     font-size: 16px;
  170.     font-size: bold;
  171.     color: black;
  172. }
  174. main .navs .right .righttop p {
  175.     color: #b6b6b6;
  176. }
  178. /* 联系方式 */
  180. main .navs .bottom-right {
  181.     display: grid;
  182.     grid-template-columns: 95px 95px;
  183.     place-items: center;
  184. }
  186. main .navs .bottom-right .weixin,
  187. main .navs .bottom-right .qq {
  188.     display: grid;
  189.     grid-template-rows: 1fr 1fr;
  190.     place-items: center;
  191. }
  193. main .navs .bottom-right .weixin .iconfont,
  194. main .navs .bottom-right .qq .iconfont {
  195.    font-size: 30px;
  196.    color: #b6b6b6;
  197. }
  199. main .navs .bottom-right .weixin h4,
  200. main .navs .bottom-right .qq h4 {
  201.     font-size: 13px;
  202. }
  204. main .navs .bottom-right .weixin:hover,
  205. main .navs .bottom-right .qq:hover {
  206.     cursor: pointer;
  207.     color: #ff583d;
  208. }

效果截图演示

image-20220718192902272

image-20220718192941024

image-20220718192956363

image-20220718193016895

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