search

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

仿php中文网首页

kiraseo_wwwkiraercom
kiraseo_wwwkiraercom原创
2022年07月15日 17:36:45311浏览

仿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="css/zuoye.css">
  8.     <title>Document</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=""><img src="images/user-pic.jpeg" alt="" ></a>
  18.                     </div>
  19.                 </div>
  20.             </div>
  21.             <div class="navs">
  22.                 <div class="content">
  23.                     <a href=""><img src="images/logo.png"></a>
  24.                     <nav>
  25.                         <a class="active" href="">首页</a>
  26.                         <a href="">视频教程</a>
  27.                         <a href="">学习路径</a>
  28.                         <a href="">php培训</a>
  29.                         <a href="">资源下载</a>
  30.                     </nav>
  31.                     <div class="search">
  32.                     <input type="search"  placeholder="输入关键字" >
  33.                     <span class="iconfont  icon-fangdajing1"></span>
  34.                     </div>
  35.                 </div>
  36.             </div>
  37.     </header>
  38.     <main>
  39.         <div class="navs">
  40.             <div class="left">
  41.                 <a href="">视频教程</a>
  42.                 <a href="">学习路径</a>
  43.                 <a href="">PHP培训</a>
  44.                 <a href="">资源下载</a>
  45.                 <a href="">技术文章</a>
  46.                 <a href="">PHP培训</a>
  47.                 <a href="">资源下载</a>
  48.                 <a href="">技术文章</a>
  49.             </div>
  50.             <div class="slider">
  51.                 <img src="images/course.jpg">
  52.             </div>
  53.             <div class="right">
  54.                 <div class="main">
  55.                     <div class="user">
  56.                        <a href=""> <img src="images/user-pic.jpeg"></a>
  57.                         <div class="user-main">
  58.                             <a href="" class="user-name">kiraseo</a>
  59.                             <span>P豆 48.5</span>
  60.                         </div>
  61.                     </div>
  62.                 </div>
  63.                 <div class="study">
  64.                     <input type="button" value="我的学习">
  65.                 </div>
  66.                 <div class="list">
  67.                     <p><span>问答社区</span><a class="tag" href="">答疑</a></p>
  68.                     <p><span>头条</span><a href="">【吐血整理】2022年最新前端面试题大全及答案（收藏）</a></p>
  69.                     <p><span>公告</span><a href="">课程合作计划</a></p>
  70.                     <p><span>公告</span><a href="">课程合作计划</a></p>
  71.                     <p><span>公告</span><a href="">课程合作计划</a></p>
  72.                     <p><span>公告</span><a href="">课程合作计划</a></p>
  73.                 </div>
  74.             </div>
  75.             <div class="bottom-left">
  76.                 <div class="desc">
  77.                   <div class="title">学习路径</div>
  78.                   <span>全部7个&gt;</span>
  79.                 </div>
  80.                 <ul class="detail">
  81.                   <li onclick="">
  82.                     <img src="images/dgjj.png" alt="" />
  83.                     <a href="">独孤九贱</a>
  84.                     <span>9门课程</span>
  85.                   </li>
  86.                   <li onclick="">
  87.                     <img src="images/ynxj.png" alt="" />
  88.                     <a href="">独孤九贱</a>
  89.                     <span>9门课程</span>
  90.                   </li>
  91.                   <li onclick="">
  92.                     <img src="images/tlbb.png" alt="" />
  93.                     <a href="">独孤九贱</a>
  94.                     <span>9门课程</span>
  95.                   </li>
  96.                   <li onclick="">
  97.                     <img src="images/phpkjkf.png" alt="" />
  98.                     <a href="">独孤九贱</a>
  99.                     <span>9门课程</span>
  100.                   </li>
  101.                   <li onclick="">
  102.                     <img src="images/phpksrm.png" alt="" />
  103.                     <a href="">独孤九贱</a>
  104.                     <span>9门课程</span>
  105.                   </li>
  106.                 </ul>
  107.               </div>
  108.               <div class="bottom-right">
  109.                     <a href=""><img src="images/tlbb.png" alt=""><span>课程</span></a>
  110.                     <a href=""><img src="images/tlbb.png" alt=""><span>课程</span></a>
  111.               </div>
  112.         </div>
  113.     </main>
  114. </body>
  115. </html>

css代码如下

  1. @import url("https://at.alicdn.com/t/font_3205780_7eqow85axa.css");
  2. *{margin: 0; padding: 0; box-sizing: border-box;}
  3. a{text-decoration: none; color: #333;}
  4. li{list-style: none;}
  5. body{
  6.     background-color: #f3f5f7;
  7. }
  8. header   .top{
  9.     width: 100vw;
  10. }
  11. header  .top{
  12.     height: 40px;
  13.     background-color: #343434;
  14.     color: #aaa;
  15. }
  16. header .top  .content,
  17. header .navs .content,
  18. main .navs{
  19.   width: 1200px;
  20.   margin: auto;
  21. }
  22. header  .top  .content{
  23.   display: grid;
  24.   grid-template-columns: 400px 100px;
  25.   place-content: space-between ;
  26.   place-items: center start;
  28. }
  29. header .top  .content  .right{
  30.     display: grid;
  31.     grid-template-columns: 30px  60px;
  32.     place-content: space-between ;
  33.   place-items: center start;
  34. }
  35. header .top .content .right  .iconfont{
  36.          color: #eee;
  37.          font-size: larger;
  38. }
  39. header .top .content img{
  40.     width: 50%;
  41.     border-radius: 50%;
  42. }
  43. header .navs{
  44.     height: 90px;
  45. }
  46. header .navs .content{
  47.     display: grid;
  48.     grid-template-columns: 140px  1fr  200px;
  49.     place-content: space-between ;
  50.     place-items: center start;
  51. }
  52. header .navs .content img{
  53.      width: 140px;
  54. }
  55. header .navs .content nav{
  56.     display: flex;
  57.     padding: 0 1em;
  58.     place-content: space-between ;
  59.     place-items: center start;
  60. }
  61. header .navs .content nav a{
  62.     margin-left: 24px;
  63.     font-size: larger;
  64.     font-weight: lighter;
  65. }
  66. header .navs  .content  nav  a.active,
  67. header .navs  .content  nav  a:hover,
  68. main .navs  .left a:hover,
  69. header  .navs  .content  .search  .iconfont:hover{
  70.     color: red;
  71. }
  72. header  .navs  .content  .search{
  73.     display: grid;
  74.     grid-template-columns: 200px  1fr;
  75.     place-content: space-between ;
  76.     place-items: center start;
  77. }
  78. header  .navs  .content  .search  input[type='search']{
  79.             border: none;
  80.             outline: none;
  81.             background-color: #e9e9e9;
  82.             padding-left: 10px;
  83.             border-radius: 25px;
  84.             height: 40px;
  85. }
  86. header  .navs  .content  .search  .iconfont{
  87.     position: relative;
  88.     left: -50px;
  89. }
  90. main{
  91.     font-size: 14px;
  92. }
  93. main .navs{
  94.     display: grid;
  95.     grid-template-columns:160px   810px  200px;  
  96.     grid-template-rows: 400px 80px;
  97.     gap:20px;
  98. }
  99. main .navs > * {
  100.     background-color: #fff;
  101.     border-radius: 20px;
  102.   }
  103. main .navs  .left{
  104.     display: flex;
  105.     flex-direction: column;
  106.     place-content: space-between;
  107. }
  108. main .navs  .left a{
  109.     width: 126px;
  110.     margin: auto;
  111.     font-size: larger;
  112.     font-weight: lighter;
  113.     text-align: center;
  114. }
  115. main .navs .slider img{
  116.     width: 100%;
  117.     height: 100%;
  118. }
  119. main .navs .right .main{
  120.     padding: 1em;
  121. }
  122. main .navs .right .main .user{
  123.     display: grid;
  124.     grid-template-columns:20px 80px;
  125.     place-content: center;
  126.     place-items: flex-end;
  127. }
  128. main .navs .right  .main  .user  img{
  129.     border-radius:50% ;
  130.     width: 40px;
  131. }
  132. main .navs .right .main  .user .user-main{
  133.     font-size: 15px;
  134.     margin-left: 18px;
  135.     place-content: center;
  136.     place-self: start;
  137. }
  138. main .navs .right .main .user .user-main .user-name{
  139.     font-size: larger;
  140.     font-weight: bolder;
  141. }
  142. main .navs .right .study{
  143.     padding: 1em 1em 2em 1em;
  144. }
  145. main .navs .right .study input[type='button']{
  146.     width: 92%;
  147.     height: 34px;
  148.     border: none;
  149.     outline: none;
  150.     border-radius: 25px;
  151.     background-color: red;
  152.     color: #fff;
  153. }
  154. main .navs .right .list{
  155.     padding-top: 7px;
  156.     display: flex;
  157.     flex-direction: column;
  158.     place-content: space-between;
  159.     margin: auto;
  160.     height: 250px;
  161. }
  162. /*问答社区*/
  163. main .navs .right .list p{
  164.     display: grid;
  165.     grid-template-columns: 1fr 130px;
  166.     place-content: center;
  167.     place-self: self-start;
  168. }
  169. main .navs .right .list p span{
  170.     font-size: larger;
  171.     font-weight:lighter;
  172.     color: #333;
  173.     place-items:start;
  174.     place-self: baseline;
  175.     margin-right: 17px;
  176.     width: 100%;
  177. }
  178. body main .navs .right .list p .tag{
  179.     background-color: #ff583d;
  180.     color: #fff;
  181.     margin-left: 10px;
  182. }
  183. main .navs .right .list p a{
  184.     place-items:end;
  185.     place-content: center;
  186.     place-self: start; 
  187. }
  188. main .navs .right .list p a:hover{
  189.     color: red;
  190. }
  191. main .navs .bottom-left {
  192.     grid-column: span 2;
  193.     display: grid;
  194.     grid-template-columns:100px 1fr;
  195.   }
  196. main .navs .bottom-left .desc {
  197.     padding: 16px 0;
  198.     display: grid;
  199.     place-items: center;
  200.   }
  201. main .navs .bottom-left .desc span {
  202.     font-size: 12px;
  203.     color: #999;
  204.   }
  205.   main .navs .bottom-left  .detail{
  206.     display: flex;
  207.     place-items: center;
  208.   place-content: space-between;
  209.   padding: 20px;
  210.   }
  211.   main .navs .bottom-left  .detail  >li{
  212.     display: grid;
  213.     grid-template-columns:36px  85px;  
  214.     height: 36px;
  215.   }
  216.   main .navs .bottom-left  .detail>li>img{
  217.     width: 100%;
  218.     grid-row: span 2;
  219.   }
  220.   main .navs .bottom-left .detail a,
  221.   main .navs .bottom-left  .detail span{
  222.     margin-left: 10px;
  223.   }
  224.   main .navs .bottom-left .detail a{
  225.    font-size: 14px;
  226.   }
  227.   main .navs .bottom-left  .detail span{
  228.     font-size: 12px;
  229.     color: #999;
  230.   }
  231. main  .navs  .bottom-right{
  232.     display: flex;
  233.     flex-direction: row;
  234.     place-content: space-between;
  235. }
  236. main  .navs  .bottom-right a{
  237.     display: grid;
  238.     place-content: center;
  239.     place-items: center;
  240.     place-self: baseline;
  241. }
  242. main  .navs  .bottom-right  img{
  243.     width: 40%;
  244.     border-radius: 50%;
  245. }

最终效果图

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

相关文章

查看更多