[css]我要用css画幅画(四)_html-js-css

概述接着之前的[css]我要用css画幅画(三)，今天，我画了两朵云，并给小明介绍了个朋友：静静。 github：https://github.com/bee0060/Css-Paint ，

接着之前的[css]我要用css画幅画(三)，今天，我画了两朵云，并给小明介绍了个朋友：静静。

github：https://github.com/bee0060/Css-Paint ，完整代码在pages/sun-house-4.HTML和相关的CSS中可以找到

demo： http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-4.html

完整HTML如下：

 1 <!DOCTYPE HTML> 2 <HTML lang="en" 3 head 4     Meta charset="UTF-8" 5     Title>CSS Paint</ 6     link rel="stylesheet" type="text/CSS" href="../CSS/sun.CSS" /> 7     ="../CSS/house.CSS"  8     ="../CSS/human.CSS"  9     ="../CSS/cloud.CSS" 10 11 body12     div class="sun"13         ="sun-body"></div14         ="sun-shine-light sun-shine-light1"15         ="sun-shine-light sun-shine-light2"16         ="sun-shine-light sun-shine-light3"17         ="sun-shine-light sun-shine-light4"18         ="sun-shine-light sun-shine-light5"19     20 21     ="house-wIDth house"22         ="house-wIDth house-roof house-roof-left"23         ="house-wIDth house-roof house-roof-right"24         ="house-wIDth house-wall"25             26             ="house-wall-door"27                 28                 ="house-wall-door-handle"29             30         31     32 33     ="human human-pos-1"34         p ="lines">大家好，我叫小明p35         ="human-head-normal"36         ="human-body-normal"37         ="human-arms-normal"38         ="human-legs-normal"39     40 41     ="human human-pos-2"42         >大家好，我叫静静43         44         45         46         ="human-legs-1"47     48 49     ="cloud cloud-pos cloud-pos-1"50         ="cloud-pos cloud-border cloud-bg cloud-top"51         ="cloud-pos cloud-border cloud-bg cloud-left"52         ="cloud-pos cloud-border cloud-bg cloud-right"53         ="cloud-pos cloud-border cloud-bg cloud-bottom"54     55     ="cloud cloud-pos cloud-pos-2"56         57         58         59         60     61 62 63 64 HTML>

HTML

本次对human.CSS做了一些改动，主要增加了如下内容：

 1 .human-pos-1 { 2     left: 250px; 3     bottom: 25px; 4 } 5  6 .human-pos-2 { 7  40px; 8  60px; 9 }10 11 .human-legs-1 {12     border: 3px solID #000;13     border-bottom: none;14     border-right:15     height:50px;16  55px;17     position: absolute;18     top: 120px;19     wIDth: 50px;20     21     -webkit-transform: rotate(-2deg);22     -webkit-transform-origin: 1px 1px;23 }

human.CSS改动

云的CSS如下：

@H_313_404@

.cloud{ 150px;.cloud-pos { 8 } 9 10 .cloud-pos-1 {11  35%;13 }14 15 .cloud-pos-2 { 60%;18 }19 20 .cloud-bg {    background-color: skyBlue;22 }23 24 .cloud-border {25  2px solID #000;26 }27 28 .cloud-top {29     border-radius: 100%;30     border-wIDth: 0px;31  100px;32  50%;33     margin-left:-75px;34 35 }36 37 .cloud-left {38 39  0px; 40 41     margin-top: -50px;42 43 44 }45 46 .cloud-right {    47 48 49 50 51     right:0;52 53 54 }55 .cloud-bottom {    56 57 58 59 53%;60  -75px;61 62  65%;63 64 }