标签：hit pen class选择器 头部 关键字 上网 分享 简写 编辑器
接着之前的[css]我要用css画幅画(六)，今天画的有所不同，画的是哆啦A梦，我们小时候对他的称呼其实是小叮当机器猫。
（PS:这次我要做的事情，很多人已经做过，这并不是什么创新，我只是在学习并记录下学习的过程）
这次就不多说CSS属性的基础概念了。 说说我画的过程吧， 好，进入正题。
因为和之前的瞎画不同，这次是画现有的东西。我认为临摹是比较简单的。 我先上网找了下要临摹的对象，找了个最中规中矩的图片，如下：
这对我来说不是一个简单的任务， 而我处理不简单的任务的解决方案，就是把他拆分再拆分，一直拆到问题无法再拆且可以解决为止。
拆分结果如下：
1. 头
1.1 眼睛
1.2 脸廓
1.3 鼻子
1.4 胡须
1.5 嘴唇
1.6 嘴巴
1.6.1 口腔
1.6.2 舌头
2. 身子
2.1 项圈
2.2 铃铛
2.3 躯干
2.4 肚兜
2.5 百宝袋
2.6 双手
2.6.1 手臂
2.6.2 拳头
2.7 双脚
2.7.1 腿
2.7.2 脚掌
这个画我无法一次性完成，最新的效果可以在这里看到： Demo
代码在这： https://github.com/bee0060/Css-Paint
（请根据关键字carton、doraemon找相应的文件）
之后我会陆续更新这幅画，有些进展之后会记录在该篇博客中。
-------------------------------------------------------------------------- 2015.12.24 start --------------------------------------------------------------------------
到目前为止， 完成了小叮当的头部。 看了效果的会发现，下巴处看起来不对， 没关系，等我加上他的围脖后，就能遮挡住这块不对劲的地方了。
先上代码：
head-html common&head-csscodepen效果： http://codepen.io/bee0060/pen/bEwRNG
这个画画了快一个月，才把头画完，主要是因为懒，三天打鱼两天晒网，其次也在中途遇到几个难点，差点因为这些难点放弃了。
其中最难的要数嘴唇和嘴唇两边的类似半圆形（我叫它们做“嘴唇左边”和“嘴唇右边”）， 其中需要曲线、半圆、倾斜、遮盖来完成。其中最难处理的是曲线，解决了曲线问题后，就比较顺利的完成了后续的画。
嘴唇左边: 这里用了一个半圆加上一定的倾斜实现。但实现之初，半圆会突出到胡子的区域，我就给胡子的容器设置白色背景色，将突出到胡子区域的嘴唇左边部分遮盖。
嘴唇： 因为嘴唇是先向下凸，再向上，又向下的曲线，这里由3个圆角来拼接成这样的曲线，这里做曲线的时间是最长的，遇到的问题和解决方案在下面细说。
嘴唇右边：这里和嘴唇左边采取相同的方法。 只是圆角的角度不相同。
曲线: 我是用圆角来实现曲线的，相信很多人都是这么处理的。但是圆角有个问题，如果只有一面有边框（例如left），且设置圆角，这个边框会在末端慢慢变细，这会影响呈现效果。
我的解决方案是，增加一层容器， 再给容器设置overflow:none, 然后真正拥有圆角边框的对象在容器内， 然后调整容器和圆角对象的大小，让边框变细的部分超出容易，以此隐藏掉变细的部分。
画这幅画的过程一点也不优雅， 我无法通过数学的方式优雅的计算出每个对象的位置，每个圆角的弧度，每个倾斜的角度。 我采用最低级的方法， 在chrome中，选中元素并不断调整各种css属性，最终实现现在的效果。 所以这么做非常低效。 如果各位有什么好的工具或方法， 请不吝赐教。 在此先谢过。
到目前为止，只完成了头部， 之后（应该）会陆续完善直至完成。
谢谢观看。另外，圣诞快乐。
-------------------------------------------------------------------------- 2015.12.24 end --------------------------------------------------------------------------
-------------------------------------------------------------------------- 2015.12.27 start --------------------------------------------------------------------------
今天的更新不说功能， 只说一说这幅画的CSS规范和策略。
本画尽量遵照OOCSS的建议：http://www.w3cplus.com/css/oocss-concept
看了本画代码的同学可能会觉得很多html对象都用了一大串的class，但是细心的可能会发现有些类选择器出现过多次。
我这么写的目的是，在css的不同选择器中，尽量减少同名且同值的css属性代码。
在html上，可以像组件一样引用各种需要的选择器来实现效果。
这样可以让css尽量短小，且不重复。 虽然html对象的class属性很长，但是可以像组件一样更灵活的变换组合出需要的效果。
在本画中，只使用类选择器，即class选择器。
类选择器的种类主要分为4种：
1. 组件 - 用于描述哆啦A梦的各组成部分，如头(.head)、脸(.face)、眼睛(.eyes)等， 其中包含的css属性为以下3种不包含的，其实就是那些不知道怎么放进以下三种选择器中的css属性。
2. 形状 - 用于描述对象形状的，如正圆行， 暂时只有.circle类， 其中只有一个属性： border-radius: 50%;
3. 位置 - 这里不包括left、top等直接描述位置的，因为各组件的具体位置基本不可重用。这里描述的位置是：position、float，还有特殊的如margin纵向居中的类。
4. 样式 - 如背景色类、边框颜色类、边框宽度类等。 例如看原图可以看出， 这画其实主要就那么3、4种颜色， 所以我把颜色抽出来，就不需要在一大堆类中写重复的颜色css了。
类选择器的命名：
我用的编辑器是Sublime Text 2， 有一个非常好用也很常用的组件是Emmet，Emmet其中一个功能是可以打很少的字符来输入css，于是我的类选择器，如果其中只设置一个属性的话，一般就用这个属性和值在Emmet中的简写来表示，还有些用属性名的简写加上对应值的名称，用横杠链接来表示。如：
1 /*
2 左边为Emmet 中的简写，右边为表示的css属性
3 pos ==> position
4 bac ==> background-color
5 于是我有如下类选择器：
6 */
7
8 .pos-a {
9 position: absolute;
10 }
11
12
13 .bacc-white {
14 background-color: white;
15 }
在html中使用选择器时， 也按照选择器类别的顺序： 组件->形状->位置->样式， 如下：
1 <div class="eye eye-left circle pos-a bacc-white"> 2 </div>
其中组件有可能有扩展和子组件的关系，就根据组件选择器的辈份从前到后排列。
好了，我的html和css书写规范说完了。 下次更新应该至少会画个围脖（或叫项圈）吧。
谢谢观看。
-------------------------------------------------------------------------- 2015.12.27 end --------------------------------------------------------------------------
-------------------------------------------------------------------------- 2016.01.04 end --------------------------------------------------------------------------
经过几天断断续续的努力， 终于把这个画给完成了。 掌握了基本技巧之后，要完成这幅画的难度就降低很多了。最基本的技巧不外乎：
· 圆角
· 遮盖
· overflow hidden
· 倾斜
这次更新完成的内容较多， 包括如下：
1. 项圈 - 用一个较宽的椭圆实现， 只显示下半圆的大部分，用容器把不需要的超出部分隐藏。 铃铛里的曲线也是用会超出容器的两个上下并排的圆实现
2. 身体 - 用不规则的椭圆实现
3. 百宝袋 - 用两个不规则椭圆实现上边和下边
4. 双手 - 用椭圆和倾斜实现手臂，再用正圆的手掌遮盖不需要的部分
5. 双脚 - 用两个不规则椭圆实现左右两腿， 用一个白底黑边的椭圆实现裤裆（~。~），并遮盖在两腿之间，实现最终效果。 用椭圆和倾斜实现双脚。
大体上已经完成， 细节还是看得出差异，不过我个人已经比较满意这个效果了。 之后可能只会花一点点时间去微调一下细节部分。
所以， 这幅画到此结束。 谢谢观看。
-------------------------------------------------------------------------- 2016.01.04 end --------------------------------------------------------------------------
完.....
最终效果： Demo
Code pen效果: http://codepen.io/bee0060/pen/rxjKxP
关键html：
View Code完整css：
View Code（在这里再发一次demo链接， 希望可以省去你滚动回本文顶部的时间）
（至于画完这个接着做什么， 现在有几个想法可以做， 也可能做其他东西， 管他呢，随心而至就是了）
有任何问题或意见，欢迎交流。
如果发现本文有什么问题（如错别字），请不吝告知，谢谢。
转载请注明出处：[css]我要用css画幅画(七) - 哆啦A梦
标签：hit pen class选择器 头部 关键字 上网 分享 简写 编辑器
原文地址：http://www.cnblogs.com/xuanbiyijue/p/7762569.html
