多种样式的css遮罩效果
代码语言:html
所属分类:布局界面
代码描述:多种样式的css遮罩效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
font: normal 100%/1.5 sans-serif;
background: #1F2933;
color: white;
}
html,
body {
height: 100%;
margin: 1rem;
padding: 0;
}
figure {
margin: 0;
}
figcaption {
text-align: center;
}
code {
color: #e19123;
}
@media screen and (min-width: 400px) {
body {
display: grid;
grid: auto/repeat(2, 1fr);
grid-gap: 5px;
}
div:nth-child(1) {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 1;
}
div:nth-child(2) {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 2;
display: grid;
grid: auto/repeat(2, 1fr);
grid-gap: 20px;
}
div:nth-child(3) {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 3;
}
div:nth-child(4) {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 4;
display: grid;
grid: auto/repeat(2, 1fr);
grid-gap: 20px;
}
}
@media screen and (min-width: 720px) {
body {
display: grid;
grid: auto/repeat(6, 1fr);
grid-gap: 10px;
max-width: 1200px;
margin: 0 auto;
}
div:nth-child(1) {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 1;
}
div:nth-child(2) {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 2;
display: grid;
grid: auto/repeat(4, 1fr);
}
div:nth-child(3) {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 3;
}
div:nth-child(4) {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 4;
display: grid;
grid: auto/repeat(4, 1fr);
}
}
@media screen and (min-width: 1200px) {
body {
display: grid;
grid: auto/repeat(3, 1fr);
grid-gap: 15px;
max-width: 1200px;
margin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0