[css]我要用css画幅画(四)_html/css_WEB-ITnose-html tutorial-php.cn

[css]我要用css画幅画(四)_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:33:31

asal

924 orang telah melayarinya

接着之前的[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-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>

Salin selepas log masuk

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

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

Salin selepas log masuk

云的css如下：

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

Salin selepas log masuk

这里并没有用到什么陌生的css，一个发现是，原来还有skyBlue这个颜色。

这里的云是由四个形状不一的圆组成，主要用了圆角属性和位置属性。

在画完后，也特意查了以下MDN中border-radius的详细介绍，加深了解，这里奉上MDN的文档链接（内容较多，再转述觉得多余，也担心造成误导，直接看文档可能更好）：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

非常详细，发现自己以前用的还是比较浅的。

今天就到这，谢谢观看。如有错误，欢迎指正。

PS: 这次去掉了code pen的demo，因为code pen每次都要把多个css文件中的代码逐个复制进去，比较麻烦。但如果看官觉得有code pen看起来效果更好，可以留言告诉我，我再加回去。