张掖建设局网站,网站建设与管理教学视频下载,成都房地产上市公司有哪些,珠宝网站开发的背景今天才想起来这回事#xff0c;没办法就急急忙忙的赶工一下#xff0c;接下来我就画一下这个海报试试手了#xff1a; 一、背景制作
1.1 准备工作
先给整个网页制作一个布局吧#xff0c;直接 flex 搞定#xff0c;并且使其居中 justify-content、align-items 都要赋值为…今天才想起来这回事没办法就急急忙忙的赶工一下接下来我就画一下这个海报试试手了 一、背景制作
1.1 准备工作
先给整个网页制作一个布局吧直接 flex 搞定并且使其居中 justify-content、align-items 都要赋值为 center
body {display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;
}接下来直接创建一个 div 给予一个 demo 样式
bodydiv 那么这个demo 样式如下css
.demo {height: 400px;width: 1200px;position: relative;background-color: #8bb72b;overflow: hidden;
}那么此刻咱们需要做的准备工作就搞定了那么接下来咱们就在这个框内画东西 1.2 背景云朵
首先咱们就先画一个云朵吧云朵就在粽子的脚底下制作起来很简单哦提一下为了简单主要是懒就直接在 style 标签中添加样式吧。
我们先看一下一个云朵的样子 这个云呢一看就知道就是一个 div 给予一个圆角随后再来一个 before 和 after 不就搞定了
所以现在咱们创建一个 cloud 样式并且设置 before 和 after 的样式
.cloud:after,
.cloud:before {content: ;position: absolute;background-color: white;border-radius: 50%;
}.cloud:after {width: 50px;height: 50px;top: -54%;left: 14%;
}.cloud:before {width: 100px;height: 100px;top: -90%;right: 10%;
}after 和 before 大小不一样所以我设置的宽高也是不一的但总有一个大或者一个小不过一定要记住设置圆角否则你的云就是这样 突然感觉这个云很像一个坦克看来坦克我也会画了。
绘制好云后你可以再设置两个样式当然你也可以用子元素选择器为多个云设置不一样的大小、位置信息在这里图方便我就直接给予了两个样式
.cloud1 {transform: scale(1);opacity: 0.8;left: 100px;top: 410px;z-index: 1;
}.cloud2 {left: 260px;top: 360px;transform: scale(1.1);opacity: 0.9;z-index: 1;
}这两个样式给予的透明度 opacity 是为了使云彩更加的“缥缈”当然你也可以再加一些阴影这样看起来更加真实并且其中的 scale 可以帮助你调整云朵大小再或者你可以使用 rotate 等其他方法转动一下角度都行。
最后我添加两个 div包裹在一个 div 中方便分类可能我的风格不是前端风格不要在意
div classdemodiv classcloud-maindiv classcloud cloud1/divdiv classcloud cloud2/div/div
/div1.3 背景圈圈圈
云朵增加完了咱们就开水增加这些背景上的“圈圈圈”吧 这些圈圈圈你可以用背景渐变来做在这里我就直接画了也就是一个 div 设置好圆角然后 left、top、bottom 调一下位置说起来是真的简单就不再赘述这里了直接写上样式
.circle {position: absolute;height: 400px;width: 1200px;
}.circle1,
.circle2,
.circle3,
.circle4,
.circle5,
.circle6,
.circle7,
.circle8 {position: absolute;border-radius: 100%;background-color: #0f893c;
}.circle1 {height: 300px;width: 300px;bottom: -130px;
}.circle2 {height: 150px;width: 150px;bottom: -30px;left: 270px
}.circle3 {height: 30px;width: 30px;bottom: 10px;left: 430px
}.circle4 {height: 60px;width: 60px;bottom: 10px;left: 530px
}.circle5 {height: 160px;width: 260px;bottom: -130px;left: 530px
}.circle6 {height: 60px;width: 160px;bottom: -30px;left: 730px
}.circle7 {height: 60px;width: 160px;bottom: -30px;left: 780px
}.circle8 {height: 160px;width: 160px;bottom: -80px;left: 880px
}
/*黄色圈*/.y-circle1,
.y-circle2,
.y-circle3,
.y-circle4 {position: absolute;border-radius: 100%;background-color: #cdd622;
}.y-circle1 {height: 60px;width: 60px;bottom: 180px;left: 880px
}.y-circle2 {height: 30px;width: 30px;bottom: 280px;left: 780px
}.y-circle3 {height: 10px;width: 10px;bottom: 380px;left: 720px
}.y-circle4 {height: 20px;width: 20px;bottom: 290px;left: 680px
}因为每一个圆圈圈都有不同的大小所以就写了多个样式用于调整他们的大小、位置等突然发现还不如用渐变方便但是写都写了那就贴上吧接着咱们在 html 中添加元素
div classcirclediv classcircle1/divdiv classcircle2/divdiv classcircle3/divdiv classcircle4/divdiv classcircle5/divdiv classcircle6/divdiv classcircle7/divdiv classcircle8/divdiv classy-circle1/divdiv classy-circle2/divdiv classy-circle3/divdiv classy-circle4/div
/div此时整个背景效果如下 是不是感觉好像有点意思了那我们接着往下。
二、添加角色元素
2.1 添加小太阳
首先咱们可以分析一下这个小太阳 我们可以明显的知道小太阳这个角色和本身太阳的区别那就是有了表情没有表情的太阳和有表情的太阳完全不是同一个“东西”这差距就像 “喜欢吃辣的人看到了豆腐无感看到了麻婆豆腐就控制不了自己” 所以关键点就是表情的制作。
虽然有表情和没表情的观感不一样但是本质一个圆还是要画的那么这个太阳还有周围的红色小点阳光肯定是在一个父容器之下那么此时咱们先给他们的父容器设置一个样式吧
/*太阳*/
.sun {position: absolute;height: 150px;width: 150px;
}在这里我定义了这个父容器的布局以及宽高那么接下来咱们就开始定义这个太阳的主体直接设置一个元素圆角值给满随后稍微定一下位置即可
.sun-body {position: absolute;height: 95px;width: 95px;background-color: #ff5f47;border-radius: 100%;border: 4px black solid;left: 30px;top: 30px;
}那么主体有了就到眼睛了很明显眼睛就是豆豆眼直接一个元素圆角设置背景色为黑解决
.sun-eye {position: absolute;height: 10px;width: 10px;background-color: black;border-radius: 100%;
}那么此时太阳的眼睛有一个左有一个右所以需要设置两个样式用于控制眼睛的位置此时我们还需要注意到接下来要绘制的粽子的眼睛也是有左右的所以在这里需要设置样式限制在 sun-body 之下那么这两个样式如下
.sun-body.eye-left {top: 60px;left: 70px;
}.sun-body.eye-right {top: 50px;left: 40px;
}此时页面效果如下 此时的太阳面无表情不懂的还以为是少了一个洞的保龄球所以表情还是很重要的接着添加一个 smile 样式让太阳笑看人生那这个样式怎么做呢毕竟这个嘴巴是就等于一个雪糕棒的样子 那我们就先开始画一个雪糕吧就直接写一个 smile 样式等下再改就好了雪糕也是一个矩形那么直接先给予一个矩形吧
.sun-body.smile {position: absolute;width: 100px;height: 100px;background-color: #fdc2a6 50%;top: 70px;left: 245px;border: 4px black solid;
}效果如下 那剩下的不就是给下面两个圆角变圆不就好了真是恍然大悟直接给予样式
border-top-left-radius: 8%;
border-top-right-radius: 16%;
border-bottom-left-radius: 80%;
border-bottom-right-radius: 90%;那么再给这个嘴巴转一下
transform: rotate(20deg);如果你想做一些效果还可以沿着垂直方向变换一下都可以。那么接下来直接定位并且给予背景色就完成了
.sun-body.smile {position: absolute;width: 10px;height: 10px;background-color: #fdc2a6 50%;top: 70px;left: 45px;border: 4px black solid;border-top-left-radius: 8%;border-top-right-radius: 16%;border-bottom-left-radius: 80%;border-bottom-right-radius: 90%;transform: rotate(20deg);
}最后再加一些阳光阳光就是圆嘛很简单的所以直接写好样式
.sunshine-top-left,
.sunshine-top-right,
.sunshine-bottom-left,
.sunshine-bottom-right {position: absolute;background-color: #a54a29;border-radius: 100%;
}.sunshine-top-left {height: 10px;width: 10px;left: -30px;top: -20px;
}.sunshine-top-right {height: 20px;width: 20px;left: 130px;top: 20px;
}.sunshine-bottom-left {height: 30px;width: 30px;left: -20px;top: 120px;
}.sunshine-bottom-right {height: 10px;width: 10px;left: 110px;top: 120px;
}再调用即可
div classsun-bodydiv classsun-eye eye-left/divdiv classsun-eye eye-right/divdiv classsmile/divdiv classsunshine-top-left/divdiv classsunshine-top-right/divdiv classsunshine-bottom-left/divdiv classsunshine-bottom-right/div
/div2.2 添加粽子
2.2.1 粽子 body
粽子的话就是里面的白花花的米和外面两块叶子和简单的四肢 做起来是挺简单的叶子的话纹路我没有添加可以简便加上去就好了首先我们制作里面白花花的糯米和绿油油的叶子部分。
其实这个部分我是分为了上、右、下、左四个部分制作的 并且再考虑这些部分都是同一个物体所以也需要一个容器对其进行包裹首先给予一个容器样式
.rice-dumplings {height: 400px;width: 400px;position: absolute;transform: scale(0.5);left: 0;
}接着先制作粽子的左半部分其实左半部分也就是一个半圆进行变换而来 左右两边的样式本质上是一致的所以直接给予粽子上部分左右两边相同的样式
.rice-dumplings-body-left-top,
.rice-dumplings-body-right-top {position: absolute;background-color: #ffffff;height: 300px;width: 300px;border-top-left-radius: 100%;border: 4px black solid;border-right: 0px;
}在上面的样式中由于右边编剧是有边框线的直接去掉即可所以使用了代码 border-right: 0px;。
接着给予左右两边不一样的变换以及位置信息
.rice-dumplings-body-left-top {left: 25px;top: 25px;transform: rotateY(30deg) rotate(-10deg);
}.rice-dumplings-body-right-top {left: 235px;top: 25px;transform: rotateY(210deg) rotate(-10deg);
}这个时候就应该给这个目前来说像半个饭团的东西一点“遮羞布”了也就是两张叶子。
这两张叶子的制作方式相似也就是给圆角然后进行旋转即可在这里需要注意的是不同大小、角度的叶子变换效果不一样可以适当的调整效果并且其内部的叶子纹路也可以通过渐变制作在这里我是用了渐变色也可以使用阴影为其添加层次感
.rice-dumplings-body-left-bottom,
.rice-dumplings-body-right-bottom {position: absolute;background: linear-gradient(to bottom right, #459712 15%, #8ad35d 80%, #459712 100%);border-top-left-radius: 0%;border: 4px black solid;
}.rice-dumplings-body-left-bottom {height: 200px;width: 400px;top: 240px;left: 50px;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%;border-top-right-radius: 100%;transform: rotate(15deg);
}.rice-dumplings-body-right-bottom {height: 200px;width: 250px;top: 260px;left: 250px;border-bottom-left-radius: 100%;border-bottom-right-radius: 20%;border-top-right-radius: 100%;transform: rotateY(180deg);
}接着在代码中进行调用
div classrice-dumplingsdiv classrice-dumplings-bodydiv classrice-dumplings-body-left-top/divdiv classrice-dumplings-body-right-top/divdiv classrice-dumplings-body-left-bottom/divdiv classrice-dumplings-body-right-bottom/div/div
/div此时效果如下 2.2.2 粽子 face
接着咱们开始制作这个粽子的脸部这个脸部也需要在一个容器之内所以继续设置一个父容器
.rice-dumplings-face {position: absolute;
}接着制作这个脸部的眼睛这个眼睛可以看到其内部还有一个亮点 这个亮点制作其实就是一个缩小版的白色圆点而已所以现在就知道这个怎么做了直接设置两个黑点和两个白点使其在近似的位置就解决了
.rice-dumplings-face {position: absolute;
}.rice-dumplings-eye {position: absolute;height: 30px;width: 30px;border-radius: 100%;background-color: black;
}.eye-left {left: 250px;top: 80px;
}.eye-right {left: 350px;top: 70px;
}.rice-dumplings-eye.light {position: absolute;height: 10px;width: 10px;border-radius: 100%;background-color: white;
}.rice-dumplings-eye.postion {right: 20%;top: 10%;
}.rice-dumplings-eye.right {right: 20%;top: 10%;
}以上样式中 light 为亮点创建一个基础样式后再创建左右样式进行调用就可以了
div classrice-dumplings-facediv classrice-dumplings-eye eye-leftdiv classlight postion/div/divdiv classrice-dumplings-eye eye-rightdiv classlight postion/div/div
/div接着制作两个小脸蛋也就是一个宽度大于高度的椭圆设置其 before 文本为“///” 颜色为白就完美解决
/*脸颊*/.cheek {position: absolute;top: 120px;background-color: #fd8373;border-radius: 100%;
}.cheek::before {position: absolute;content: / / /;color: white;left: 23%;top: 13%;
}.cheek-left {height: 40px;width: 80px;left: 190px;
}.cheek-right {height: 40px;width: 60px;left: 380px;
}接着嘴巴的样式跟太阳的一样在这里只需要设置对应的渐变色一半为红色一半为粉红色即可
.smile {position: absolute;width: 60px;height: 80px;background: linear-gradient( #fdc2a6 50%, #fa7768 50%);top: 120px;left: 300px;border: 4px black solid;border-top-left-radius: 8%;border-top-right-radius: 16%;border-bottom-left-radius: 80%;border-bottom-right-radius: 90%;
}由于其本身太阳也是相同样式所以背景色也应用到了太阳嘴巴之中都是同一款嘴型。
2.2.3 粽子四肢
粽子的四肢制作那就更简单了直接设置一个 div 留有边框去掉其他边框之后使用 before 或者 after 做手掌或者脚掌部分就可以了 此时我们给予样式调整好位置即可
/*四肢*/
.arm-left {position: absolute;height: 100px;width: 100px;border: 6px black solid;border-top: 0px;border-left: 0px;transform: rotate(45deg);left: 160px;top: 160px;
}.arm-left::before {position: absolute;content: ;height: 50px;width: 30px;right: -15%;border-radius: 100%;background-color: black;
}.arm-left::after {position: absolute;content: ;height: 20px;width: 10px;right: 8%;top: 15%;border-radius: 100%;background-color: black;transform: rotate(-45deg);
}.arm-right {position: absolute;height: 130px;width: 100px;border-right: 6px black solid;left: 390px;top: -52px;transform: rotate(45deg);
}.arm-right::before {position: absolute;content: ;height: 50px;width: 30px;right: -15%;border-radius: 100%;background-color: black;
}.leg-left {position: absolute;height: 50px;width: 50px;border: 6px black solid;border-top: 0px;border-left: 0px;left: 160px;top: 435px;
}.leg-left::before {position: absolute;content: ;height: 30px;width: 15px;left: -15%;bottom: -30px;border-radius: 100%;background-color: black;
}.leg-right {position: absolute;height: 100px;width: 50px;border-right: 6px black solid;left: 250px;top: 463px;
}.leg-right::before {position: absolute;content: ;height: 30px;width: 15px;right: -35%;bottom: -10px;border-radius: 100%;background-color: black;transform: rotate(-90deg);
}四肢位置代码比较简单就是给予不同的边框位置并且旋转即可然后 before 和 after 就是一个圆嘛拿上背景色放到合适位置就可以了。
粽子角色该部分 html 如下
div classrice-dumplingsdiv classrice-dumplings-bodydiv classrice-dumplings-body-left-top/divdiv classrice-dumplings-body-right-top/divdiv classrice-dumplings-body-left-bottom/divdiv classrice-dumplings-body-right-bottom/div/divdiv classrice-dumplings-facediv classrice-dumplings-eye eye-leftdiv classlight postion/div/divdiv classrice-dumplings-eye eye-rightdiv classlight postion/div/divdiv classcheek cheek-left/divdiv classcheek cheek-right/divdiv classsmile/div/divdiv classlimbsdiv classarm-left/divdiv classarm-right/divdiv classleg-left/divdiv classleg-right/div/div
/div三、所有内容
最后加上文字后效果如下 由于文字部分其样式就是很基础了在此没必要赘述了在最后我祝各位考生 金榜高粽
最后在这里附加上所有代码
完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo test/titlestylebody {height: 100vh;width: 100vw;}.demo-area {height: 400px;width: 1200px;position: relative;background-color: #8bb72b;overflow: hidden;}body {display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;}.rice-dumplings {height: 400px;width: 400px;position: absolute;transform: scale(0.5);left: 0;}.rice-dumplings-body-left-top,.rice-dumplings-body-right-top {position: absolute;background-color: #ffffff;height: 300px;width: 300px;border-top-left-radius: 100%;border: 4px black solid;border-right: 0px;}.rice-dumplings-body-left-top {left: 25px;top: 25px;transform: rotateY(30deg) rotate(-10deg);}.rice-dumplings-body-right-top {left: 235px;top: 25px;transform: rotateY(210deg) rotate(-10deg);}.rice-dumplings-body-left-bottom,.rice-dumplings-body-right-bottom {position: absolute;background: linear-gradient(to bottom right, #459712 15%, #8ad35d 80%, #459712 100%);border-top-left-radius: 0%;border: 4px black solid;}.rice-dumplings-body-left-bottom {height: 200px;width: 400px;top: 240px;left: 50px;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%;border-top-right-radius: 100%;transform: rotate(15deg);}.rice-dumplings-body-right-bottom {height: 200px;width: 250px;top: 260px;left: 250px;border-bottom-left-radius: 100%;border-bottom-right-radius: 20%;border-top-right-radius: 100%;transform: rotateY(180deg);}.rice-dumplings-face {position: absolute;}.rice-dumplings-eye {position: absolute;height: 30px;width: 30px;border-radius: 100%;background-color: black;}.eye-left {left: 250px;top: 80px;}.eye-right {left: 350px;top: 70px;}.rice-dumplings-eye.light {position: absolute;height: 10px;width: 10px;border-radius: 100%;background-color: white;}.rice-dumplings-eye.postion {right: 20%;top: 10%;}.rice-dumplings-eye.right {right: 20%;top: 10%;}.smile {position: absolute;width: 60px;height: 80px;background: linear-gradient( #fdc2a6 50%, #fa7768 50%);top: 120px;left: 300px;border: 4px black solid;border-top-left-radius: 8%;border-top-right-radius: 16%;border-bottom-left-radius: 80%;border-bottom-right-radius: 90%;}.cheek {position: absolute;top: 120px;background-color: #fd8373;border-radius: 100%;}.cheek::before {position: absolute;content: / / /;color: white;left: 23%;top: 13%;}.cheek-left {height: 40px;width: 80px;left: 190px;}.cheek-right {height: 40px;width: 60px;left: 380px;}.arm-left {position: absolute;height: 100px;width: 100px;border: 6px black solid;border-top: 0px;border-left: 0px;transform: rotate(45deg);left: 160px;top: 160px;}.arm-left::before {position: absolute;content: ;height: 50px;width: 30px;right: -15%;border-radius: 100%;background-color: black;}.arm-left::after {position: absolute;content: ;height: 20px;width: 10px;right: 8%;top: 15%;border-radius: 100%;background-color: black;transform: rotate(-45deg);}.arm-right {position: absolute;height: 130px;width: 100px;border-right: 6px black solid;left: 390px;top: -52px;transform: rotate(45deg);}.arm-right::before {position: absolute;content: ;height: 50px;width: 30px;right: -15%;border-radius: 100%;background-color: black;}.leg-left {position: absolute;height: 50px;width: 50px;border: 6px black solid;border-top: 0px;border-left: 0px;left: 160px;top: 435px;}.leg-left::before {position: absolute;content: ;height: 30px;width: 15px;left: -15%;bottom: -30px;border-radius: 100%;background-color: black;}.leg-right {position: absolute;height: 100px;width: 50px;border-right: 6px black solid;left: 250px;top: 463px;}.leg-right::before {position: absolute;content: ;height: 30px;width: 15px;right: -35%;bottom: -10px;border-radius: 100%;background-color: black;transform: rotate(-90deg);}/*太阳*/.sun {position: absolute;height: 150px;width: 150px;}.sun-body {position: absolute;height: 95px;width: 95px;background-color: #ff5f47;border-radius: 100%;border: 4px black solid;left: 30px;top: 30px;}.sun-eye {position: absolute;height: 10px;width: 10px;background-color: black;border-radius: 100%;}.sun-body.eye-left {top: 60px;left: 70px;}.sun-body.eye-right {top: 50px;left: 40px;}.sun-body.smile {position: absolute;width: 10px;height: 10px;background-color: #fdc2a6 50%;top: 70px;left: 45px;border: 4px black solid;border-top-left-radius: 8%;border-top-right-radius: 16%;border-bottom-left-radius: 80%;border-bottom-right-radius: 90%;transform: rotate(20deg);}.sunshine-top-left,.sunshine-top-right,.sunshine-bottom-left,.sunshine-bottom-right {position: absolute;background-color: #a54a29;border-radius: 100%;}.sunshine-top-left {height: 10px;width: 10px;left: -30px;top: -20px;}.sunshine-top-right {height: 20px;width: 20px;left: 130px;top: 20px;}.sunshine-bottom-left {height: 30px;width: 30px;left: -20px;top: 120px;}.sunshine-bottom-right {height: 10px;width: 10px;left: 110px;top: 120px;}.circle {position: absolute;height: 400px;width: 1200px;}.circle1,.circle2,.circle3,.circle4,.circle5,.circle6,.circle7,.circle8 {position: absolute;border-radius: 100%;background-color: #0f893c;}.circle1 {height: 300px;width: 300px;bottom: -130px;}.circle2 {height: 150px;width: 150px;bottom: -30px;left: 270px}.circle3 {height: 30px;width: 30px;bottom: 10px;left: 430px}.circle4 {height: 60px;width: 60px;bottom: 10px;left: 530px}.circle5 {height: 160px;width: 260px;bottom: -130px;left: 530px}.circle6 {height: 60px;width: 160px;bottom: -30px;left: 730px}.circle7 {height: 60px;width: 160px;bottom: -30px;left: 780px}.circle8 {height: 160px;width: 160px;bottom: -80px;left: 880px}/*黄色圈*/.y-circle1,.y-circle2,.y-circle3,.y-circle4 {position: absolute;border-radius: 100%;background-color: #cdd622;}.y-circle1 {height: 60px;width: 60px;bottom: 180px;left: 880px}.y-circle2 {height: 30px;width: 30px;bottom: 280px;left: 780px}.y-circle3 {height: 10px;width: 10px;bottom: 380px;left: 720px}.y-circle4 {height: 20px;width: 20px;bottom: 290px;left: 680px}/* 云朵 */.cloud {position: absolute;width: 175px;height: 55px;background-color: white;border-radius: 100px;box-shadow: 0 1px 5px 0px rgba(50, 50, 50, 0.05);}.cloud:after,.cloud:before {content: ;position: absolute;background-color: white;}.cloud:after {width: 50px;height: 50px;border-radius: 50%;top: -54%;left: 14%;}.cloud:before {width: 100px;height: 100px;border-radius: 50%;top: -90%;right: 10%;}.cloud1 {transform: scale(1);opacity: 0.8;left: 100px;top: 410px;z-index: 1;}.cloud2 {left: 260px;top: 360px;transform: scale(1);opacity: 0.9;z-index: 1;}/* 文本内容 */.stroke {-webkit-text-stroke: 1px black;}.text1 {position: absolute;color: white;font-size: 30px;left: 600px;top: 30px;}.text2,.text3,.text4 {position: absolute;color: white;font-size: 80px;top: 40px;}.text5,.text6,.text7 {position: absolute;color: white;font-size: 80px;top: 130px;}.text2,.text5 {left: 600px;}.text3,.text6 {left: 603px;}.text4,.text7 {left: 605px;}.text2.span1,.text3.span1,.text4.span1,.text5.span1,.text6.span1,.text7.span1 {color: #fff644;-webkit-text-stroke: 2px black;}.rice-dumplings-text {background-color: #eef535;height: 300px;width: 100px;position: absolute;left: 380px;top: 40px;border-radius: 30px;color: #0f893c;writing-mode: vertical-rl;text-align: center;line-height: 100px;font-size: 80px;-webkit-text-stroke: 2px black;}/*C*/.C {position: absolute;top: 330px;left: 605px;height: 30px;width: 400px;background-color: #eef535;border-radius: 30px;text-align: center;line-height: 30px;}/style
/headbodydiv classdemo-areadiv classcloud-maindiv classcloud cloud1/divdiv classcloud cloud2/div/divdiv classcirclediv classcircle1/divdiv classcircle2/divdiv classcircle3/divdiv classcircle4/divdiv classcircle5/divdiv classcircle6/divdiv classcircle7/divdiv classcircle8/divdiv classy-circle1/divdiv classy-circle2/divdiv classy-circle3/divdiv classy-circle4/div/divdiv classsundiv classsun-bodydiv classsun-eye eye-left/divdiv classsun-eye eye-right/divdiv classsmile/divdiv classsunshine-top-left/divdiv classsunshine-top-right/divdiv classsunshine-bottom-left/divdiv classsunshine-bottom-right/div/div/divdiv classrice-dumplingsdiv classrice-dumplings-bodydiv classrice-dumplings-body-left-top/divdiv classrice-dumplings-body-right-top/divdiv classrice-dumplings-body-left-bottom/divdiv classrice-dumplings-body-right-bottom/div/divdiv classrice-dumplings-facediv classrice-dumplings-eye eye-leftdiv classlight postion/div/divdiv classrice-dumplings-eye eye-rightdiv classlight postion/div/divdiv classsmile/divdiv classcheek cheek-left/divdiv classcheek cheek-right/div/divdiv classlimbsdiv classarm-left/divdiv classarm-right/divdiv classleg-left/divdiv classleg-right/div/div/divdiv classtexth2 classrice-dumplings-text粽子/h2h2 classstroke text1端午,祛毒平安/h2h1 classstroke text2span classspan1旗开/spanspan得胜/span/h1h1 classstroke text3span classspan1旗开/spanspan得胜/span/h1h1 classstroke text4span classspan1旗开/spanspan得胜/span/h1!--换个词--h1 classstroke text5span金榜/spanspan classspan1高粽/span/h1h1 classstroke text6span金榜/spanspan classspan1高粽/span/h1h1 classstroke text7span金榜/spanspan classspan1高粽/span/h1/divdiv classCspan 1_bit 没事写的《无用CSS技巧系列内容》/span/div/div
/body/html
