search

博客列表 >0329作业-grid仿PHP中文网首页

0329作业-grid仿PHP中文网首页

千山暮雪
千山暮雪原创
2021年03月30日 17:53:40671浏览

grid仿PHP中文网首页

仿php中文网

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="css/graid.css">
  10.     <link rel="stylesheet" href="css/header.css">
  11.     <link rel="stylesheet" href="css/main.css">
  12. </head>
  14. <body>
  15.     <header class="header row">
  16.         <div class="item col-12-1"><span>php</span><span>中文网</span></div>
  17.         <div class="item col-12-1">首页</div>
  18.         <div class="item col-12-1">视频教程</div>
  19.         <div class="item col-12-1">入门教程</div>
  20.         <div class="item col-12-1">社区问答</div>
  21.         <div class="item col-12-1">技术文章</div>
  22.         <div class="item col-12-1">资源下载</div>
  23.         <div class="item col-12-1">编程词典</div>
  24.         <div class="item col-12-1">工具下载</div>
  25.         <div class="item col-12-1">php培训</div>
  26.         <div class="item col-12-1"></div>
  27.         <div class="item col-12-1">
  28.             <div class="col-12-6"></div>
  29.             <div class="col-12-6"><img src="img/user_avatar.jpg" alt=""></div>
  30.         </div>
  31.     </header>
  32.     <div class="container">
  33.         <div class="ad">
  34.             <div class="left">
  35.                 <div class="row">
  36.                     <div class="col-12-12">
  37.                         <ul>
  38.                             <li><span>php开发</span>
  39.                                 <span>&gt;</span>
  40.                             </li>
  41.                             <li><span>前端开发</span>
  42.                                 <span>&gt;</span>
  43.                             </li>
  44.                             <li><span>服务器开发</span>
  45.                                 <span>&gt;</span>
  46.                             </li>
  47.                             <li><span>移动开发</span>
  48.                                 <span>&gt;</span>
  49.                             </li>
  50.                             <li>
  51.                                 <span>数据库</span>
  52.                                 <span>&gt;</span>
  53.                             </li>
  54.                             <li><span>服务器运维&下载</span>
  55.                                 <span>&gt;</sapn>
  56.                             </li>
  57.                             <li><span>在线工具箱</span>
  58.                                 <span>&gt;</span>
  59.                             </li>
  60.                             <li><span>常用类库</span>
  61.                                 <span>&gt;</sapn>
  62.                             </li>
  63.                         </ul>
  64.                     </div>
  65.                 </div>
  66.             </div>
  67.             <div class="right">
  68.                 <div class="row">
  69.                     <div class="col-12-12">
  70.                         <ul>
  71.                             <div class="item">
  72.                                 <span>PHP头条</span>
  73.                                 <span>新</span>
  74.                             </div>
  75.                             <div class="item">
  76.                                 <span>独孤九贱</span>
  77.                             </div>
  78.                             <div class="item">
  79.                                 <span>学习路线</span>
  80.                                 <span>新</span>
  81.                             </div>
  82.                             <div class="item">
  83.                                 <span>在线工具</span>
  84.                             </div>
  85.                             <div class="item">
  86.                                 <span>趣味课堂</span>
  87.                                 <span>新</span>
  88.                             </div>
  89.                             <div class="item">
  90.                                 <span>社区问答</span>
  91.                             </div>
  92.                             <div class="item">
  93.                                 <span>课程直播</span>
  94.                             </div>
  95.                             <div class="item search">
  96.                                 <input type="text" placeholder="  输入关键司搜索">
  97.                             </div>
  98.                         </ul>
  99.                     </div>
  101.                 </div>
  102.                 <div class="row">
  103.                     <div class="col-12-12"> <img src="img/index_banner1.png" alt=""></div>
  105.                 </div>
  106.                 <div class="row">
  107.                     <div class="item col-12-3"><img src="img/index_php_item2_.png" alt="" srcset=""></div>
  108.                     <div class="item col-12-3"><img src="img/index_php_item3.jpg" alt="" srcset=""></div>
  109.                     <div class="item col-12-3"><img src="img/index_php_new4.jpg" alt="" srcset=""></div>
  110.                     <div class="item col-12-3"><img src="img/index_yunv.jpg" alt="" srcset=""></div>
  111.                 </div>
  112.             </div>
  113.         </div>
  114.         <div class="row php15">
  115.             <div class="col-12-12">
  116.                 <img src="img/6034a36c9c07c118.png" alt="" srcset="">
  117.             </div>
  118.         </div>
  119.     </div>
  120. </body>
  122. </html>

grid.css

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. :root {
  8.   font-size: 10px;
  9. }
  11. body {
  12.   font-size: 1.6rem;
  13.   width: 100vw;
  14.   height: 100vh;
  15.   display: grid;
  16.   place-content: start center;
  17. }
  19. .container {
  20.   width: 80vw;
  21.   display: grid;
  22. }
  23. .item {
  24.   color: gray;
  25. }
  27. .row {
  28.   display: grid;
  29.   grid-template-columns: repeat(12, 1fr);
  30.   grid-auto-flow: row;
  31.   grid-auto-rows: minmax(5rem, 10rem);
  32. }
  34. .col-12-12 {
  35.   grid-area: auto / span 12;
  36. }
  37. .col-12-11 {
  38.   grid-area: auto / span 11;
  39. }
  40. .col-12-10 {
  41.   grid-area: auto / span 10;
  42. }
  43. .col-12-9 {
  44.   grid-area: auto / span 9;
  45. }
  46. .col-12-8 {
  47.   grid-area: auto / span 8;
  48. }
  49. .col-12-7 {
  50.   grid-area: auto / span 7;
  51. }
  52. .col-12-6 {
  53.   grid-area: auto / span 6;
  54. }
  55. .col-12-5 {
  56.   grid-area: auto / span 5;
  57. }
  58. .col-12-4 {
  59.   grid-area: auto / span 4;
  60. }
  61. .col-12-3 {
  62.   grid-area: auto / span 3;
  63. }
  64. .col-12-2 {
  65.   grid-area: auto / span 2;
  66. }
  67. .col-12-1 {
  68.   grid-area: auto / span 1;
  69. }

header.css

  1. .header {
  2.   background-color: #000;
  3.   width: 100vw;
  4.   height: 5rem;
  5.   place-items: center;
  6. }
  7. .header > div {
  8.   width: minmax(5rem, auto);
  9. }
  10. .header > div:first-of-type {
  11.   color: #fff;
  12. }
  13. .header > div:first-of-type span:first-of-type {
  14.   font-size: 2rem;
  15.   font-style: italic;
  16.   background-color: #f11514;
  17.   border-radius: 0.5rem;
  18. }
  19. .header > div:first-of-type span:last-of-type {
  20.   font-size: 2.5rem;
  21.   font-style: italic;
  22. }
  23. .header > div:last-of-type img {
  24.   height: 3rem;
  25.   width: 3rem;
  26.   border-radius: 3rem;
  27. }

main.css

  1. body {
  2.   background-color: #f3f5f7;
  3.   gap: 1.5rem;
  4. }
  5. ul {
  6.   list-style: none;
  7. }
  9. body > .container {
  10.   place-self: start center;
  11. }
  13. .container > .ad {
  14.   display: grid;
  15.   grid-auto-flow: row;
  16.   grid-template-columns: 25% 75%;
  17.   border-radius: 1rem;
  18.   background-color: #fff;
  19. }
  20. .container > .ad > .left {
  21.   /* grid-area: 3span / auto; */
  22.   /* background-color: gold; */
  23.   background-color: #2b333b;
  24.   color: #9da0a4;
  25.   border-radius: 1rem 0 0 1rem;
  26. }
  27. .container > .ad > .left ul {
  28.   display: flex;
  29.   flex-flow: column;
  30.   justify-content: stretch;
  31. }
  32. .container > .ad > .left ul li {
  33.   padding: 1.7rem;
  34.   flex: auto;
  35.   position: relative;
  36. }
  37. .container > .ad > .left ul li span:nth-of-type(2) {
  38.   position: absolute;
  39.   right: 2rem;
  40. }
  41. .container > .ad > .right .row {
  42.   grid-area: auto / span 3;
  43. }
  44. .container > .ad > .right .row ul {
  45.   height: 100%;
  46.   display: flex;
  47.   justify-content: space-around;
  48.   align-items: center;
  49.   color: #3e3e3e;
  50. }
  51. .container > .ad > .right .row ul > .item:nth-of-type(1) span:nth-of-type(2) {
  52.   color: #fff;
  53.   background-color: #ff5722;
  54. }
  56. .container > .ad > .right .row ul > .item:nth-of-type(3) span:nth-of-type(2) {
  57.   color: #fff;
  58.   background-color: #2f4056;
  59. }
  60. .container > .ad > .right .row ul > .item:nth-of-type(5) span:nth-of-type(2) {
  61.   color: #fff;
  62.   background-color: #ffb800;
  63. }
  64. .container > .ad > .right .row ul .search > input {
  65.   width: 25rem;
  66.   height: 3rem;
  67.   background-color: #f1f0f0;
  68.   border: none;
  69. }
  70. .container > .ad > .right .row:first-of-type {
  71.   place-content: end;
  72.   height: 5rem;
  73. }
  74. .container > .ad > .right .row:nth-of-type(2) {
  75.   height: 31rem;
  76. }
  77. .container > .ad > .right .row:nth-of-type(2) img {
  78.   width: 100%;
  79. }
  80. .container > .ad > .right .row:last-of-type {
  81. }
  82. .container > .ad > .right .row:last-of-type img {
  83.   width: 100%;
  84.   border-radius: 1rem;
  85. }
  86. .container > .ad > .right .row:last-of-type .col-12-3 {
  87.   margin: 1rem 0.5rem;
  88. }
  90. .container > .row.php15 {
  91.   margin: 3rem 0;
  92. }
  93. .container > .row.php15 img {
  94.   width: 100%;
  95.   border-radius: 1.5rem;
  96. }
上一条：CSS-01选择器与语法下一条：处理mvc的控制器访问与参数解析
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多