我的Web前端课程-position定位（哆啦A梦图制作）
哆啦A梦的制作花费了我两个自习课的时间，自己也完全巩固了position的知识基础；其中的技术引用了position里的“子绝(absolute)父相(relation)”，以及position固定定位（fixed）；代码量偏多，绝大部分是position的使用；下面观看以下代码：
框架是使用了两个
做身体的载体以及一个大
包围框，其余是使用Document
样式通过引用css样式，通过细节处理，把哆啦A梦的基本图样拼成，其中还不乏引用了标签选择器 nth-child()(选择第几个)、last-child()(父元素最后一个孩子)、first-child()(父元素第一个孩子) 、-n+5(选中1-5)、E(元素):nth-child(-n+9):nth-child(n+7) (选中7-9)...等用法；样式代码如下:
* {
margin: 0;
padding: 0;
}//清除固定样式
body {
background-color: lightgray;
}
.box {
width: 400px;
height: 500px;
background-color: #fff;
//图片居中（固定定位）
position: fixed;
top: 0;(从上往下移动)
bottom: 0;（从下往上移动）
left: 0;(从左往右移动）
right: 0;(从右往左移动)
margin: auto;
padding:40px ;
}
.head {
width: 314px;
height: 290px;
background: #0dacd4;
//相对定位
position: relative;
top: 10px;
left: 40px;
//圆角
border-radius: 170px;
border: 2px solid black;
} //标签选择器(head下的第一个p标签) .head p:nth-child(1) { width: 265px; height: 185px; background-color: #fff; //绝对定位 position: absolute; border-radius: 100px; top: 80px; left: 24px; border: 2px solid black; } //2-3p标签 .head p:nth-child(-n+3):nth-child(n+2) { width:75px ; height: 85px; background-color: #fff; position: absolute; border-radius: 35px; border: 2px solid black; top: 42px; } .head p:nth-child(2) { left: 79px; } .head p:nth-child(3) { right: 79px; } .head p:nth-child(-n+5):nth-child(n+4) { width:15px ; height: 15px; background-color: black; position: absolute; border-radius: 35px; top: 100px; } .head p:nth-child(4) { left: 130px; } .head p:nth-child(5) { right: 130px; } .head p:nth-child(6) { width: 34px; height: 34px; background-color: #ca3e01; position: absolute; border-radius: 50%; left: 140px; top: 115px; border: 2px solid black; } .head p:nth-child(7) { width: 4px; height: 80px; background-color: #333333; position: absolute; left: 157px; top: 151px; } .head p:nth-child(8) { width: 180px; height: 70px; border-bottom: 3px solid #323232; border-radius: 50%; position: absolute; left: 70px; top: 160px; } .head p:nth-child(-n+11):nth-child(n+9) { width:60px ; height: 2px; background-color: #333333; position: absolute; left:50px; } .head p:nth-child(9) { top: 145px; //旋转角度(绕中心点旋转15deg) transform: rotate(15deg); } .head p:nth-child(10) { top: 160px; } .head p:nth-child(11) { top: 175px; transform: rotate(-15deg); } .head p:nth-child(-n+14):nth-child(n+12) { width:60px ; height: 2px; background-color: #333333; position: absolute; right: 50px; } .head p:nth-child(12) { top: 145px; transform: rotate(-15deg); } .head p:nth-child(13) { top: 160px; } .head p:nth-child(14) { top: 175px; //旋转 transform: rotate(15deg); } .st { width: 220px; height: 200px; background-color: #0dacd4; position: relative; top: -13px; left: 87px; border: 2px solid #2c2c2c;
} .st p:nth-child(1) { width: 170px; height: 170px; background-color: #fff; position: absolute; top: 0px; left: 23px; border: 2px solid #2c2c2c; //圆 border-radius: 50%; } .st p:nth-child(2) { width: 135px; height: 70px; background-color: #fff; position: absolute; top: 80px; left: 41px; border: 2px solid #2c2c2c; //border-radius: 左上 右上 右下 左下 border-radius: 0px 0px 100px 100px; } .st p:nth-child(3) { width: 234px; height: 23px; background-color: #8d1600; position: absolute; top: -8px; left: -7px; border: 2px solid #2c2c2c; border-radius: 70px 70px 70px 70px; } .st p:nth-child(-n+5):nth-child(n+4) { width: 67px; height: 40px; background-color: #0dacd4; position: absolute; border: 2px solid #2c2c2c; top: 34px; z-index: -1; } .st p:nth-child(4) { left: -48px; //有边框颜色为透明 border-right-color: transparent; transform: rotate(-45deg); } .st p:nth-child(5) { right:-48px; border-left-color: #0dacd4; transform: rotate(45deg); } .st p:nth-child(-n+7):nth-child(n+6) { width: 63px; height: 63px; background-color: #fff; position: absolute; border: 2px solid #2c2c2c; top: 56px; border-radius: 50%; } .st p:nth-child(6) { left: -86px; } .st p:nth-child(7) { right:-86px; } .st p:nth-child(8) { width: 42px; height: 42px; background-color: #f5ed26; position: absolute; border: 2px solid #2c2c2c; top: 0px; left: 89px; border-radius: 50%; } .st p:nth-child(9) { width: 36px; height: 2px; background-color: #2c2c2c; position: absolute; top: 10px; left: 94px; } .st p:nth-child(10) { width: 40px; height: 2px; background-color: #2c2c2c; position: absolute; top: 14px; left: 92px; } .st p:nth-child(11) { width: 12px; height: 12px; background-color: #000000; position: absolute; top: 19px; left: 105px; border-radius: 50%; } .st p:nth-child(12) { width: 3px; height: 13px; background-color: #000000; position: absolute; top: 31px; left: 110px; } .st p:nth-child(-n+14):nth-child(n+13) { width: 130px; height: 32px; background-color: #ffffff; position: absolute; border: 2px solid #2c2c2c; top: 196px; } .st p:nth-child(13) { border-radius: 24px 20px 20px 12px; left: -26px; } .st p:nth-child(14) { border-radius: 20px 24px 10px 20px; right: -26px; } .st p:nth-child(15) { width: 15px; height: 10px; background-color: #fff; border: 2px solid #010101; border-bottom-color: #fff; position:absolute; border-radius: 10px 10px 0px 0px; top: 188px; left: 100px; } .st p:nth-child(-n+17):nth-child(n+16) { background-color: #0dacd4; width: 3px; height: 45px; position: absolute; top: 18px; } .st p:nth-child(16) { left: -2px; } .st p:nth-child(17) { right: -2px; } 虽然看起来挺多的，当时很多都是重复的，代码清晰度还需要继续加强，注释是我自己加上去的，解释错了还望原谅，谢谢观看！
来组成身体各个部分的制作：
} //标签选择器(head下的第一个p标签) .head p:nth-child(1) { width: 265px; height: 185px; background-color: #fff; //绝对定位 position: absolute; border-radius: 100px; top: 80px; left: 24px; border: 2px solid black; } //2-3p标签 .head p:nth-child(-n+3):nth-child(n+2) { width:75px ; height: 85px; background-color: #fff; position: absolute; border-radius: 35px; border: 2px solid black; top: 42px; } .head p:nth-child(2) { left: 79px; } .head p:nth-child(3) { right: 79px; } .head p:nth-child(-n+5):nth-child(n+4) { width:15px ; height: 15px; background-color: black; position: absolute; border-radius: 35px; top: 100px; } .head p:nth-child(4) { left: 130px; } .head p:nth-child(5) { right: 130px; } .head p:nth-child(6) { width: 34px; height: 34px; background-color: #ca3e01; position: absolute; border-radius: 50%; left: 140px; top: 115px; border: 2px solid black; } .head p:nth-child(7) { width: 4px; height: 80px; background-color: #333333; position: absolute; left: 157px; top: 151px; } .head p:nth-child(8) { width: 180px; height: 70px; border-bottom: 3px solid #323232; border-radius: 50%; position: absolute; left: 70px; top: 160px; } .head p:nth-child(-n+11):nth-child(n+9) { width:60px ; height: 2px; background-color: #333333; position: absolute; left:50px; } .head p:nth-child(9) { top: 145px; //旋转角度(绕中心点旋转15deg) transform: rotate(15deg); } .head p:nth-child(10) { top: 160px; } .head p:nth-child(11) { top: 175px; transform: rotate(-15deg); } .head p:nth-child(-n+14):nth-child(n+12) { width:60px ; height: 2px; background-color: #333333; position: absolute; right: 50px; } .head p:nth-child(12) { top: 145px; transform: rotate(-15deg); } .head p:nth-child(13) { top: 160px; } .head p:nth-child(14) { top: 175px; //旋转 transform: rotate(15deg); } .st { width: 220px; height: 200px; background-color: #0dacd4; position: relative; top: -13px; left: 87px; border: 2px solid #2c2c2c;
} .st p:nth-child(1) { width: 170px; height: 170px; background-color: #fff; position: absolute; top: 0px; left: 23px; border: 2px solid #2c2c2c; //圆 border-radius: 50%; } .st p:nth-child(2) { width: 135px; height: 70px; background-color: #fff; position: absolute; top: 80px; left: 41px; border: 2px solid #2c2c2c; //border-radius: 左上 右上 右下 左下 border-radius: 0px 0px 100px 100px; } .st p:nth-child(3) { width: 234px; height: 23px; background-color: #8d1600; position: absolute; top: -8px; left: -7px; border: 2px solid #2c2c2c; border-radius: 70px 70px 70px 70px; } .st p:nth-child(-n+5):nth-child(n+4) { width: 67px; height: 40px; background-color: #0dacd4; position: absolute; border: 2px solid #2c2c2c; top: 34px; z-index: -1; } .st p:nth-child(4) { left: -48px; //有边框颜色为透明 border-right-color: transparent; transform: rotate(-45deg); } .st p:nth-child(5) { right:-48px; border-left-color: #0dacd4; transform: rotate(45deg); } .st p:nth-child(-n+7):nth-child(n+6) { width: 63px; height: 63px; background-color: #fff; position: absolute; border: 2px solid #2c2c2c; top: 56px; border-radius: 50%; } .st p:nth-child(6) { left: -86px; } .st p:nth-child(7) { right:-86px; } .st p:nth-child(8) { width: 42px; height: 42px; background-color: #f5ed26; position: absolute; border: 2px solid #2c2c2c; top: 0px; left: 89px; border-radius: 50%; } .st p:nth-child(9) { width: 36px; height: 2px; background-color: #2c2c2c; position: absolute; top: 10px; left: 94px; } .st p:nth-child(10) { width: 40px; height: 2px; background-color: #2c2c2c; position: absolute; top: 14px; left: 92px; } .st p:nth-child(11) { width: 12px; height: 12px; background-color: #000000; position: absolute; top: 19px; left: 105px; border-radius: 50%; } .st p:nth-child(12) { width: 3px; height: 13px; background-color: #000000; position: absolute; top: 31px; left: 110px; } .st p:nth-child(-n+14):nth-child(n+13) { width: 130px; height: 32px; background-color: #ffffff; position: absolute; border: 2px solid #2c2c2c; top: 196px; } .st p:nth-child(13) { border-radius: 24px 20px 20px 12px; left: -26px; } .st p:nth-child(14) { border-radius: 20px 24px 10px 20px; right: -26px; } .st p:nth-child(15) { width: 15px; height: 10px; background-color: #fff; border: 2px solid #010101; border-bottom-color: #fff; position:absolute; border-radius: 10px 10px 0px 0px; top: 188px; left: 100px; } .st p:nth-child(-n+17):nth-child(n+16) { background-color: #0dacd4; width: 3px; height: 45px; position: absolute; top: 18px; } .st p:nth-child(16) { left: -2px; } .st p:nth-child(17) { right: -2px; } 虽然看起来挺多的，当时很多都是重复的，代码清晰度还需要继续加强，注释是我自己加上去的，解释错了还望原谅，谢谢观看！