与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