持续更新中
2015-03-26
24号试着自己用纯css绘制一个哆啦A梦出来，然后昨天有事情耽搁，今天写了一点，完成了脑袋部分。发现自己的代码有一些问题。理论上来说，我可以把所有的小部件全部丢到一个div里，然后用相对定位把它们挨个固定好。但是这样有个弊端就是一旦我修改了某一个元素，后面的位置基本上就全乱掉了。所以我看得别人做好的源码都是分成好几大块，头，身体，腿这样。我倒是也这么做的，从“头”开始。但是在这一部分里小零件虽然分了层，但是零件过多定位还是有点混乱。
好像我说的有点乱，就是我觉得没一小部分可以通过外框控制定位，内框绘制样式来尽可能少的减少相对定位的使用。然后同时可以用overflow:hidden;之类的代码控制边界。
举个例子
看图中舌头部分，这里我是在嘴(div.mouse)中列了一个(div.mouse-in)，而后者中有两个小的方div，宽度和大于div.mouse-in，靠相对定位排在div.mouse-in中，然后div.mouse-in再用margin:0 auto;以及相对定位固定。为了添加线描的效果，最内部的两个div我是设置了border-top;然后外面的div.mouse-in设置overflow:hidden;在IE11下显示ok。但是在firefox下边框会隐隐延伸出来（就是这张图）。
现在我有个想法是，舌头每个小圆外罩一个div用overflow:hidden;划好，然后两个div带上float:left; 直接放在一个两倍他们宽度的div.mouse-in中。 另外一个例子是，哆啦A梦的头，外套一个带overflow:hidden; 高度小于实际头高的div，把头的底部消掉，这时候下面无论是放身体还是放项圈都不需要再额外定位了。 附上现在版本的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8" />
<style>
body,
div {
margin: 0;
padding: 0;
}
div.dm {
width: 200px;
margin: 20px auto;
}
div.head {
border: 1px solid #000000;
margin: 10px auto;
width: 200px;
height: 180px;
background-color: #66aadd;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
border-radius: 100px;
}
div.face {
position: relative;
margin: 0px auto;
top: 20px;
width: 180px;
height: 160px;
background-color: #ffffff;
border-radius: 100%;
}
div.eyes {
margin: 0 auto;
width: 72px;
height: 45px;
position: relative;
top: -17px;
}
div.eye {
box-sizing: border-box;
width: 36px;
height: 45px;
border-radius: 100%;
border: 1px solid #000000;
background-color: #ffffff;
float: left;
}
div.eyel {
}
div.eyer {
}
i.eyel-in {
display: block;
box-sizing: border-box;
width: 12px;
height: 16px;
border-radius: 100%;
background-color: #ffffff;
border: 5px solid #000000;
position: relative;
left: 18px;
top: 22px;
}
i.eyer-in {
box-sizing: border-box;
display: block;
width: 15px;
height: 15px;
border-radius: 100%;
border-top: 3px solid #000000;
position: relative;
top: 25px;
left: 5px;
}
div.nose {
box-sizing: border-box;
width: 24px;
height: 24px;
border: 8px solid #cc0000;
border-top: 7px solid #cc0000;
border-bottom: 9px solid #cc0000;
background-color: #ffffff;
border-radius: 100%;
margin: 0 auto;
position: relative;
top: -24px;
}
div.line {
width: 2px;
height: 27px;
background-color: #808080;
margin: 0 auto;
position: relative;
top: -24px;
}
div.m {
width: 70px;
height: 2px;
background-color: #000000;
position: relative;
}
div.l1,
div.l2,
div.l3 {
transform-origin: right;
position: relative;
left: -90px;
}
div.r1,
div.r2,
div.r3 {
position: relative;
left: 20px;
transform-origin: left;
}
div.r1 {
top: -2px;
}
div.r2 {
top: -2px;
}
div.r3 {
top: -2px;
}
div.l1,
div.r3 {
transform: rotate(15deg);
}
div.l2,
div.r2 {
transform: rotate(0deg);
}
div.l3,
div.r1 {
transform: rotate(-15deg);
}
div.mouse {
margin: 0 auto;
position: relative;
top: -24px;
width: 140px;
height: 70px;
background-color: #ee1222;
border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
overflow: hidden;
border: 1px solid #000000;
}
div.mouse-in {
width: 130px;
height: 50px;
margin: 0 auto;
position: relative;
top: 20px;
overflow: hidden;
}
div.te {
width: 70px;
height: 70px;
border-radius: 100%;
background-color: #f48d00;
border-top: 1px solid #000000;
}
div.te1 {
position: relative;
left: 0px;
}
div.te2 {
position: relative;
left: 60px;
top: -70px;
}
</style>
</head>
<body>
<div class="dm">
<div class="head">
<div class="face">
<div class="eyes">
<div class="eye eyel">
<i class="eyel-in"></i>
</div>
<div class="eye eyer">
<i class="eyer-in"></i>
</div>
</div>
<div class="nose"></div>
<div class="line">
<div class="m l1"></div>
<div class="m r1"></div>
<div class="m l2"></div>
<div class="m r2"></div>
<div class="m l3"></div>
<div class="m r3"></div>
</div>
<div class="mouse">
<div class="mouse-in">
<div class="te te1"></div>
<div class="te te2"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2015-03-24
