Home >Web Front-end >HTML Tutorial >[css]我要用css画幅画(四)_html/css_WEB-ITnose
[css]我要用css画幅画(四)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:31933browse
接着之前的[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>
本次对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 }
云的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 }
这里并没有用到什么陌生的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看起来效果更好，可以留言告诉我，我再加回去。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3的rem设置字体大小_html/css_WEB-ITnoseNext article：关于html水平垂直居中的一些总结吧_html/css_WEB-ITnose