简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >grid对齐方式及PHP.cn首页模块

grid对齐方式及PHP.cn首页模块

沉寂的博客
沉寂的博客原创
2021年01月12日 15:15:58713浏览

grid对齐方式及PHP.cn首页模块

  grid的对齐方式分为居中对齐（水平和垂直），两端对齐（between），左对齐start，右对齐end；

  其中写容器当中的对齐属性及值如下所示：
place-content:start end/start center/center;
  写在项目当中的属性及值是项目本身在单元格中的对齐方式：
place-self:start center/start end/center;
代码中的值第一个值代表的是项目在单元格中水平方向的对齐方式，第二个值是项目单元格中水平方向中的对齐方式。

PHP.cn首页模块

  首页模块主要用到grid布局方式来布局的，具体代码和实现结果如下所示：

  1. * {
  2.         margin: 0;
  3.         padding: 0;
  4.         box-sizing: border-box;
  5.         /* text-align: center; */
  6.       }
  7.       a {
  8.         text-decoration: none;
  9.       }
  10.       li {
  11.         list-style: none;
  12.         /* background-color: crimson; */
  13.         /* height: 30px; */
  14.         /* width: 60px; */
  15.       }
  16.       header,
  17.       footer {
  18.         height: 80px;
  19.         background-color: #444;
  20.         text-align: center;
  21.         color: #ddd;
  22.         line-height: 80px;
  23.       }
  24.       .main-top {
  25.         width: 1200px;
  26.         height: 510px;
  27.         display: grid;
  28.         grid-template-columns: 216px 1fr;
  29.         grid-template-rows: 60px 1fr 120px;
  30.         margin: 0 auto;
  31.         background-color: #ddd;
  32.         /* place-content: center; */
  33.         /* gap: 0.5em; */
  34.       }
  35.       .main-top > .menus {
  36.         background-color: blueviolet;
  37.         grid-area: 1/1/4/1;
  38.       }
  39.       .main-top > .navs {
  40.         display: grid;
  41.         grid-template-columns: repeat(8, 83px) 1fr;
  42.         background-color: coral;
  43.         gap: 0.5em;
  44.         place-items: center;
  45.       }
  46.       .main-top > .slider {
  47.         background-color: #ccc;
  48.         height: 20em;
  49.       }
  50.       .main-top > .courses {
  51.         display: grid;
  52.         grid-template-columns: repeat(4, 1fr);
  53.         background-color: burlywood;
  54.         gap: 0.5em;
  55.         padding: 10px;
  56.       }
  57.       .main-top > .courses * {
  58.         background-color: lightcoral;
  59.         cursor: pointer;
  60.       }
  61.       .main-top > .navs > li:last-of-type {
  62.         place-self: center start;
  63.       }
  64.       .main-courses {
  65.         width: 1200px;
  66.         height: 510px;
  67.         margin: 30px auto;
  68.         display: grid;
  69.         background-color: #aaa;
  70.         grid-template-rows: 50px 1fr;
  71.         /* place-items: center; */
  72.         gap: 0.5em;
  73.       }
  74.       .main-courses > .courses-list {
  75.         display: grid;
  76.         grid-template-columns: repeat(5, 1fr);
  77.         grid-template-rows: repeat(3, 1fr);
  78.         gap: 0.5em;
  79.       }
  80.       .main-courses > .courses-list > li {
  81.         background-color: lightseagreen;
  82.       }
  83.       .main-courses > h3 {
  84.         text-align: center;
  85.         margin-top: 10px;
  86.         /* height: 5em; */
  87.       }
  88.       .main-courses > .courses-list > li:first-of-type {
  89.         grid-area: 1/1/3/1;
  90.       }
  1. <!-- 页眉 -->
  2.     <header>header</header>
  3.     <div class="main-top">
  4.       <div class="menus">菜单组</div>
  5.       <ul class="navs">
  6.         <li><a href="#">menu1</a></li>
  7.         <li><a href="#">menu2</a></li>
  8.         <li><a href="#">menu3</a></li>
  9.         <li><a href="#">menu4</a></li>
  10.         <li><a href="#">menu5</a></li>
  11.         <li><a href="#">menu6</a></li>
  12.         <li><a href="#">menu7</a></li>
  13.         <li><a href="#">menu8</a></li>
  14.         <li>
  15.           <input
  16.             type="text"
  17.             name="screen"
  18.             id="screen"
  19.             placeholder="输入关键字"
  20.           />
  21.         </li>
  22.       </ul>
  23.       <div class="slider">轮播图</div>
  24.       <ul class="courses">
  25.         <li>
  26.           <a href=""><img src="" alt="" /></a>
  27.         </li>
  28.         <li>
  29.           <a href=""><img src="" alt="" /></a>
  30.         </li>
  31.         <li>
  32.           <a href=""><img src="" alt="" /></a>
  33.         </li>
  34.         <li>
  35.           <a href=""><img src="" alt="" /></a>
  36.         </li>
  37.       </ul>
  38.     </div>
  39.     <div class="main-courses">
  40.       <h3>&lt;\&gt;精品课程&lt;\&gt;</h3>
  41.       <ul class="courses-list">
  42.         <li>
  43.           <a href=""><img src="" alt="" /></a>
  44.         </li>
  45.         <li>
  46.           <a href=""><img src="" alt="" /></a>
  47.         </li>
  48.         <li>
  49.           <a href=""><img src="" alt="" /></a>
  50.         </li>
  51.         <li>
  52.           <a href=""><img src="" alt="" /></a>
  53.         </li>
  54.         <li>
  55.           <a href=""><img src="" alt="" /></a>
  56.         </li>
  57.         <li>
  58.           <a href=""><img src="" alt="" /></a>
  59.         </li>
  60.         <li>
  61.           <a href=""><img src="" alt="" /></a>
  62.         </li>
  63.         <li>
  64.           <a href=""><img src="" alt="" /></a>
  65.         </li>
  66.         <li>
  67.           <a href=""><img src="" alt="" /></a>
  68.         </li>
  69.         <li>
  70.           <a href=""><img src="" alt="" /></a>
  71.         </li>
  72.         <li>
  73.           <a href=""><img src="" alt="" /></a>
  74.         </li>
  75.         <li>
  76.           <a href=""><img src="" alt="" /></a>
  77.         </li>
  78.         <li>
  79.           <a href=""><img src="" alt="" /></a>
  80.         </li>
  81.         <li>
  82.           <a href=""><img src="" alt="" /></a>
  83.         </li>
  84.       </ul>
  85.     </div>
  86.     <div class="main-courses">
  87.       <h3>&lt;\&gt;PHP进阶学习路径&lt;\&gt;</h3>
  88.       <ul class="courses-list">
  89.         <li>
  90.           <a href=""><img src="" alt="" /></a>
  91.         </li>
  92.         <li>
  93.           <a href=""><img src="" alt="" /></a>
  94.         </li>
  95.         <li>
  96.           <a href=""><img src="" alt="" /></a>
  97.         </li>
  98.         <li>
  99.           <a href=""><img src="" alt="" /></a>
  100.         </li>
  101.         <li>
  102.           <a href=""><img src="" alt="" /></a>
  103.         </li>
  104.         <li>
  105.           <a href=""><img src="" alt="" /></a>
  106.         </li>
  107.         <li>
  108.           <a href=""><img src="" alt="" /></a>
  109.         </li>
  110.         <li>
  111.           <a href=""><img src="" alt="" /></a>
  112.         </li>
  113.         <li>
  114.           <a href=""><img src="" alt="" /></a>
  115.         </li>
  116.         <li>
  117.           <a href=""><img src="" alt="" /></a>
  118.         </li>
  119.         <li>
  120.           <a href=""><img src="" alt="" /></a>
  121.         </li>
  122.         <li>
  123.           <a href=""><img src="" alt="" /></a>
  124.         </li>
  125.         <li>
  126.           <a href=""><img src="" alt="" /></a>
  127.         </li>
  128.         <li>
  129.           <a href=""><img src="" alt="" /></a>
  130.         </li>
  131.       </ul>
  132.     </div>
  133.     <footer>footer</footer>

执行结果：
PHP首页
PHP首页bottom.png

上一条：原生js实现选项卡和轮播图下一条：Solr 8.5 安装与使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多