接着之前的[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. 在Objective-C中浅谈面向对象

    接触面向对象也有一段时间了,当时是通过C++学习的OOP,后来又接触到了PHP和Java.每种OOP的语言在面向对象上或多或少都会有不同的地方,现在在学习OC的面向对象部分,又感觉到OC面向对象的特点 ...

  2. Ubuntu杂记——Ubuntu下Eclipse安装Maven问题

    转:在线安装maven插件问题:Cannot complete the install because one or more required items could not be found. 使 ...

  3. 编写atoi库函数

    看到很多面试书和博客都提到编写atoi函数,在很多面试中面试官都会要求应聘者当场写出atoi函数的实现代码,但基本很少人能写的完全正确,倒不是这道题有多么高深的算法,有多么复杂的数据结构,只因为这道题 ...

  4. 深入探讨：标签（Tag）的各种设计方案

    首先,标签(Tag)是什么? 我的理解:用来具体区分某一类内容的标识,和标签类似的一个概念是分类(Category),有一个示例可以很好的区分它们两个,比如人类分为:白种人.黄种人和黑种人(可以看作分 ...

  5. C# 原样复制excel工作表

    在excel中,工作表是工作薄的组成部分,一个工作薄可以由一个或多个工作表组成,一个工作薄也可以说是一个excel文档,正因为如此,excel工作表的复制也就分为两种类型:在同一文档之内复制和在不同文 ...

  6. Oracle数据块损坏篇之10231内部事件

    实验:某个分区数据块损坏,不完全恢复此分区表数据 背景:数据库没有有效备份,某个分区中有数据块损坏. 要求:最大限度恢复此分区数据. 环境:RHEL 6.4 + Oracle 11.2.0.4 1. ...

  7. 在SQL Server里我们为什么需要意向锁（Intent Locks）？

    在1年前,我写了篇在SQL Server里为什么我们需要更新锁.今天我想继续这个讨论,谈下SQL Server里的意向锁,还有为什么需要它们. SQL Server里的锁层级 当我讨论SQL Serv ...

  8. SQL Server 存储过程遇到“表 '#TT' 没有标识属性。无法执行 SET 操作”错误

    创建临时表,往临时表插入数据的时候报的错误. 一开始提示没有打开主键,后来打开主键就提示上述错误异常. 从网上查找资料没有找到,然后又到群里问各位大牛,一位大牛告诉我是没有设置主键. 我又仔细看看提示 ...

  9. C#图片加水印实例与代码

    本文要提供的类可以为图片加文字水印,以及判断是否是图片文件.经过测试可运行,例子请下载:http://hovertree.com/h/bjaf/5qc5eh6y.htm 例子效果图: 以下是Hover ...

  10. [Q&A] 应用程序清单生成失败

    当在 Silverlight 客户端属性里(如下图),添加"允许在浏览器外运行应用程序"和"在浏览器内运行时需要提升的信任"时, 图1 目录下会自动生成如下两个 ...