search

博客列表 >grid布局作业练习

grid布局作业练习

虫先森
虫先森原创
2020年04月14日 15:18:58492浏览

grid布局作业练习

grid布局确实很好用，通过作业的训练，稍微熟悉了一些，之后应该还需要多练习一些，终于有一点自己在写一个网站的感觉了。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>grid操作练习</title>
  8.     <style>
  9.         /* 通用属性设置 */
  10.         html {
  11.             font-size: 14px;
  13.         }
  15.         body {
  16.             display: flex;
  17.             place-content: start center;
  18.             background-color: azure;
  19.         }
  21.         img {
  22.             width: 100%;
  23.             height: 100%;
  24.         }
  26.         a {
  27.             font-size: 1.2rem;
  28.             text-decoration: none;
  29.         }
  31.         h3 {
  32.             color: rgb(78, 21, 21);
  33.             padding-left: 8px;
  34.         }
  36.         .tittle {
  37.             color: black;
  38.             font: 0.9em sans-serif;
  39.         }
  41.         .abstract {
  42.             color: #353535;
  43.             font: 0.7em sans-serif;
  44.         }
  46.         .container {
  47.             /* 设置容器大小 */
  48.             width: 90vw;
  49.             height: 100vh;
  50.             background-color: #ffffff;
  51.             /* justify-content: stretch;
  52.             align-content: stretch; */
  53.             /* 创建grid容器 */
  54.             display: grid;
  55.             grid-template-rows: 70px 1fr 1fr 50px;
  56.             grid-template-columns: 1fr 1fr 30%;
  57.             /* 命名容器区域 */
  58.             grid-template-areas:
  59.                 "header header header"
  60.                 ". . . "
  61.                 ". . . "
  62.                 "footer footer footer";
  64.             /* 项目对齐方式 */
  65.             place-items: center;
  66.             gap: 2px;
  68.         }
  70.         /* 设置项目基本属性 */
  71.         .item {
  72.             background-color: #fff;
  73.             justify-self: stretch;
  74.             align-self: stretch;
  75.         }
  77.         /* 设置页眉区域项目 */
  78.         .item.item1 {
  79.             background-color: #353535;
  80.             grid-area: header;
  81.             display: flex;
  82.             justify-items: center;
  83.             justify-content: space-between;
  84.             align-items: center;
  85.             align-content: center;
  87.         }
  89.         .item.item1>.logo {
  90.             margin-left: 2vw;
  91.             width: 180px;
  92.             height: 40px;
  93.         }
  95.         .item.item1>.nav {
  97.             list-style: none;
  98.             display: flex;
  99.             justify-content: space-around;
  100.             width: 100%;
  101.             text-align: right;
  102.             color: goldenrod;
  103.         }
  105.         .item.item1>.nav>li>a>span {
  106.             color: goldenrod;
  108.         }
  110.         .item.item2 {
  111.             width: 100%;
  112.             height: 100%;
  113.             background-color: lightcoral;
  114.             grid-area: 2/1/3/3;
  116.         }
  118.         .item.item3,
  119.         .item.item4 {
  120.             height: auto;
  121.             padding-right: 5px;
  122.             border: 1px #c0c0c0 solid;
  123.             background-color: #ebebeb;
  124.             border-radius: 5px;
  125.         }
  127.         .item.item3>ul>li,
  128.         .item.item4>ul>li {
  129.             margin: 5px 2px;
  130.         }
  132.         .item.item5 {
  133.             height: auto;
  134.             background-color: #f9f9f9;
  135.             grid-area: 2/3/span 2/span 1;
  136.             border: 1px #c0c0c0 solid;
  137.             border-radius: 7px;
  138.             display: flex;
  139.             flex-flow: column nowrap;
  140.             place-items: center;
  141.             padding: 10px;
  143.         }
  145.         .item.item5>.touxiang {
  146.             width: 50%;
  147.         }
  150.         /* 设置页脚区域项目 */
  151.         .item.item6 {
  152.             display: flex;
  153.             width: 100%;
  154.             background-color: gray;
  155.             grid-area: footer;
  156.             justify-content: space-around;
  157.             align-items: center;
  159.         }
  161.         .item.item6>a {
  162.             text-decoration: none;
  163.         }
  165.         .item.item6>a>span,
  166.         .item.item6>span {
  167.             padding: 5px;
  168.             text-decoration-line: none;
  169.             color: honeydew;
  170.             font-size: 12px;
  171.         }
  172.     </style>
  173. </head>
  175. <body>
  176.     <div class="container">
  177.         <div class="item item1">
  178.             <div class="logo">
  179.                 <img src="images/logo.png" alt="logo">
  180.             </div>
  182.             <ul class="nav">
  183.                 <li><a href="" class="link"><span>首页</span></a></li>
  184.                 <li><a href="" class="link"><span>博客</span></a></li>
  185.                 <li><a href="" class="link"><span>相册</span></a></li>
  186.                 <li><a href="" class="link"><span>关于</span></a></li>
  187.             </ul>
  188.         </div>
  189.         <div class="item item2">
  190.             <img src="images/zxkc4.png" alt="公益直播课即将开播">
  191.         </div>
  193.         <div class="item item3">
  194.             <h3>推荐阅读</h3>
  195.             <ul>
  196.                 <li><a href=""><span class="tittle">css栅格化布局方式</span><br><span
  197.                             class="abstract">css的栅格化处理通常需要借助grid这一方式，grid可以将网页元素以...</span></a></li>
  198.                 <li><a href=""><span class="tittle">html表单属性的运用实例</span><br><span
  199.                             class="abstract">html的表单操作是一个十分重要的内容，特别是一些交互功能几乎依赖...</span></a></li>
  200.                 <li><a href=""><span class="tittle">使用小皮管理云服务器</span><br><span
  201.                             class="abstract">小皮面板是php中文网开发的一款用于php环境快速配置与管理...</span></a></li>
  202.             </ul>
  203.         </div>
  204.         <div class="item item4">
  205.             <h3>近期更新</h3>
  206.             <ul>
  207.                 <li><a href=""><span class="tittle">css栅格化布局方式</span><br>
  208.                         <span class="abstract">css的栅格化处理通常需要借助grid这一方式，grid可以将网页元素以...</span></a></li>
  209.                 <li><a href=""><span class="tittle">html表单属性的运用实例</span><br>
  210.                         <span class="abstract">html的表单操作是一个十分重要的内容，特别是一些交互功能几乎依赖...</span></a></li>
  211.                 <li><a href=""><span class="tittle">使用小皮管理云服务器</span><br>
  212.                         <span class="abstract">小皮面板是php中文网开发的一款用于php环境快速配置与管理...</span></a></li>
  213.             </ul>
  214.         </div>
  215.         <div class="item item5">
  216.             <div class="touxiang">
  217.                 <img src="images/login.png" alt="头像">
  218.             </div>
  219.             <h3>张三</h3>
  220.             <p>您于2020年4月14日 14:32 在 中国上海市 登录本站。</p>
  221.             <div class="">
  222.                 <h4>按月份排列</h4>
  223.                 <ul>
  224.                     <li><a href=""><span class="tittle">2020年04月</span><span class="abstract">(4)</span></a></li>
  225.                     <li><a href=""><span class="tittle">2020年03月</span><span class="abstract">(12)</span></a></li>
  226.                     <li><a href=""><span class="tittle">2020年01月</span><span class="abstract">(3)</span></a></li>
  227.                     <li><a href=""><span class="tittle">2019年12月</span><span class="abstract">(1)</span></a></li>
  228.                 </ul>
  229.             </div>
  230.         </div>
  231.         <div class="item item6">
  232.             <a href=""><span>网站地图</span></a>
  233.             <a href=""><span>博客管理</span></a>
  234.             <a href=""><span>联系站长</span></a>
  235.             <a href=""><span>留言</span></a>
  236.             <span>本站文章仅代表作者个人观点，未经允许不得转载</span>
  237.         </div>
  238.     </div>
  239. </body>
  241. </html>
上一条：初识Grid布局下一条：新浪短链接生成，短网址接口的获取方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
虫先森2020-04-14 19:04:571楼
有感觉多了，大概也有概念了，grid真的是一个神器，flex的时候感觉都不明显，grid用上，感觉就不一样了

相关文章

查看更多