css-哆啦A梦
2020/3/4 21:00
晚上又看了下代码，布局十分杂乱，主要是过度依赖absolute定位来实现居中和对称，以及由此导致的body,wrapper父元素高度塌陷问题（虽然并不会影响图形，但还是感觉处理下比较好）。
重构了下，尽量采取margin：auto实现居中，并且通过给父元素设置尺寸解决了父元素高度塌陷的问题，通过使用float来实现手臂和脚趾的对称，由于同时使用了float:left和float:right，因此一行被占满，所以不需要考虑清除浮动。效果相同，详情见下一篇博客。
================== 分割线 =======================
最近看css的书籍，看到书上有个哆啦A梦的图片，但是没有代码，写了下，就是直线比较多优点呆板：)
效果：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>哆啦A梦title>
<style type="text/css">
body{ position: relative;}
#wrapper{
position: absolute;
left: 50%;
margin-left: -151px;
top: 100px;
display: inline-block;
}
.clearfix:after{
clear: both;
content: "";
display: block;
height: 0;
visibility: hidden;
}
#head{
position: relative;
width: 300px;
height: 300px;
background-color: rgb(2,156,226);
border: 1px solid silver;
border-radius: 150px;
}
#face{
position: absolute;
top: 50px;
left: 25px;
width: 250px;
height: 250px;
background-color: white;
border: 1px solid silver;
border-radius: 125px;
}
#necktie{
position: absolute;
left: 50%;
margin-left: -111px;
bottom: 30px;
height: 20px;
width: 220px;
border-radius: 10px;
background-color: rgb(213,4,35);
border: 1px solid silver;
}
#body{
position: absolute;
bottom: -90px;
width: 210px;
height: 120px;
border: 1px solid silver;
left: 50%;
margin-left: -105px;
background-color: rgb(2,156,226);
}
#foot-left, #foot-right{
position: absolute;
bottom: -20px;
width: 120px;
height: 20px;
border-radius: 10px;
border: 1px solid silver;
background-color: white;
}
#foot-left{
left: -25px;
}
#foot-right{
right: -25px;
}
#curve{
position: absolute;
bottom: -1px;
width: 30px;
height: 15px;
left: 50%;
margin-left: -15px;
border: 1px solid silver;
border-radius: 15px 15px 0 0;
border-bottom-width: 0;
background-color: white;
}
#belly{
position: absolute;
top: -1px;
left: 50%;
margin-left: -95px;
width: 190px;
height: 95px;
border: 1px solid silver;
border-radius: 0 0 95px 95px;
background-color: white;
}
#pocket{
position: absolute;
top: 15px;
left: 50%;
margin-left: -70px;
width: 140px;
height: 70px;
border: 1px solid silver;
border-radius: 0 0 70px 70px;
background-color: white;
}
#arm-left,#arm-right{
position: absolute;
top: -2px;
width: 0;
height: 0;
border-width:40px;
border-style: solid;
}
#arm-left{
left: -80px;
border-color: transparent silver silver transparent;
}
#arm-right{
right: -80px;
border-color: transparent transparent silver silver;
}
#triangle1-left,#triangle1-right{
position: absolute;
top: -37.5px;
width: 0;
height: 0;
border-width: 38.3px;
border-style: solid;
}
#triangle1-left{
border-color: transparent rgb(2,156,226) rgb(2,156,226) transparent;
left: -37.5px;
}
#triangle1-right{
border-color: transparent transparent rgb(2,156,226) rgb(2,156,226);
right: -37.5px;
}
#triangle2-left,#triangle2-right{
position: absolute;
width: 0;
height: 0;
border-width: 19px;
border-style: solid;
}
#triangle2-left{
border-color: transparent silver silver transparent;
}
#triangle2-right{
left: -39px;
border-color: transparent transparent silver silver;
}
#triangle3-left,#triangle3-right{
position: absolute;
top: -16.5px;
width: 0;
height: 0;
border-width: 18.4px;
border-style: solid;
}
#triangle3-left{
left: -17.6px;
border-color: transparent white white transparent;
}
#triangle3-right{
right: -18.4px;
border-color: transparent transparent white white;
}
#triangle4-left, #triangle4-right{
position: absolute;
top: -39px;
width: 0;
height: 0;
border-width: 8px;
border-style:solid;
}
#triangle4-left{
left: 23.5px;
border-color: transparent rgb(2,156,226) rgb(2,156,226) transparent;
}
#triangle4-right{
right: 23.5px;
border-color: transparent transparent rgb(2,156,226) rgb(2,156,226);
}
#hand-left,#hand-right{
position: absolute;
top: 20px;
width: 40px;
height: 40px;
border:1px solid silver;
border-radius: 20px;
background-color: white;
}
#hand-left{
left: -39px;
}
#hand-right{
right: -39px;
}
#bell{
position: absolute;
top: -20px;
left: 50%;
margin-left: -18px;
width: 32px;
height: 32px;
border: 2px solid silver;
border-radius: 16px;
background-color: rgb(255,224,51);
}
#transverse{
position: absolute;
top: 5px;
left: 50%;
margin-left: -16px;
width: 28px;
height: 4px;
border: 2px solid silver;
background-color: transparent;
}
#innercircle{
position: absolute;
left: 50%;
margin-left: -5px;
top: 8px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: silver;
}
#vertical{
position: absolute;
left: 50%;
margin-left: -1px;
top: 10px;
width: 2px;
height: 8px;
background-color: silver;
}
#left-eye,#right-eye{
position: absolute;
left: 50%;
top: -16px;
width: 50px;
height: 50px;
border: 1px solid silver;
border-radius: 25px;
background-color: white;
}
#left-eye{
margin-left: -51px;
}
#right-eye{
margin-left: 1px;
}
#left-iris{
position: absolute;
top: 15px;
left: 24px;
width: 20px;
height: 30px;
border-radius: 20px/30px;
border-top: 2px solid black;
}
#right-iris{
position: absolute;
top: 12px;
left: 6px;
width: 10px;
height: 20px;
border-radius: 5px/10px;
background-color: black;
}
#right-pupil{
position: absolute;
top: 4px;
left: 2px;
width: 4px;
height: 8px;
border-radius: 2px/4px;
background-color: white;
}
#mouth{
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 60px;
width: 200px;
height: 100px;
border-radius: 0 0 100px 100px;
border: 2px solid black;
}
#mouth div{
position: absolute;
left: 50%;
margin-left: -110px;
top: -2px;
width: 220px;
height: 60px;
background-color: white;
}
#mouth #vertical{
position: absolute;
left: 50%;
margin-left: -2px;
top: -60px;
width: 2px;
height: 160px;
background-color: black;
}
#nose{
position: absolute;
left: 50%;
margin-left: -20px;
top: 20px;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: rgb(213,4,35);
border: 1px solid black;
}
#nose-inner{
position: absolute;
top: 8px;
left: 6px;
width: 10px;
height: 10px;
border-radius:5px;
background-color: white;
}
#bear1,#bear2,#bear3,#bear4,#bear5,#bear6{
position: absolute;
width: 120px;
height: 2px;
background-color: black;
}
#bear1{
top: 70px;
left: 50%;
margin-left: -140px;
transform:rotate(7deg);
}
#bear2{
top: 70px;
right: 50%;
margin-right: -140px;
transform:rotate(-7deg);
}
#bear3{
top: 100px;
left: 50%;
margin-left: -140px;
}
#bear4{
top: 100px;
right: 50%;
margin-right: -140px;
}
#bear5{
top: 130px;
left: 50%;
margin-left: -140px;
transform:rotate(-7deg);
}
#bear6{
top: 130px;
right: 50%;
margin-right: -140px;
transform:rotate(7deg);
}
style>
head>
<body>
<div id="wrapper">
<div id="head">
<div id="face">
<div id="left-eye"><div id="left-iris">div>div>
<div id="right-eye"><div id="right-iris"><div id="right-pupil">div>div>div>
<div id="mouth">
<div>div>
<div id="vertical">div>
div>
<div id="nose"><div id="nose-inner">div>div>
<div id="bear1">div>
<div id="bear2">div>
<div id="bear3">div>
<div id="bear4">div>
<div id="bear5">div>
<div id="bear6">div>
div>
<div id="necktie">div>
div>
<div id="body">
<div id="arm-left">
<div id="triangle1-left">
<div id="triangle2-left"><div id="triangle3-left">div>div>
<div id="triangle4-left">div>
<div id="hand-left">div>
div>
div>
<div id="arm-right">
<div id="triangle1-right">
<div id="triangle2-right"><div id="triangle3-right">div>div>
<div id="triangle4-right">div>
<div id="hand-right">div>
div>
div>
<div id="belly"><div id="pocket">div>div>
<div id="curve">div>
<div id="foot-left">div>
<div id="foot-right">div>
<div id="bell">
<div id="transverse">
<div id="innercircle">
<div id="vertical">div>
div>
div>
div>
<p style="position: absolute;bottom: -100px;font-family: 'Times New Roman';font-size: 22px;font-weight: bold;">
©by xk-wang 2020/3/4p>
div>
div>
body>
html>