search

博客列表 >grid对齐属性、grid实战php网站首页、媒体查询

grid对齐属性、grid实战php网站首页、媒体查询

手机用户1576673622
手机用户1576673622原创
2021年02月01日 19:18:46559浏览

grid对齐属性

网格单元中的对齐方式和网格容器中的对齐方式

1.网格单元中的对齐方式

place-items: 所有项目在网格单元中的对齐方式

  1.         /* 1.设置容器中的“所有项目” 在网格单元中的对齐方式*/
  2.         .container {
  3.             /* place-items: 垂直方向 水平方向 */
  4.             /* 垂直居上 水平居中 */
  5.             place-items: start center;
  6.             place-items: center center;
  7.             /* 和上面效果一样。  在第二个值与第一个值相同时，可以省略第二个 */
  8.             place-items: center;
  10.             /* normal */
  11.             place-items: normal center;
  12.             /* normal当成auto的同义词 */
  13.             place-items: auto center;
  15.             /* 继承，继承默认值。可以把所有值回归默认 */
  16.             place-items: inherit;
  17.             /* 初始化 */
  18.             place-items: initial;
  19.             /* 切换 */
  20.             place-items: unset;
  22.             /* 拉伸,取消项目的固定尺寸才可以看到效果 */
  23.             place-items: stretch;
  24.         }



place-self：设置容器中的“某一个项目”在网格单元中的对齐方式 

  1.         /* 2. 设置容器中的“某一个项目”在网格单元中的对齐方式  */
  2.         /* 这个属性必须用在项目上: place-self */
  3.         .container>.item:nth-of-type(5) {
  4.             background-color: yellow;
  5.             place-self: center center;
  6.             place-self: end start;
  7.             /* 省去第二个start */
  8.             place-self: end;
  9.             /* 与下面的等效 */
  10.             place-self: end end;
  11.         }

2.项目在网格容器中的对齐方式

place-content：垂直方向 水平方向

  1.         .container {
  2.             height: 25em;
  3.             border: 1px solid #000;
  4.             padding: 0.5em;
  5.             display: grid;
  6.             /* 只有所有项目在容器中存在剩余空间时对齐才有必要且有意义 */
  7.             grid-template-columns: repeat(3, 10em);
  8.             grid-template-rows: repeat(2, 5em);
  9.             grid-auto-rows: 5em;
  10.             gap: 0.5em;
  11.             /* 默认值 */
  12.             /* 1. 将所有项目做为一个整体在容器中对齐 */
  13.             place-content: start start;
  14.             /* 水平居中 */
  15.             place-content: start center;
  16.             /* 垂直水平居中 */
  17.             place-content: center center;
  18.             place-content: center;
  19.             /* 2. 将所有项目打散成独立个体在容器中设置对齐方式 */
  20.             /* 二端对齐 */
  21.             place-content: space-between space-between;
  22.             place-content: space-between;
  23.              /* 每个项目都居中对齐 */
  24.             place-content: space-around space-evenly;
  25.         }

php中文网首页（仿）


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>php中文网</title>
  8.     <!-- 页眉 -->
  9.     <link rel="stylesheet" href="header.css">
  10.     <!-- 主体 顶部导航 -->
  11.     <link rel="stylesheet" href="main-top.css">
  12.     <!-- 主体 课程 -->
  13.     <link rel="stylesheet" href="main-courses.css">
  14.     <style>
  15.         * {
  16.             padding: 0;
  17.             margin: 0;
  18.             box-sizing: border-box;
  19.         }
  21.         li {
  22.             list-style: none;
  23.         }
  25.         a {
  26.             text-decoration: none;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <!-- 页眉 -->
  32.     <header class="top">
  33.         <div class="logo"><img src="tu/logos.png" alt=""></div>
  34.         <nav class="menus-top">
  35.             <ul class="navs-top">
  36.                 <li><a href="">首页</a></li>
  37.                 <li><a href="">视频教程</a></li>
  38.                 <li><a href="">入门教程</a></li>
  39.                 <li><a href="">社区问答</a></li>
  40.                 <li><a href="">技术文章</a></li>
  41.                 <li><a href="">资源下载</a></li>
  42.                 <li><a href="">编程词典</a></li>
  43.                 <li><a href="">工具下载</a></li>
  44.                 <li><a href="">PHP培训</a></li>
  45.             </ul>
  46.         </nav>
  47.     </header>
  49.     <!-- 主体 顶部 -->
  50.     <div class="main-top">
  51.         <!-- 侧边菜单 -->
  52.         <ul class="menus">
  53.             <li><a href="">php开发<span>&gt</span></a></li>
  54.             <li><a href="">前端开发<span>&gt</span></a></li>
  55.             <li><a href="">服务端开发<span>&gt</span></a></li>
  56.             <li><a href="">移动开发<span>&gt</span></a></li>
  57.             <li><a href="">数据库<span>&gt</span></a></li>
  58.             <li><a href="">服务器运维<span>&gt</span></a></li>
  59.             <li><a href="">在线工具箱<span>&gt</span></a></li>
  60.             <li><a href="">常用类库<span>&gt</span></a></li>
  61.         </ul>
  63.         <!-- 顶部菜单 -->
  64.         <ul class="navs">
  65.             <li><a href="">php头条</a></li>
  66.             <li><a href="">独孤九剑</a></li>
  67.             <li><a href="">学习路线</a></li>
  68.             <li><a href="">在线工具</a></li>
  69.             <li><a href="">趣味课堂</a></li>
  70.             <li><a href="">社区问答</a></li>
  71.             <li><a href="">课堂直播</a></li>
  72.             <li><input type="text" placeholder="输入关键字搜索"></li>
  74.         </ul>
  75.         <!-- 轮播图 -->
  76.         <div class="slider"><img src="https://img.php.cn/upload/article/000/000/001/5fb478a8e82cb116.jpg" alt=""></div>
  77.         <!-- 底部课程推荐 -->
  78.         <div class="course">
  79.             <li><a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a></li>
  80.             <li><a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a></li>
  81.             <li><a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a></li>
  82.             <li><a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a></li>
  83.         </div>
  84.     </div>
  86.     <!-- 主体课程区 -->
  87.     <div class="main-courses">
  88.         <h3>&lt;\&gt;php入门精品课程&lt;\&gt;</h3>
  89.         <ul class="course-list">
  90.             <li><a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a></li>
  91.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  92.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  93.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  94.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  95.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  96.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  97.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  98.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  99.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  100.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  101.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  102.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  103.             <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
  105.         </ul>
  106.     </div>
  108.     <footer>页脚</footer>
  109. </body>
  110. </html>

页眉

  1. header{
  2.     height: 60px;
  3.     background-color: #000;
  4.     margin-bottom: 30px;
  5.     display: grid;
  6.     grid-template-columns: 140px 1fr;
  7. }
  8. header .logo img{
  9.     height: 60px;
  10.     width: 140px;
  11. }
  12. header .menus-top .navs-top{
  13.     display: grid;
  14.     grid-template-columns: repeat(9,100px);
  15.     line-height: 60px;
  16.     font-size: 14px;
  17.     margin-left: 40px;
  18. }
  20. header .menus-top .navs-top a{
  21.     color: #B3B3B3;
  22. }

顶部导航

  1. .main-top {
  2.     height: 510px;
  3.     width: 1200px;
  4.     margin-bottom: 30px;
  5.     /* background-color: #ccc; */
  7.     display: grid;
  8.     grid-template-columns: 216px 1fr;
  9.     grid-template-rows: 60px 1fr 120px;
  10.     margin: auto;
  12.     box-shadow: 2px 2px 10px #999;
  13. }
  15. /* 左侧导航区 */
  16. .main-top .menus {
  17.     display: grid;
  18.     background-color: rgb(56, 51, 51);
  19.     grid-area: span 3;
  20.     border-radius: 10px 0 0 10px;
  21. }
  22. .main-top .menus li {
  23.     padding: 5px 10px 5px 20px;
  24.     margin: 12px;
  25. }
  26. .main-top .menus li span {
  27.     font-size: 20px;
  28.     text-align: right;
  29. }
  30. .main-top .menus li a {
  31.     color:  rgba(255,255,255,.6);
  32.     padding: 0 15px;
  33.     font-size: 16px;
  34. }
  36. /* 顶部导航区 */
  37. .main-top ul.navs {
  38.     background-color: #fff;
  39.     display: grid;
  40.     grid-template-columns: repeat(7, 83px) 1fr;
  41.     place-items: center;
  42.     border-radius: 0 10px 0 0;
  43. }
  44. .main-top ul.navs li:last-of-type {
  45.     background-color: #fff;
  46.     place-self: center start;
  47.     padding-left: 50px;
  48. }
  49. .main-top .navs li a {
  50.     color:  #000;
  51. }
  52. .main-top ul.navs input {
  53.     background-color: #f1f0f0;
  54.     border: none;
  55.     outline: none;
  56.     width: 240px;
  57.     height: 30px;
  58.     padding-left: 10px;
  59.     border-radius: 2px;
  60. }
  62. /* 轮播图 */
  63. .main-top .slider img {
  64.     width: 982px;
  65. }
  67. /* 底部推荐 */
  68. .main-top .course {
  69.     display: grid;
  70.     grid-template-columns: repeat(4,1fr);
  71.     place-items: center;
  72.     gap: 5px;
  73. }
  74. .main-top .course img {
  75.     border-radius: 5px;
  76. }

课程

  1. .main-courses {
  2.     width: 1200px;
  3.     height: 646px;
  5.     padding: 15px;
  6.     /* background-color: lightskyblue; */
  7.     margin: 30px auto;
  8.     display: grid;
  9.     grid-template-rows: 50px 1fr;
  10.     gap: 20px;
  12.     border-radius: 10px;
  13. }
  15. .main-courses h3 {
  16.     color: #444444;
  17.     text-align: center;
  18.     margin-bottom: 30px;
  19. }
  21. .main-courses .course-list {
  22.     display: grid;
  23.     grid-template-columns: repeat(5, 1fr);
  24.     grid-template-rows: repeat(3, 1fr);
  25.     gap: 20px;
  26. }
  28. .main-courses .course-list>* {
  29.     border-radius: 10px;
  31. }
  32. .main-courses .course-list img {
  33.     width: 218px;
  34.     height: 168px;
  35.     border-radius: 10px;
  36. }
  37. .main-courses .course-list img:last-of-type {
  38.     width: 218px;
  39.     height: auto;
  40. }
  42. .main-courses .course-list>li:first-of-type {
  43.     grid-area: span 2;
  44. }

媒体查询

  • grid的媒体查询与专业的媒体查询的区别

grid媒体查询：根据grid容器的宽度，除以最小最大值之间的项目宽度，获得auto-fit的值，垂直方向绘制autofit个列宽的网格，水平方向也类似绘制，空轨折叠，不占据容器空间。

专业的媒体查询：不是依据某元素的父级容器宽度计算，以屏幕宽度查询。

上一条：PHP字符串常用函数下一条：第26章 0120-vue路由原理与实现，学习心得，笔记（Vue路由）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多