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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
程序实现
  1. .banner {
  2.       grid-row: 1 / 1;
  3.       grid-column: 1 / 4;
  4.       background-image: url(head_banner.jpg);
  5.       color: aliceblue;
  6.       top: 0;
  7.       /* fixed不能固定上面设置的background-image */
  8.       /* position: fixed; */
  9.       position: sticky;
  10.       z-index: 1;
  11.     }
  12.     header {
  13.       display: grid;
  14.       border: 1px solid red;
  15.       height: 5em;
  16.       margin: 0 auto;
  17.       grid-template-columns: 10vw 80vw 10vw;
  18.       grid-template-rows: 1.5em 3.5em;
  19.       background-color: teal;
  20.     }
  21.     header .banner {
  22.       grid-row: 1 / 1;
  23.       grid-column: 1 / 4;
  24.       background-image: url(head_banner.jpg);
  25.       color: aliceblue;
  26.       top: 1em;
  27.       /* 这里的粘性设置，只能在父元素内，父元素滚动到后台后，也不会粘住,后面的sticky滚动时会覆盖前面的*/
  28.       position: sticky;
  29.     }
  30.     header nav {
  31.       grid-row: 2 / 2;
  32.       grid-column: 2 / 3;
  33.       text-align: center;
  34.       /* line-height和父元素等高，可用于文字定位于垂直中间位置 */
  35.       line-height: 3.5em;
  36.       /* place-content 似乎对grid排版无效 */
  37.       /* place-content: center;
  38.       place-content: space-evenly; */
  39.     }
  40.     nav a {
  41.       /* min-width: 15em; */
  42.       /* 去掉a标签下划线 */
  43.       text-decoration: none;
  44.       color: aliceblue;
  45.       min-width: 10em;
  46.     }
  47.     .right {
  48.       grid-area: 2 / 3 / span 1 / span 1;
  49.       /* text-align: right; */
  50.       text-align: center;
  51.       line-height: 3.5em;
  52.       /* padding用于限制内部元素排版 */
  53.       /* padding: 0 20px; */
  54.       /* 此处改变了font-size大小，所以文字高度和line-height不一样，所以不居中了 */
  55.       font-size: larger;
  56.       font-weight: bolder;
  57.     }
  58.     .right a {
  59.       color: aliceblue;
  60.       text-decoration: none;
  61.     }
  62.     .logo {
  63.       grid-area: 2 / 1 / span 1 / span 1;
  64.       /* text-align: center 对图片设置无效 */
  65.       text-align: center;
  66.       /* padding不加单位似乎对图片无效 */
  67.       padding: 1px 1px;
  68.     }
  69.     #tops_logo {
  70.       /* width: 5vw; */
  71.       height: 3.5em;
  72.     }
  73.     .container {
  74.       width: auto;
  75.       height: 100vh;
  76.       border: 1px solid blue;
  77.       display: grid;
  78.       grid-template-columns: 10vw 80vw 10vw;
  79.     }
实现效果

grid属性演示

【文章原创作者：韩国高防服务器 http://www.558idc.com/krgf.html 网络转载请说明出处】
更多阅读