search

博客列表 >用grid仿php.cn首页，grid实现媒体查询

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

豌豆君
豌豆君原创
2021年03月25日 12:01:52648浏览

用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%));

上一条：box-sizing下一条：css 样式的引入，选择器的使用和优先级 ----0322
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多