接着之前的[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</title> 6 <link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7 <link rel="stylesheet" type="text/css" href="../css/house.css" /> 8 <link rel="stylesheet" type="text/css" href="../css/human.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/cloud.css" /> 10 </head> 11 <body> 12 <div class="sun"> 13 <div class="sun-body"></div> 14 <div class="sun-shine-light sun-shine-light1"></div> 15 <div class="sun-shine-light sun-shine-light2"></div> 16 <div class="sun-shine-light sun-shine-light3"></div> 17 <div class="sun-shine-light sun-shine-light4"></div> 18 <div class="sun-shine-light sun-shine-light5"></div> 19 </div> 20 21 <div class="house-width house"> 22 <div class="house-width house-roof house-roof-left"></div> 23 <div class="house-width house-roof house-roof-right"></div> 24 <div class="house-width house-wall"> 25 26 <div class="house-wall-door"> 27 28 <div class="house-wall-door-handle"></div> 29 </div> 30 </div> 31 </div> 32 33 <div class="human human-pos-1"> 34 <p class="lines">大家好，我叫小明</p> 35 <div class="human-head-normal"></div> 36 <div class="human-body-normal"></div> 37 <div class="human-arms-normal"></div> 38 <div class="human-legs-normal"></div> 39 </div> 40 41 <div class="human human-pos-2"> 42 <p class="lines">大家好，我叫静静</p> 43 <div class="human-head-normal"></div> 44 <div class="human-body-normal"></div> 45 <div class="human-arms-normal"></div> 46 <div class="human-legs-1"></div> 47 </div> 48 49 <div class="cloud cloud-pos cloud-pos-1"> 50 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div> 51 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div> 52 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div> 53 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div> 54 </div> 55 <div class="cloud cloud-pos cloud-pos-2"> 56 <div class="cloud-pos cloud-border cloud-bg cloud-top"></div> 57 <div class="cloud-pos cloud-border cloud-bg cloud-left"></div> 58 <div class="cloud-pos cloud-border cloud-bg cloud-right"></div> 59 <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div> 60 </div> 61 62 63 </body> 64 </html>