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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Css Paint</title>

     <link rel="stylesheet" type="text/css" href="../css/sun.css" />

     <link rel="stylesheet" type="text/css" href="../css/house.css" />

     <link rel="stylesheet" type="text/css" href="../css/human.css" />

     <link rel="stylesheet" type="text/css" href="../css/cloud.css" />

 </head>

 <body>

     <div class="sun">

         <div class="sun-body"></div>

         <div class="sun-shine-light sun-shine-light1"></div>

         <div class="sun-shine-light sun-shine-light2"></div>

         <div class="sun-shine-light sun-shine-light3"></div>

         <div class="sun-shine-light sun-shine-light4"></div>

         <div class="sun-shine-light sun-shine-light5"></div>

     </div>

     <div class="house-width house">

         <div class="house-width house-roof house-roof-left"></div>

         <div class="house-width house-roof house-roof-right"></div>

         <div class="house-width house-wall">

             <div class="house-wall-door">

                 <div class="house-wall-door-handle"></div>

             </div>

         </div>

     </div>

     <div class="human human-pos-1">

         <p class="lines">大家好，我叫小明</p>

         <div class="human-head-normal"></div>

         <div class="human-body-normal"></div>

         <div class="human-arms-normal"></div>

         <div class="human-legs-normal"></div>

     </div>

     <div class="human human-pos-2">

         <p class="lines">大家好，我叫静静</p>

         <div class="human-head-normal"></div>

         <div class="human-body-normal"></div>

         <div class="human-arms-normal"></div>

         <div class="human-legs-1"></div>

     </div>

     <div class="cloud cloud-pos cloud-pos-1">

         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>

     </div>

     <div class="cloud cloud-pos cloud-pos-2">

         <div class="cloud-pos cloud-border cloud-bg cloud-top"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-left"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-right"></div>

         <div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>

     </div>

 </body>

 </html>

Html

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

 .human-pos-1 {

     left: 250px;

     bottom: 25px;

 }

 .human-pos-2 {

     left: 40px;

     bottom: 60px;

 }

 .human-legs-1 {

     border: 3px solid #000;

     border-bottom: none;

     border-right: none;

     height:50px;

     left: 55px;

     position: absolute;

     top: 120px;

     width: 50px;

     -webkit-transform: rotate(-2deg);

     -webkit-transform-origin: 1px 1px;

 }

human.css改动

云的css如下：

 .cloud{

     height: 150px;

     width: 250px;

 }

 .cloud-pos {

     position: absolute;

 }

 .cloud-pos-1 {

     left: 35%;

     top: 25px;

 }

 .cloud-pos-2 {

     left: 60%;

     top: 25px;

 }

 .cloud-bg {

     background-color: skyBlue;

 }

 .cloud-border {

     border: 2px solid #000;

 }

 .cloud-top {

     border-radius: 100%;

     border-width: 0px;

     height: 100px;

     left: 50%;

     margin-left:-75px;

     width: 150px;

 }

 .cloud-left {

     border-radius: 100%;

     border-width: 0px;

     height: 100px;

     margin-top: -50px;

     top: 60%;

     width: 100px;

 }

 .cloud-right {

     border-radius: 100%;

     border-width: 0px;

     height: 100px;

     margin-top: -50px;

     right:;

     top: 60%;

     width: 100px;

 }

 .cloud-bottom {

     border-radius: 100%;

     border-width: 0px;

     height: 100px;

     left:53%;

     margin-left: -75px;

     margin-top: -50px;

     top: 65%;

     width: 150px;

 }

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

[css]我要用css画幅画(四)的更多相关文章

  1. [css]我要用css画幅画(五)

    接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...

  2. [css]我要用css画幅画(三)

    接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...

  3. [css]我要用css画幅画(六)

    接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...

  4. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  5. [css]我要用css画幅画(八) - Hello Kitty

    接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...

  6. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

  7. [css]我要用css画幅画(二)

    接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...

  8. [css]我要用css画幅画(一)

    几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...

  9. 【CSS学习笔记】a标签的四种伪类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. SDN/NFV若干问题

    1.首先谈一谈网络技术和组网技术的关系 网络可分为两层:业务网.承载网.业务网主要是组织业务系统,而承载网主要是用来传输信息流:包括传送网(点到点数据专线).数据网(端到端连接).内容分发网(点到多点 ...

  2. 【JUC】JDK1.8源码分析之ThreadPoolExecutor（一）

    一.前言 JUC这部分还有线程池这一块没有分析,需要抓紧时间分析,下面开始ThreadPoolExecutor,其是线程池的基础,分析完了这个类会简化之后的分析,线程池可以解决两个不同问题:由于减少了 ...

  3. SQL Server 存储过程中处理多个查询条件的几种常见写法分析，我们该用那种写法

    本文出处: http://www.cnblogs.com/wy123/p/5958047.html 最近发现还有不少做开发的小伙伴,在写存储过程的时候,在参考已有的不同的写法时,往往很迷茫,不知道各种 ...

  4. 1.Struts2简介和Struts2开发环境搭建

    一.Struts2简介: 1.什么是Struts2? 著名的SSH三大框架分别为:表现层(Struts).业务逻辑层(Spring),持久化层(Hibernate). Struts2是在WebWork ...

  5. 在IIS下部署Thinkphp项目，验证码不能显示的解决办法

    由于公司租用的是虚拟空间,而且用的是IIS服务器,所以部署PHP的时候就出现很多问题:比如昨天就碰到这个问题:在IIS下部署Thinkphp项目,验证码不能显示 这是生成验证码的方法: // 制作专门 ...

  6. Apache 创建虚拟主机目录和设置默认访问页面

    虚拟主机 (Virtual Host) 是在同一台机器搭建属于不同域名或者基于不同 IP 的多个网站服务的技术. 可以为运行在同一物理机器上的各个网站指配不同的 IP 和端口, 也可让多个网站拥有不同 ...

  7. 移动端IM系统的协议选型：UDP还是TCP？

    1.前言 对于有过网络编程经验的开发者来说,使用何种数据传输层协议来实现数据的通信,是个非常基础的问题,它涉及到你的第一行代码该如何编写. 从PC时代的IM开始,IM开发者就在为数据传输协议的选型争论 ...

  8. Bootstrap Navbar应用及源码解析

    目的: 用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一 ...

  9. 深入剖析tomcat之一个简单的web服务器

    这个简单的web服务器包含三个类 HttpServer Request Response 在应用程序的入口点,也就是静态main函数中,创建一个HttpServer实例,然后调用其await()方法. ...

  10. SpringData —— HelloWorld

    SpringData 简介 优点 简化数据库访问,减少数据访问层的开发量. 支持的数据库类型 支持 NoSQL 存储,如 MongoDB,Redis. 支持关系型数据存储技术,如 jdbc,jpa. ...