简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿php中文网
Blogger Information
Blog 46
fans 2
comment 0
visits 19482
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粉314265155
Original
449 people have browsed it

效果演示

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.     <title>Document</title>
  8.     <link rel="stylesheet" href="../0714/static/css/zuoyi1.css">
  10. </head>
  11. <body>
  12.     <header>
  13.         <div class="header"><p>我是头部导航</p></div>
  14.     </header>
  16.     <main class="main">
  17.         <!-- 中间导航 -->
  18.    <div class="navs">
  19.      <div class="left">
  20.         <a href=""><h6>开发</h6></a>
  21.         <a href=""><h6>测试</h6></a>
  22.         <a href=""><h6>上线</h6></a>
  23.         <a href=""><h6>试运行</h6></a>
  24.         <a href=""><h6>验收</h6></a>
  25.      </div>
  26. <!-- 中间 -->
  27.      <div class="content">
  28.         <a href=""><img src="../0714/0714/static/images/course4.jpg" alt=""></a>
  29.         <a href=""></a>
  30.         <a href=""></a>
  31.         <a href=""></a>
  32.    </div>
  33.    <!-- 右侧 -->
  34.    <div class="right">   
  35.     <div class="top-right">
  36. <a href=""><img src="../0714/0714/static/images/user-pic.jpeg" alt=""></a>
  37. <a href=""><P>P粉314265155</P></a>
  38. <a href=""><h6 style="color:red ;">P豆：30.00</h6></a>
  39.  <button>我的学习</button> 
  40.    </div>
  41.    <div class="footer-right">
  42.     <a href=""><span>问答社区:</span></a>
  43.     <a href=""><span>答疑</span></a>
  44.       <ul>
  46.         <li><span>头条: <a href="">我是头条内容</a></span>
  48.         </li>
  49.         <li><span>福利:  <a href="">我是福利内容</a></span>
  51.         </li>
  52.         <li><span>领班 :<a href="">我是领班内容</a></span>
  53.         </li>
  54.         <li><span>招募:<a href="">我是招募内容</a></span>
  55.         </li>
  56.         <li><span>公告:<a href="">我是公告内容</a></span>
  57.         </li>
  59.       </ul>
  62.    </div>
  63. </div>
  64. </div>
  65.     </main>
  66. </body>
  67. </html>

css 代码

  1. @import url(reset.css);
  2. header{
  3.     width: 100vw;
  4.     height: 60px;
  5.     background-color: aqua;
  6.     text-align: center;
  8.     position: fixed;
  9.     top: 0;
  10.     right: 0;
  11.     left: 0;
  13.     z-index: 100;
  14. }
  17. main  .navs{
  18.     display: flex;
  19.     grid-template-columns: 180px  300px   120px;
  20.     grid-template-rows: 200px 80px;
  21.     background-color: blueviolet;
  22.    border: 2px solid red;
  23.     position: relative;
  24.     top: 80px;
  25.      z-index: 1;
  26.      width: auto;
  28. }
  31. main .navs .left 
  32. {
  33.     display: grid;
  34.     grid-auto-flow: row;
  36.     /* grid-template-rows: 20px 20px 20px 20px 20px; */
  37.     grid-template-rows: repeat(5,40px);
  38.     gap: 10px;
  39.     place-content:center;
  40.     background-color: white;
  41.     font-size: larger;
  42.     font-weight: 100;
  43.     place-content: center;
  44.     margin-left: 250px;
  45.     padding-top: 20px;
  46.     border-radius: 10px;
  47.     border: 2px solid red;
  48.     min-width: 120px;
  50. }
  51. main .navs .left a.hover {
  52.     font-weight: bold;
  53.     color: red;
  54.     color: red;
  55.     /* 小手 */
  56.     cursor: pointer;
  57. }
  58. main .navs .content img {
  59.     min-height: 200px;
  60.     height: 400px;
  61.     width: 500px;
  62.     height: 400px;
  63.     border-radius: 10px;
  64.     }
  66.     main .navs .right {
  67.          display: grid;
  68.          grid-template-columns: 180px;
  69.          grid-template-rows: 100px 300px;
  70.          border: 2px solid red;
  71.          min-width:140px; ;
  72.          background-color: white;
  73.          border-radius: 10px;
  75.     }
  77.     main  .navs  .right .top-right {
  78.         display: grid;
  79.         grid-template-columns:  60px   110px;
  80.         grid-template-rows: 40px 20px 30px;
  81.         border-bottom: 2px solid black;
  82.     }
  84.     main .navs .right   a  img {
  86.         width: 50px;
  87.     border-radius: 30px;
  88.     border: 2px solid red;
  89.     margin-top: 10px;
  90.     margin-left: 10px;
  92.     }
  93.     main .navs .right   a  p {
  95.        width: 100px;
  96.         border: 2px solid red;
  97.     margin-top: 10px;
  98.      margin-top: 10px;
  99.      margin-left: 10px;
  100.      font-size: 14px;
  101.      width: auto;
  105.     }
  106.     main .navs .right  .box-right  {
  107. grid-area:2 / 1 / span 3 / span 3;
  109.     } 
  110.     main .navs .right   a  h6 {
  111.     width: 100px;
  112.      border: 2px solid red;
  113.      margin-top: 0;
  114.      margin-left: 70px;
  115.      }
  117.      main .navs .right    button {
  118.         margin-top: 25px;
  119.         width: 140px;
  120.         height: 30px;
  121.         margin-left: -40px;
  122.         border-radius: 30px;
  123.         background-color: red;
  124.         font-size: larger;
  125.         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  127.      }
  129.      main .navs .right    button:hover{
  130.         font-weight: bold;
  131.      }
  133. main .navs .right  .footer-right { 
  134.     display: grid;
  135.     grid-template-columns: 80px  100px;
  136.     grid-template-rows: 80px  200px;
  137.     /* background-color: aquamarine; */
  138.     /* place-content:center; */
  139.     /* grid-template-rows: 141px 1fr; */
  140.     margin-left: 10px;
  141.     margin-top: 10px;
  142.     /* place-content: center   ; */
  144. }
  145. main .navs .right  .footer-right  > a:nth-of-type(1)
  146. { 
  147. font-size: 18px;
  148. font-weight: 520;
  149. padding-top: 3px;
  150. }
  151. main .navs .right  .footer-right  > a:nth-of-type(2)
  152. { 
  153.     width: 60px;
  154.     height: 30px;
  155.     background-color: blue;
  156.     /* place-self: center; */
  157.     border-radius: 10px;
  158.     padding-left: 12px;
  159.     padding-top: 3px;
  160.     margin-left: 15px;
  161. }
  162. main .navs .right  .footer-right  ul {
  163.      display: grid;
  164.      grid-template-columns: 200px   ;
  165.      grid-template-rows: repeat(5 , 30px);
  166.     /* background-color: aquamarine; */
  167.     font-size: larger;
  168.     margin-top: -40px;
  169.      /* gap: 40px; */
  170.      /* place-content: space-around;
  171.      place-items: center start; */
  172.      /* place-items:end; */
  173.      grid-auto-flow:column;
  174.      gap: 20px;
  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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！