我的Web前端课程-position定位（哆啦A梦图制作）
哆啦A梦的制作花费了我两个自习课的时间，自己也完全巩固了position的知识基础；其中的技术引用了position里的“子绝(absolute)父相(relation)”，以及position固定定位（fixed）；代码量偏多，绝大部分是position的使用；下面观看以下代码：
框架是使用了两个<div>做身体的载体以及一个大<div>包围框，其余是使用<p>来组成身体各个部分的制作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/duola.css">
</head>
<body>
<div class="box">
<div class="head">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="st">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
样式通过引用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;
}
虽然看起来挺多的，当时很多都是重复的，代码清晰度还需要继续加强，注释是我自己加上去的，解释错了还望原谅，谢谢观看！
