实例演示课堂中学到的Grid的属性

程序实现

.banner {
      grid-row: 1 / 1;
      grid-column: 1 / 4;
      background-image: url(head_banner.jpg);
      color: aliceblue;
      top: 0;
      /* fixed不能固定上面设置的background-image */
      /* position: fixed; */
      position: sticky;
      z-index: 1;
    }
    header {
      display: grid;
      border: 1px solid red;
      height: 5em;
      margin: 0 auto;
      grid-template-columns: 10vw 80vw 10vw;
      grid-template-rows: 1.5em 3.5em;
      background-color: teal;
    }
    header .banner {
      grid-row: 1 / 1;
      grid-column: 1 / 4;
      background-image: url(head_banner.jpg);
      color: aliceblue;
      top: 1em;
      /* 这里的粘性设置，只能在父元素内，父元素滚动到后台后，也不会粘住,后面的sticky滚动时会覆盖前面的*/
      position: sticky;
    }
    header nav {
      grid-row: 2 / 2;
      grid-column: 2 / 3;
      text-align: center;
      /* line-height和父元素等高，可用于文字定位于垂直中间位置 */
      line-height: 3.5em;
      /* place-content 似乎对grid排版无效 */
      /* place-content: center;
      place-content: space-evenly; */
    }
    nav a {
      /* min-width: 15em; */
      /* 去掉a标签下划线 */
      text-decoration: none;
      color: aliceblue;
      min-width: 10em;
    }
    .right {
      grid-area: 2 / 3 / span 1 / span 1;
      /* text-align: right; */
      text-align: center;
      line-height: 3.5em;
      /* padding用于限制内部元素排版 */
      /* padding: 0 20px; */
      /* 此处改变了font-size大小，所以文字高度和line-height不一样，所以不居中了 */
      font-size: larger;
      font-weight: bolder;
    }
    .right a {
      color: aliceblue;
      text-decoration: none;
    }
    .logo {
      grid-area: 2 / 1 / span 1 / span 1;
      /* text-align: center 对图片设置无效 */
      text-align: center;
      /* padding不加单位似乎对图片无效 */
      padding: 1px 1px;
    }
    #tops_logo {
      /* width: 5vw; */
      height: 3.5em;
    }
    .container {
      width: auto;
      height: 100vh;
      border: 1px solid blue;
      display: grid;
      grid-template-columns: 10vw 80vw 10vw;
    }

实现效果