PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

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

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

grid仿PHP中文网首页

仿php中文网

index.html

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

grid.css

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

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