[css]我要用css画幅画(四)_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

接着之前的[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看起来效果更好，可以留言告诉我，我再加回去。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles