简体中文（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粉314265155
P粉314265155原创
2022年07月16日 13:27:11442浏览

效果演示

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. }
上一条：php.cn头部右侧的布局下一条：移动端布局详解/实例演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多