听书人

在鸡零狗碎操蛋的生活中找到闪闪发光的太阳

小笔记

听书人 · 沦陷于 · 2021/09/20 · 阅:46

固定导航

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

内容再设置高度

网格布局使用

span {
  background: #fff;
  padding: 1rem;
  border-radius: 7px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.13);
  height: 30vh;
  display: grid;
  grid-gap: 0.5rem;
}

上下.png
上下.png

span{
  background-color: #7B86F5;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.5rem;
}

span.template-2col {
  grid-template-columns: repeat(2, 1fr);
}

左右.png
左右.png

span{
  background-color: #7B86F5;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.5rem;
}
span.template-3col {
  grid-template-columns: repeat(3, 1fr);
}

左到右三格

span.template-4up {
  grid-template: repeat(2, 1fr)/repeat(2, 1fr);
}

上下各两格

<span class="template-sidebar--left">
    <b>1</b>
    <b>2</b>
    <b>3</b>
</span>
span.template-sidebar--left {
  grid-template: "sidebar mainA" "sidebar mainB";
}
span.template-sidebar--left > :nth-child(1) {
  grid-area: sidebar;
}

左一格右边两格

<span class="template-sidebar--right">
    <b>1</b>
    <b>2</b>
    <b>3</b>
</span>
span.template-sidebar--right {
  grid-template: "mainA sidebar" "mainB sidebar";
}
span.template-sidebar--right > :nth-child(3) {
  grid-area: sidebar;
}

与上面反过来

最后更新:9小时前
文章分享
笔记
折叠评论
评论 暂无评论

评论列表暂无评论