前端日常实践：141#视频演示如何使用CSSGrid布局制作小狗邮票

时间：2023-04-05 01:16:35 HTML5

效果预览在当前页面点击右侧“点击预览”按钮预览，点击链接预览在全屏。https://codepen.io/comehop??e/pen/BOeEYV互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cPQ3vcq源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解读定义dom，容器代表邮票：

居中展示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:teal;}设置容器尺寸：.stamp{position:relative;宽度：40.5em；高度：71em；字体大小：6px；填充：5em；：.stamp{显示：flex;弹性方向：列；对齐项目：居中；证明内容：居中；}.stamp::after,.stamp::before{content:'';宽度：100%；高度：100%；位置：绝对；背景：径向渐变（圆形，青色50%，透明50%），径向渐变（圆形，青色50%，透明50%）；背景大小：3.5em3.5em;}.stamp::before{top:1.5em;背景重复：重复-y；背景位置：-4.5%0,104.5%0;}.stamp::after{左：1.5em；背景重复：重复-x；background-position:0-2.5%,0102.5%;}在html文件中添加小狗的dom元素，子元素分别代表耳朵，头，眼睛，舌头，身体，尾巴，爪子：

设置网格布局行列大小：.puppy{display:grid;网格模板列：10em22.5em8em；网格模板行：21em12.5em3.75em22.5em；背景色：棕褐色；填充：2em；margin-top:-1em;}画狗的头，横跨第一和第二列，第二行和第三行，是一个半圆：.head{grid-column:1/3;网格行：2/4；border-bottom-left-radius:calc(12.5em+3.75em);border-bottom-right-radius:calc(12.5em+3.75em);背景颜色：bisque;}使用伪元素画出鼻子，为扇形，隐藏多余部分：.head{position:relative;溢出：隐藏；}.head::before{内容：'';位置：绝对；宽度：7em；高度：7em；边界右下角半径：100%；background-color:sienna;}画一个半圆形的眼睛光晕：.eyes{grid-column:2;网格行：2；证明自我：结束；位置：相对；高度：10.5em；宽度：21em；边界半径：0010.5em10.5em；background-color:sienna;}用径向渐变画眼睛：.eyes{background-image:radial-gradient(circleat37%33%,black1.4em,transparent1.4em);}画半圆形耳朵：.ear{网格列：2；网格行：1；自我辩护：结束；宽度：10.5em；边界半径：21em0021em；background-color:sienna;}画一个扇形的舌头：.tongue{grid-column:1;网格行：3；宽度：5.5em；高度：5.5em；背景色：印度红；border-bottom-left-radius:100%;}绘制扇形体：.body{grid-column:2;网格行：4；背景颜色：西耶娜；边框r-top-left-radius:100%;}使用伪元素通过阴影画蹲腿：.body{position:relative;溢出：隐藏；}.body::after{内容：''；位置：绝对；高度：50%；宽度：100%；边界半径：11.25em11.25em00；盒子阴影：2em04emrgba(0,0,0,0.3);bottom:0;}绘制一半圆形尾巴：.tail{grid-column:1;网格行：4；自我辩护：结束；对齐自我：结束；高度：17.5em；宽度：8.75em；背景颜色：浓汤；border-radius:17.5em0017.5em;}画一个小的半圆形爪子：.foot{grid-column:3;网格行：4；对齐自我：结束；高度：4em；背景颜色：浓汤；border-radius:4em4em00;}在dom中添加更多文本，包括标题、作者和面值：