你的位置:首页 > 网页设计

[网页设计][css]我要用css画幅画(四)


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

Html

 

本次对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 }

human.css改动

 

云的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 }

cloud.css

 

这里并没有用到什么陌生的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看起来效果更好,可以留言告诉我,我再加回去。