Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用grid仿php.cn首页，grid实现媒体查询
Blogger Information
Blog 22
fans 0
comment 0
visits 21190
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
用grid仿php.cn首页，grid实现媒体查询
豌豆君
Original
644 people have browsed it

用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>
  136.     <!-- 课程列表区 -->
  137.     <div class="main-courses">
  138.         <div class="title">
  139.             <div><\></div><div>php入门精品课程</div><div><\></div>
  140.         </div>
  141.         <ul class="course-list">
  142.             <li><a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a></li>
  143.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  144.             <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a></li>
  145.             <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg" alt=""></a></li>
  146.             <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""></a></li>
  147.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg" alt=""></a></li>
  148.             <li><a href=""><img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg" alt=""></a></li>
  149.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg" alt=""></a></li>
  150.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt=""></a></li>
  151.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg" alt=""></a></li>
  152.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt=""></a></li>
  153.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg" alt=""></a></li>
  154.             <li><a href=""><img src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg" alt=""></a></li>
  155.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg" alt=""></a></li>
  156.         </ul>
  157.     </div>
  158.     <!-- 课程列表区 -->
  159.     <div class="main-courses">
  160.         <div class="title">
  161.             <div><\></div><div>php进阶学习课程</div><div><\></div>
  162.         </div>
  163.         <ul class="course-list">
  164.             <li><a href=""><img src="https://www.php.cn/static/images/index_learn_middel.jpg" alt=""></a></li>
  165.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e1577037989.jpg" alt=""></a></li>
  166.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24010108e3d268.jpg" alt=""></a></li>
  167.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a372b552a2c4233.jpg" alt=""></a></li>
  168.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a3728258bf9f213.jpg" alt=""></a></li>
  169.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a373991d9cd9819.jpg" alt=""></a></li>
  170.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""></a></li>
  171.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a5322a085219472.jpg" alt=""></a></li>
  172.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a53090b27254106.jpg" alt=""></a></li>
  173.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d22b615e56bf130.jpg" alt=""></a></li>
  174.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a></li>
  175.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt=""></a></li>
  176.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24230536122573.jpg" alt=""></a></li>
  177.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2402695ce37351.jpg" alt=""></a></li>
  178.         </ul>
  179.     </div>
  180.     <!-- 页脚 -->
  181.     <footer>
  182.         <div class="left">
  183.             <ul class="bottom-navs">
  184.                 <li><a href="">网站首页</a></li>
  185.                 <li><a href="">PHP视频</a></li>
  186.                 <li><a href="">PHP代码</a></li>
  187.                 <li><a href="">PHP手册</a></li>
  188.                 <li><a href="">词条</a></li>
  189.                 <li><a href="">手记</a></li>
  190.                 <li><a href="">编程词典</a></li>
  191.                 <li><a href="">php培训</a></li>
  192.             </ul>
  193.             <div>
  194.                 php中文网：公益在线php培训，帮助PHP学习者快速成长！
  195.             </div>
  196.             <div>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 |
  197.             </div>
  198.         </div>
  199.         <div>二维码</div>
  200.     </footer>
  201. </body>
  202. </html>

php.css 代码

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

效果图

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

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

Correcting teacher：天蓬老师天蓬老师

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