哆啦A梦纯HTML代码

Web基础篇

HTML-05哆啦A梦

此页面主要知识点：
一、阴影： box-shadow:水平距离(必须) 垂直距离(必须) 模糊距离(可选) 阴影尺寸(可选) 阴影颜色(可选) inset(outset默认值)可选，内阴影或外阴影；
设置多个阴影：用逗号隔开；
二、径向渐变： background:radial-gradient()
径向渐变
circle 圆
ellipse 椭圆
closest-side 最近的边
farthest-side 最远的边
closest-corner 最近的角
farthest-corner 最远的角

CSS样式：

.head{
    width:224px;
    height:200px;
    margin:100px auto 0 auto;
    /* background-color:#12a4d3; */
    /* background:linear-gradient(-135deg,#ffffff,#12a4d3 25%); */
    background:radial-gradient(closest-side at 88% 12%,#fff,#12a4d3);
    border:2px solid #365162;
    border-radius:50%;
    position:relative;
    box-shadow:-5px 5px 10px #9ba09c;
}
.face{
    width:185px;
    height:135px;
    border:2px solid black;
    background-color:white;
    border-radius:50%;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:50px;
    z-index:2;
}
.eye{
    width:50px;
    height:58px;
    border:2px solid black;
    background-color:white;
    border-radius:23px;
    position:absolute;
    top:-30px;
    z-index:2;
}
.eyeLeft{
    left:40px;
}
.eyeRight{
    right:40px;
}
.eyeDot{
    width:10px;
    height:10px;
    background-color:black;
    border-radius:50%;
    position:absolute;
    top:28px;
}
.eyeDotLeft{
    right:6px;
}
.eyeDotRight{
    left:6px;
}
.nose{
    width:20px;
    height:20px;
    border:1px solid black;
    background-color:#c13905;
    border-radius:8px;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:22px;
    z-index:1;
}
.noseShadow{
    width:0;
    height:0;
    box-shadow:0 0 3px 3px white;
    position:absolute;
    right:5px;
    top:8px;
}
.nostrils{
    width:2px;
    height:68px;
    background-color:black;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:44px;
    z-index:1;
}
.mouth{
    width:130px;
    height:100px;
    border-bottom:2px solid black;
    border-radius:50%;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:12px;
}
.mouthSquare{
    width:130px;
    height:50px;
    background-color:white;
    position: absolute;
    margin:auto;
    left:0;
    right:0;
    top:40px;
}
.beard{
    width:160px;
    height:2px;
    background-color:black;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:66px;
}
.beard02{
    transform:rotate(15deg);
}
.beard03{
    transform:rotate(-15deg);
}
.beardSquare{
    width:76px;
    height:25px;
    background-color:#ffffff;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:54px;
}
/* 身体 */
.body{
   width:154px;
   height:120px;
   background-color:#02a8d8;
   margin:0 auto; 
   position:relative;
   top:-15px;
}
.belly{
    width:118px;
    height:118px;
    border:2px solid black;
    border-radius:50%;
    background-color:white;
    position:absolute;
    top:-20px;
    left:17px;
}
.pocket{
    width:90px;
    height:45px;
    border:2px solid black;
    border-radius:0 0 45px 45px;
    position:absolute;
    bottom:12px;
    left:12px;
}
.tie{
    width:160px;
    height:14px;
    border:1px solid black;
    background-color:#a51f02;
    border-radius:5px;
    position:absolute;
    top:-10px;
    left:-4px;
    z-index:3;
}
.bell{
    width:30px;
    height:30px;
    background-color:#d1c710;
    border:1px solid black;
    border-radius:50%;
    position: absolute;
    margin:auto;
    left:0;
    right:0;
    top:3px;
}
.bellLine{
    width:28px;
    height:2px;
    background-color:black;
    position: absolute;
    margin:auto;
    left:0;
    right:0;
    top:6px;
}
.bellLine02{
    width:30px;
    top:10px;
}
.bellDot{
    width:10px;
    height: 10px;
    background-color:black;
    border-radius:50%;
    position: absolute;
    margin:auto;
    left:0;
    right:0;
    bottom:6px;
}
.bellLine03{
    width:2px;
    height:6px;
    top:24px;
}
.bellSquare{
    width:0;
    height:0;
    box-shadow:0 0 5px 5px white;
    position: absolute;
    right:8px;
    top:8px;
}
.arm{
    width:30px;
    height:70px;
    background-color:#02a8d8;
    border:1px solid black;
    position: absolute;
    top:0;
    z-index:-1;
}
.armLeft{
    left:0;
    transform-origin:left top;
    transform:rotate(45deg);
}
.armRight{
    right:0;
    transform-origin:right top;
    transform:rotate(-45deg);
}
.hand{
    width:43px;
    height:43px;
    background-color:white;
    border:1px solid black;
    border-radius:45%;
    position:absolute;
    left:-7px;
    bottom:-23px;
    transform:rotate(45deg);
}
.foot{
    width:87px;
    height:22px;
    background-color:white;
    border:2px solid black;
    border-radius:22px 15px 15px 10px;
    position:absolute;
    bottom:-18px;
}
.footLeft{
    left:-18px;
}
.footRight{
    right:-18px;
}
.circle{
    width:14px;
    height:7px;
    border:2px solid black;
    border-bottom:none;
    border-radius:14px 14px 0 0;
    background-color:white;
    position: absolute;
    margin:auto;
    left:0;
    right:0;
    bottom:0;
}
.bodyLeft{
	width: 1px;
	height: 90px;
	background-color: black;
	position: absolute;
	top: 24px;
	left: 0px;
	
}
.bodyRight{
	width: 1px;
	height: 90px;
	background-color: black;
	position: absolute;
	top: 24px;
	left: 153px;

}

HTML部分：

<body>
		<div class="head">
			<div class="face">
				<div class="eye eyeLeft">
					<div class="eyeDot eyeDotLeft"></div>
				</div>
				<div class="eye eyeRight">
					<div class="eyeDot eyeDotRight"></div>
				</div>
				<div class="nose">
					<div class="noseShadow"></div>
				</div>
				<div class="nostrils"></div>
				<div class="mouth"></div>
				<div class="mouthSquare"></div>
				<div class="beard"></div>
				<div class="beard beard02"></div>
				<div class="beard beard03"></div>
				<div class="beardSquare"></div>
			</div>
		</div>
		<div class="body">
			<div class="belly">
				<div class="pocket"></div>
			</div>
			<div class="tie">
				<div class="bell">
					<div class="bellLine"></div>
					<div class="bellLine bellLine02"></div>
					<div class="bellLine bellLine03"></div>
					<div class="bellDot"></div>
					<div class="bellSquare"></div>
				</div>
			</div>
			<div class="arm armLeft">
				<div class="hand"></div>
			</div>
			<div class="arm armRight">
				<div class="hand"></div>
			</div>
			<div class="circle"></div>
			<div class="foot footLeft"></div>
			<div class="foot footRight"></div>
			<div class="bodyLeft"></div>
			<div class="bodyRight"></div>
		</div>
		
	</body>