前端日常实践：142#视频演示如何使用CSSGrid布局制作小鸡图章

时间：2023-04-04 23:50:32 HTML5

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

centerdisplay:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:teal;}设置容器尺寸：.stamp{position:relative;宽度：57em；高度：71em；字体大小：5px；填充：5em；background-color:white;}用重复的背景绘制邮票的穿孔：.stamp{display:flex;弹性方向：列；对齐项目：居中；证明内容：居中；}.stamp::after,.stamp::before{content:'';宽度：100%；高度：100%；位置：绝对；背景：径向渐变（圆形，青色50%，透明50%），径向渐变（圆形，青色50%，透明50%）；背景大小：3.5em3.5em;}。邮票::之前{顶部：1.5em;背景重复：重复-y；背景位置：-3%0,103%0;}.stamp::after{左：1.5em;背景重复：重复-x；background-position:0-2.5%,0102.5%;}在html文件中添加小鸡的dom元素，子元素分别代表head,beak,body,Tail,legs,paws,sun,orange:

设置网格布局的行列尺寸：.rooster{display:grid;网格模板列：22.5em13em1.75em14.5em4.5em；网格模板行：12.5em14.5em15em8em5.5em；背景色：小麦；填充：2em；标头：.head{网格列：4；网格行：2；背景颜色：伯莱伍德；border-top-left-radius:100%;}画出小鸡的眼睛和脸上的红晕：.head{位置：相对；}.head::after{内容：'';位置：绝对；宽度：2.8em；高度：2.8em；边界半径：50%；背景色：黑色；右：30%；box-shadow:2em4em4emrgba(255,100,0,0.5);}画一个扇形的喙：.beak{grid-column:5;网格行：2；高度：4.5em；背景颜色：深橙色；border-bottom-right-radius:100%;}画一个半圆体：.body{grid-column:2/5;网格行：3；宽度：30em；背景颜色：马鞍棕色；border-radius:0015em15em;}使用伪元素通过阴影绘制翅膀：.body{position:relative;溢出：隐藏；}.body::after{内容：''；位置：绝对；宽度：20em；高度：10em；边界半径：继承；盒子阴影：4em2em4emrgba(0,0,0,0.3);左：计算（（30em-20em）/2）；}绘制扇形尾巴：.tail{grid-column:1;网格行：1/3；高度：22.5em；背景颜色：伯莱伍德；对齐自我：结束；border-top-left-radius:100%;}画扇形腿：.腿{网格列：4;网格行：4；宽度：8em；背景颜色：伯莱伍德；border-bottom-right-radius:100%;}绘制扇形爪子：.foot{grid-column:4;网格行：5；宽度：5.5em；背景颜色：深橙色；border-top-right-radius:100%;}画一个半圆形的太阳：.sun{grid-column:3/5;网格行：1；宽度：17em；--h:计算(17em/2);高度：var(--h)；背景颜色：深橙色；border-radius:00var(--h)var(--h);}画一个圆形的橘子和一片半圆形的叶子。注意这里叶子的绘制方法和半圆的绘制方法不同：.orange-stuff{grid-column:1;网格行：3/6；宽度：16em；高度：16em；背景颜色：深橙色；对齐自我：结束；自我辩护：结束；边界半径：50%；位置：相对；}.orange-stuff::before{内容：'';位置：绝对；宽度：8em；高度：8em；背景：线性渐变（45deg，透明50%，鞍褐色50%）；边界半径：50%；顶部：-6.8em；左：10%；在dom中添加更多文本，包括标题、作者和面值：