博主信息
豌豆君
博文
22
粉丝
0
评论
0
访问量
5890
积分:0
P豆:46

用grid仿php.cn首页,grid实现媒体查询

2021年03月25日 12:01:52阅读数:208博客 / 豌豆君/ html

用grid仿php.cn首页 代码

  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>用grid仿php.cn首页</title>
  8. <link rel="stylesheet" href="php.css">
  9. </head>
  10. <body>
  11. <!-- 页眉 -->
  12. <header>
  13. <ul><div>php中文网</div></ul>
  14. <ul class="top-navs">
  15. <li>
  16. <div class="title">首页</div>
  17. </li>
  18. <li>
  19. <div class="title">视频教程</div>
  20. </li>
  21. <li>
  22. <div class="title">入门教程</div>
  23. </li>
  24. <li>
  25. <div class="title">社区问答</div>
  26. </li>
  27. <li>
  28. <div class="title">技术文章</div>
  29. </li>
  30. <li>
  31. <div class="title">资源下载</div>
  32. </li>
  33. <li>
  34. <div class="title">工具下载</div>
  35. </li>
  36. <li>
  37. <div class="title">PHP培训</div>
  38. </li>
  39. </ul>
  40. <ul>声音</ul>
  41. </header>
  42. <!-- 主体顶部区 -->
  43. <div class="main-top">
  44. <!-- 侧边菜单 -->
  45. <nav class="menus">
  46. <li class="item">
  47. <h5>php开发</h5>
  48. <h5>></h5>
  49. </li>
  50. <li class="item">
  51. <h5>前端开发</h5>
  52. <h5>></h5>
  53. </li>
  54. <li class="item">
  55. <h5>服务端开发</h5>
  56. <h5>></h5>
  57. </li>
  58. <li class="item">
  59. <h5>移动开发</h5>
  60. <h5>></h5>
  61. </li>
  62. <li class="item">
  63. <h5>数据库</h5>
  64. <h5>></h5>
  65. </li>
  66. <li class="item">
  67. <h5>服务器运维&下载</h5>
  68. <h5>></h5>
  69. </li>
  70. <li class="item">
  71. <h5>在线工具箱</h5>
  72. <h5>></h5>
  73. </li>
  74. <li class="item">
  75. <h5>常用类库</h5>
  76. <h5>></h5>
  77. </li>
  78. </nav>
  79. <!-- 顶部菜单 -->
  80. <ul class="navs">
  81. <li>
  82. <div>
  83. <a href="">PHP头条</a>
  84. <h6></h6>
  85. </div>
  86. </li>
  87. <li>
  88. <div>
  89. <a href="">独孤九贱</a>
  90. <h6></h6>
  91. </div>
  92. </li>
  93. <li>
  94. <div>
  95. <a href="">学习路线</a>
  96. <h6></h6>
  97. </div>
  98. </li>
  99. <li>
  100. <div>
  101. <a href="">在线工具</a>
  102. <h6></h6>
  103. </div>
  104. </li>
  105. <li>
  106. <div>
  107. <a href="">趣味课堂</a>
  108. <h6></h6>
  109. </div>
  110. </li>
  111. <li>
  112. <div>
  113. <a href="">社区问答</a>
  114. <h6></h6>
  115. </div>
  116. </li>
  117. <li>
  118. <div>
  119. <a href="">课程直播</a>
  120. <h6></h6>
  121. </div>
  122. </li>
  123. <li><input type="text" placeholder="输入关键字搜索"></li>
  124. </ul>
  125. <!-- 轮播图 -->
  126. <div class="slider"><img src="https://img.php.cn/upload/article/000/000/001/6034a327aef30703.png" alt=""></div>
  127. <!-- 底部的课程推荐 -->
  128. <ul class="course">
  129. <li><a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a></li>
  130. <li><a href=""><img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt=""></a></li>
  131. <li><a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a></li>
  132. <li><a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a></li>
  133. </ul>
  134. </div>
  135. <!-- 课程列表区 -->
  136. <div class="main-courses">
  137. <div class="title">
  138. <div><\></div><div>php入门精品课程</div><div><\></div>
  139. </div>
  140. <ul class="course-list">
  141. <li><a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a></li>
  142. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  143. <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a></li>
  144. <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg" alt=""></a></li>
  145. <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""></a></li>
  146. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg" alt=""></a></li>
  147. <li><a href=""><img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg" alt=""></a></li>
  148. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg" alt=""></a></li>
  149. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt=""></a></li>
  150. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg" alt=""></a></li>
  151. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt=""></a></li>
  152. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg" alt=""></a></li>
  153. <li><a href=""><img src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg" alt=""></a></li>
  154. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg" alt=""></a></li>
  155. </ul>
  156. </div>
  157. <!-- 课程列表区 -->
  158. <div class="main-courses">
  159. <div class="title">
  160. <div><\></div><div>php进阶学习课程</div><div><\></div>
  161. </div>
  162. <ul class="course-list">
  163. <li><a href=""><img src="https://www.php.cn/static/images/index_learn_middel.jpg" alt=""></a></li>
  164. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e1577037989.jpg" alt=""></a></li>
  165. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24010108e3d268.jpg" alt=""></a></li>
  166. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a372b552a2c4233.jpg" alt=""></a></li>
  167. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a3728258bf9f213.jpg" alt=""></a></li>
  168. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a373991d9cd9819.jpg" alt=""></a></li>
  169. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""></a></li>
  170. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a5322a085219472.jpg" alt=""></a></li>
  171. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a53090b27254106.jpg" alt=""></a></li>
  172. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d22b615e56bf130.jpg" alt=""></a></li>
  173. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a></li>
  174. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt=""></a></li>
  175. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24230536122573.jpg" alt=""></a></li>
  176. <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2402695ce37351.jpg" alt=""></a></li>
  177. </ul>
  178. </div>
  179. <!-- 页脚 -->
  180. <footer>
  181. <div class="left">
  182. <ul class="bottom-navs">
  183. <li><a href="">网站首页</a></li>
  184. <li><a href="">PHP视频</a></li>
  185. <li><a href="">PHP代码</a></li>
  186. <li><a href="">PHP手册</a></li>
  187. <li><a href="">词条</a></li>
  188. <li><a href="">手记</a></li>
  189. <li><a href="">编程词典</a></li>
  190. <li><a href="">php培训</a></li>
  191. </ul>
  192. <div>
  193. php中文网:公益在线php培训,帮助PHP学习者快速成长!
  194. </div>
  195. <div>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 |
  196. </div>
  197. </div>
  198. <div>二维码</div>
  199. </footer>
  200. </body>
  201. </html>

php.css 代码

  1. /* 初始化 */
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. li {
  8. list-style: none;
  9. }
  10. a {
  11. color: #444;
  12. text-decoration: none;
  13. }
  14. /* -------------------- */
  15. /* 页眉 */
  16. header {
  17. display: grid;
  18. grid-auto-flow:column;
  19. grid-template-columns:100px 1fr 100px;
  20. place-items: center space-between;
  21. height: 60px;
  22. background-color: black;
  23. color: #999;
  24. margin-bottom: 30px;
  25. }
  26. header>ul:first-of-type, header>ul:last-of-type{
  27. text-align: center;
  28. line-height: 60px;
  29. }
  30. header>ul.top-navs {
  31. height: 60px;
  32. display: grid;
  33. grid-auto-flow:column;
  34. place-items: space-between center;
  35. gap: 1px;
  36. }
  37. header>ul.top-navs>li {
  38. height: 60px;
  39. display: grid;
  40. place-items: center center;
  41. grid-template-rows:1fr 5px;
  42. cursor: pointer;
  43. }
  44. header>ul.top-navs>li:hover{
  45. border-bottom: 5px solid lightgreen;
  46. }
  47. header>ul.top-navs>li:first-of-type{
  48. background-color: #444;
  49. }
  50. /* 页脚 */
  51. footer {
  52. display: grid;
  53. grid-auto-flow:column;
  54. grid-template-columns:1fr 100px;
  55. height: 160px;
  56. color: #666;
  57. background-color: #444;
  58. place-items: center start;
  59. }
  60. footer>div.left{
  61. width: 100%;
  62. height: 160px;
  63. display: grid;
  64. place-items: center start;
  65. }
  66. footer .left>ul.bottom-navs {
  67. display: grid;
  68. grid-auto-flow:column;
  69. gap: 10px;
  70. margin-left: 10px;
  71. }
  72. footer .left>ul.bottom-navs>li>a {
  73. color: white;
  74. }
  75. /* 主体顶部区 */
  76. .main-top {
  77. height: 510px;
  78. width: 1200px;
  79. margin-bottom: 30px;
  80. display: grid;
  81. grid-template-columns: 216px 1fr;
  82. grid-template-rows: 60px 1fr 120px;
  83. margin: auto;
  84. }
  85. /* 左侧导航区 */
  86. .main-top>nav.menus {
  87. grid-area: span 3;
  88. background-color: #444;
  89. color: #ccc;
  90. border-radius: 10px 0 0 10px ;
  91. padding: 10px 0 10px 0;
  92. display: grid;
  93. grid-template-columns: 1fr;
  94. place-items: center space-between;
  95. }
  96. .main-top>nav.menus>li.item {
  97. display: grid;
  98. grid-auto-flow:column;
  99. grid-template-columns: 1fr 20px;
  100. padding: 0 0px 0 20px;
  101. place-items: center start;
  102. }
  103. .main-top>nav.menus>li.item:hover {
  104. background-color: #666;
  105. cursor: pointer;
  106. }
  107. /* 顶部的导航区 */
  108. .main-top>ul.navs {
  109. /* background-color: lightcyan; */
  110. display: grid;
  111. grid-template-columns: repeat(8,103px) 1fr;
  112. place-items: center;
  113. border-radius: 0 10px 0 0;
  114. }
  115. .main-top>ul.navs>li>div {
  116. display: grid;
  117. grid-auto-flow:column;
  118. place-items: center center;
  119. }
  120. .main-top>ul.navs>li>div>h6 {
  121. width: 20px;
  122. color: white;
  123. text-align: center;
  124. }
  125. .main-top>ul.navs>li:nth-of-type(1)>div>h6 {
  126. background-color: orangered;
  127. }
  128. .main-top>ul.navs>li:nth-of-type(3)>div>h6 {
  129. background-color: #444;
  130. }
  131. .main-top>ul.navs>li:nth-of-type(5)>div>h6 {
  132. background-color: orange;
  133. }
  134. .main-top>ul.navs>li:last-of-type {
  135. background-color: #eee;
  136. height: 30px;
  137. /* 搜索 */
  138. place-self: center start;
  139. padding: 0px 10px 0 10px;
  140. }
  141. .main-top>ul.navs>li:last-of-type>input {
  142. height: 30px;
  143. border: none;
  144. outline: none;
  145. background-color: #eee;
  146. }
  147. /* 轮播图已经自动归位了 */
  148. .main-top .slider {
  149. /* background-color: #ccc; */
  150. }
  151. /* 底部的课程推荐 */
  152. .main-top>ul.course>li>a>img{
  153. background-color: violet;
  154. cursor: pointer;
  155. border-radius: 10px;
  156. }
  157. .main-top>ul.course {
  158. /* background-color: wheat; */
  159. grid-template-columns: repeat(4,1fr);
  160. gap: 10px;
  161. padding: 10px;
  162. display: grid;
  163. border-radius: 0 0 10px 0;
  164. }
  165. /* -------------------- */
  166. /* 主体课程 */
  167. .main-courses {
  168. width: 1200px;
  169. height: 646px;
  170. padding: 15px;
  171. background-color: lightskyblue;
  172. margin: 30px auto;
  173. display: grid;
  174. grid-template-rows: 50px 1fr;
  175. gap: 20px;
  176. border-radius: 10px;
  177. }
  178. /* 标题 */
  179. .main-courses .title {
  180. color: #444;
  181. display: grid;
  182. grid-auto-flow:column;
  183. grid-template-columns: 1fr 130px 1fr;
  184. place-items: center center;
  185. margin-bottom: 30px;
  186. font-weight: bolder;
  187. }
  188. .main-courses .title>div:first-of-type {
  189. color: blue;
  190. place-self: center end;
  191. }
  192. .main-courses .title>div:last-of-type {
  193. color: blue;
  194. place-self: center start;
  195. }
  196. .main-courses .course-list {
  197. display: grid;
  198. grid-template-columns: repeat(5,1fr);
  199. grid-template-rows: repeat(3,1fr);
  200. gap: 20px;
  201. }
  202. .main-courses .course-list>li>a>img {
  203. width: 100%;
  204. border-radius: 10px;
  205. }
  206. .main-courses .course-list>li:first-of-type {
  207. grid-area: span 2;
  208. }

效果图

grid实现媒体查询:美女相册 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>grid实现媒体查询:美女相册</title>
  7. <style>
  8. /* 样式重置 */
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. a {
  15. text-decoration: none;
  16. color: #555;
  17. }
  18. body {
  19. background-color: lightseagreen;
  20. background-color: violet;
  21. }
  22. h1 {
  23. color: white;
  24. text-align: center;
  25. font-weight: normal;
  26. text-shadow: 2px 2px 2px #444;
  27. margin-top: 1em;
  28. }
  29. .container {
  30. min-width: 100vw;
  31. min-height: 100vh;
  32. padding: 3em;
  33. display: grid;
  34. /* 自动填充,可以实现媒体查询的效果 */
  35. grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  36. grid-template-rows: repeat(auto-fit, minmax(13em, 70%));
  37. /* 垂直紧贴起始线(顶部), 水平则平均对齐 */
  38. place-content: start space-evenly;
  39. gap: 1.5em;
  40. }
  41. .container img {
  42. width: 100%;
  43. }
  44. .container>.item {
  45. background-color: #eee;
  46. padding: 1em;
  47. border-radius: 0.5em;
  48. display: grid;
  49. place-items: center;
  50. }
  51. .container>.item:hover {
  52. background-color: pink;
  53. cursor: pointer;
  54. transition: 1s;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <h1>前女友相册</h1>
  60. <div class="container">
  61. <div class="item">
  62. <a href=""><img src="girl.jpg" alt="" /></a>
  63. <a href="">前女友1</a>
  64. </div>
  65. <div class="item">
  66. <a href=""><img src="girl.jpg" alt="" /></a>
  67. <a href="">前女友2</a>
  68. </div>
  69. <div class="item">
  70. <a href=""><img src="girl.jpg" alt="" /></a>
  71. <a href="">前女友3</a>
  72. </div>
  73. <div class="item">
  74. <a href=""><img src="girl.jpg" alt="" /></a>
  75. <a href="">前女友4</a>
  76. </div>
  77. <div class="item">
  78. <a href=""><img src="girl.jpg" alt="" /></a>
  79. <a href="">前女友5</a>
  80. </div>
  81. <div class="item">
  82. <a href=""><img src="girl.jpg" alt="" /></a>
  83. <a href="">前女友6</a>
  84. </div>
  85. <div class="item">
  86. <a href=""><img src="girl.jpg" alt="" /></a>
  87. <a href="">前女友7</a>
  88. </div>
  89. <div class="item">
  90. <a href=""><img src="girl.jpg" alt="" /></a>
  91. <a href="">前女友8</a>
  92. </div>
  93. <div class="item">
  94. <a href=""><img src="girl.jpg" alt="" /></a>
  95. <a href="">前女友9</a>
  96. </div>
  97. <div class="item">
  98. <a href=""><img src="girl.jpg" alt="" /></a>
  99. <a href="">前女友10</a>
  100. </div>
  101. </div>
  102. </body>
  103. </html>

效果图

grid布局总结:

1.定义宽高。
2.通过grid-auto-flow定义行或列方式,
3.通过“grid-template-columns,grid-template-rows,grid-area”定义单元格的结构
4.通过“gap,padding,margin”来定义间隔

自动填充,可以实现媒体查询的效果

grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
grid-template-rows: repeat(auto-fit, minmax(13em, 70%));

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论