与CSS网格重叠的页眉布局效果

代码语言:html

所属分类:布局界面

代码描述:与CSS网格重叠的页眉布局效果

代码标签: 重叠 页眉 布局 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.shell {
  display: grid;
  grid-template-columns: 0 1fr 0;
  grid-template-rows: auto 8em 1fr auto;
}

@media (min-width: 600px) {
  .shell {
    grid-template-columns: 20px 1fr 20px;
  }
}

/* overlap */
.shell:before {
  content: "";
  grid-column: 1/-1;
  grid-row: 1/3;
  background-color: #063;
}

.shell-header {
  grid-column: 2 / 3;
  grid-row: 1 / 2;

  color: #FFF;
  background-color: #063;
  padding: 35px 20px;
}

.shell-body {
  grid-row: 2 / 4;
  grid-column: 2 / 3; 
  min-height: 50vh;
  padding: 20px;
  border-radius: 10px;.........完整代码请登录后点击上方下载按钮下载查看

网友评论0