简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿PHP中文网首页-部分
Blogger Information
Blog 37
fans 0
comment 0
visits 14225
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
451 people have browsed it

  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/index.css" />
  8.     <title>模仿php中文网首页</title>
  9.   </head>
  10.   <body>
  11.     <header>
  12.       <div class="top">
  13.         <div class="content">
  14.           <div class="title">php中文网-程序员梦开始的地方！</div>
  15.           <div class="right">
  16.             <a href="" class="iconfont icon-tixingtianchong"></a>
  17.             <a href="" class="img"><img src="static/images/user-pic.jpeg" alt="这是一个用户头像" /></a>
  18.           </div>
  19.         </div>
  20.       </div>
  21.       <div class="nav">
  22.         <div class="content">
  23.           <a href=""><img src="static/images/logo.png" alt="网站logo" /></a>
  24.           <div class="menu">
  25.             <a href="" class="active">首页</a>
  26.             <a href="">视频教程</a>
  27.             <a href="">学习路径</a>
  28.             <a href="">php培训</a>
  29.             <a href="">资源下载</a>
  30.           </div>
  31.           <div class="search">
  32.             <input type="search" name="" id="" placeholder="输入关键字" />
  33.             <span class="iconfont icon-fangdajing1"></span>
  34.           </div>
  35.         </div>
  36.       </div>
  37.     </header>
  39.     <main>
  40.       <div class="nav">
  41.         <div class="content">
  42.           <div class="left">
  43.             <a href="">php开发</a>
  44.             <a href="">大前端</a>
  45.             <a href="">后端开发</a>
  46.             <a href="">数据库</a>
  47.             <a href="">移动端</a>
  48.             <a href="">运维开发</a>
  49.             <a href="">UI设计</a>
  50.             <a href="">计算机基础</a>
  51.           </div>
  52.           <div class="slider">
  53.             <a href=""><img src="static/images/slider.jpeg" alt="广告" /> </a>
  54.           </div>
  55.           <div class="right">
  56.             <div class="login">
  57.               <div class="touxiang">
  58.                 <a href=""><img src="static/images/user-pic.jpeg" alt="" /> </a>
  59.                 <p>我的名字</p>
  60.                 <p>P豆20</p>
  61.               </div>
  62.               <button>我的学习</button>
  63.             </div>
  64.             <div class="question">
  65.               <div class="title">问答社区</div>
  66.               <div class="toutiao">
  67.                 <p>头条</p>
  68.                 <span>内容</span>
  69.               </div>
  70.               <div class="toutiao">
  71.                 <p>福利</p>
  72.                 <span>内容</span>
  73.               </div>
  74.               <div class="toutiao">
  75.                 <p>新班</p>
  76.                 <span>内容</span>
  77.               </div>
  78.               <div class="toutiao">
  79.                 <p>招募</p>
  80.                 <span>内容</span>
  81.               </div>
  82.               <div class="toutiao">
  83.                 <p>公告</p>
  84.                 <span>内容</span>
  85.               </div>
  86.             </div>
  87.           </div>
  88.           <div class="bottom-left">
  89.             <div class="desc">
  90.               <div class="title">学习路径</div>
  91.               <span>全部7个&gt;</span>
  92.             </div>
  93.             <ul class="detail">
  94.               <li onclick="">
  95.                 <img src="static/images/dgjj.png" alt="" />
  96.                 <a href="">独孤九剑</a>
  97.                 <span>9门课程</span>
  98.               </li>
  99.               <li onclick="">
  100.                 <img src="static/images/ynxj.png" alt="" />
  101.                 <a href="">独孤九剑</a>
  102.                 <span>9门课程</span>
  103.               </li>
  105.               <li onclick="">
  106.                 <img src="static/images/tlbb.png" alt="" />
  107.                 <a href="">独孤九剑</a>
  108.                 <span>9门课程</span>
  109.               </li>
  111.               <li onclick="">
  112.                 <img src="static/images/phpkjkf.png" alt="" />
  113.                 <a href="">独孤九剑</a>
  114.                 <span>9门课程</span>
  115.               </li>
  116.               <li onclick="">
  117.                 <img src="static/images/phpksrm.png" alt="" />
  118.                 <a href="">独孤九剑</a>
  119.                 <span>9门课程</span>
  120.               </li>
  121.             </ul>
  122.           </div>
  123.           <div class="bootom-right">
  124.             <div class="lianxi">
  125.               <a href=""><img src="static/images/phpkjkf.png" alt="" /></a>
  126.               <a href=""><img src="static/images/phpkjkf.png" alt="" /></a>
  127.               <p>微信</p>
  128.               <p>QQ</p>
  129.             </div>
  130.           </div>
  131.         </div>
  132.       </div>
  133.     </main>
  134.   </body>
  135. </html>
  1. @import url("icon-font.css");
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6.   text-decoration: none;
  7.   color: gray;
  8.   /* background-color: rgb(100, 100, 100); */
  9. }
  10. body {
  11.   background-color: rgba(200, 200, 200, 0.3);
  12. }
  13. body header .top {
  14.   height: 40px;
  15.   width: 100vw;
  16.   background-color: #343434;
  17. }
  18. body header .top .content {
  19.   width: 1200px;
  20.   display: grid;
  21.   grid-template-columns: 400px 100px;
  22.   grid-auto-rows: 40px;
  23.   place-content: space-between;
  24.   place-items: center start;
  25.   margin: auto;
  26. }
  27. body header .top .content .title {
  28.   font-size: large;
  29. }
  30. header .top .content .right .img {
  31.   text-align: center;
  32.   padding-top: 5px;
  33. }
  35. header .top .content .right {
  36.   display: grid;
  37.   grid-template-columns: repeat(2, 1fr);
  38.   place-items: center;
  39. }
  40. header .top .content .right .icon-tixingtianchong {
  41.   color: white;
  42.   font-size: larger;
  43. }
  44. body header .top .content .right img {
  45.   border-radius: 50%;
  46.   width: 70%;
  47. }
  48. header .nav {
  49.   width: 100vw;
  50.   height: 90px;
  51.   background-color: white;
  52.   box-shadow: 0 4px 10px rgba(200, 200, 200, 0.5);
  53. }
  54. header .nav .content {
  55.   width: 1200px;
  56.   display: grid;
  57.   grid-template-columns: 140px 1fr 180px;
  58.   grid-auto-rows: 90px;
  59.   gap: 10px;
  60.   place-items: center start;
  61.   margin: auto;
  62. }
  63. header .nav .content img {
  64.   width: 140px;
  65. }
  66. header .nav .content .menu + .search {
  67.   display: flex;
  68. }
  69. header .nav .content .menu a {
  70.   margin: 10px;
  71.   font-size: large;
  72. }
  74. header .nav .content .search input[type="search"] {
  75.   width: 200px;
  76.   height: 35px;
  77.   border: none;
  78.   /* 轮廓线 */
  79.   outline: none;
  80.   border-radius: 20px;
  81.   background-color: #eee;
  82. }
  83. header .nav .content .search .iconfont {
  84.   position: relative;
  85.   font-size: 20px;
  86.   top: 5px;
  87.   left: -40px;
  88. }
  89. main .nav {
  90.   width: 100vw;
  91.   height: 480px;
  92. }
  93. main .nav .content {
  94.   width: 1200px;
  95.   display: grid;
  96.   margin: 30px auto;
  97.   grid-template-columns: 160px 810px 190px;
  98.   grid-template-rows: 400px 80px;
  99.   gap: 20px;
  100.   place-content: center;
  101.   place-content: space-between;
  102. }
  103. main .nav .content .left {
  104.   width: 160px;
  105.   background-color: white;
  106.   border-radius: 20px;
  107.   display: flex;
  108.   flex-direction: column;
  109. }
  110. main .nav .content .right {
  111.   width: 190px;
  112.   background-color: white;
  113.   border-radius: 20px;
  114. }
  115. main .right .login {
  116.   display: grid;
  117.   grid-template-rows: 80px 40px;
  118.   grid-template-columns: 160px;
  119.   place-content: center;
  120. }
  121. main .right .login .touxiang {
  122.   width: 150px;
  123.   display: grid;
  124.   grid-template-columns: repeat(2, 70px);
  125.   grid-template-rows: repeat(2, 40px);
  126.   /* place-items: end end; */
  127. }
  128. .login .touxiang a {
  129.   margin: auto;
  130.   place-self: center;
  131.   grid-row: 1 / 3;
  132. }
  133. .login .touxiang a img {
  134.   margin-left: 10px;
  135.   width: 70%;
  136.   border-radius: 50%;
  137. }
  138. .login .touxiang p:first-of-type {
  139.   color: black;
  140.   font-weight: bold;
  141.   font-size: 14 px;
  142.   place-self: end start;
  143. }
  144. .login button {
  145.   border-style: none;
  146.   width: 120px;
  147.   height: 30px;
  148.   background-color: red;
  149.   color: white;
  150.   border-radius: 40px;
  151.   place-self: center;
  152. }
  153. .right .question {
  154.   width: 150px;
  155.   display: grid;
  156.   grid-template-rows: repeat(6, 30px);
  157.   margin-left: 20px;
  158.   margin-top: 20px;
  159. }
  160. .right .question .toutiao {
  161.   width: 140px;
  162.   display: grid;
  163.   grid-template-columns: 60px 1fr;
  164. }
  165. .right .question .toutiao {
  166.   color: black;
  167. }
  168. main .nav .content .left a {
  169.   margin: 10px;
  170. }
  171. main .nav .content .slider img {
  172.   border-radius: 20px;
  173. }
  174. main .nav .content .bottom-left {
  175.   grid-column: 1 / span 2;
  176.   display: grid;
  177.   grid-template-columns: 100px 1fr;
  178.   background-color: white;
  179.   border-radius: 20px;
  180.   /* place-content: space-between; */
  181.   place-content: center;
  182.   place-items: center;
  183. }
  184. main .nav .content .bottom-left ul {
  185.   width: 810px;
  186.   display: grid;
  187.   grid-template-columns: repeat(6, 100px);
  188.   place-content: space-between;
  189.   place-items: center;
  190. }
  191. /* main .nav .content .bottom-left ul li {
  192.   margin: 10px;
  193. } */
  194. main .nav .content .bottom-left ul li img {
  195.   width: 30px;
  196. }
  197. main .nav .content .bottom-left .title {
  198.   font-size: 12px;
  199. }
  200. main .nav .content .bottom-left ul li a {
  201.   font-size: 12px;
  202. }
  203. main .nav .content .bottom-left span {
  204.   font-size: 8px;
  205. }
  206. .bottom-left ul li {
  207.   display: grid;
  208.   grid-template-columns: 40px 1fr;
  209.   grid-template-rows: 20px 20px;
  210.   place-items: center start;
  211. }
  212. .bottom-left ul li img {
  213.   grid-row: 1 / span2;
  214. }
  216. main .bootom-right {
  217.   background-color: white;
  218.   border-radius: 20px;
  219. }
  220. main .bootom-right .lianxi {
  221.   width: 190px;
  222.   display: grid;
  223.   grid-template-columns: 60px 60px;
  224.   grid-template-rows: 60px, 60px;
  225.   place-content: end center;
  226.   place-items: center;
  227.   margin-top: 10px;
  228. }
  229. main .bootom-right .lianxi img {
  230.   width: 40px;
  231.   border-radius: 50%;
  232.   border-top: 10px;
  233. }
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！