需要一个div+css的网页简单点就好

 我来答
3个回答
#热议# 空调使用不当可能引发哪些疾病？
划船不动浆靠浪
2018-11-29 · 超过48用户采纳过TA的回答
知道小有建树答主
回答量：145
采纳率：76%
帮助的人：25万
我也去答题访问个人页
展开全部
小黄人：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小黄人</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 300px;
margin: 100px auto;
}
.litteH {
position: relative;
}
.bodyH {
position: absolute;
width: 240px;
height: 400px;
border: 5px solid #000;
border-radius: 115px;
background: rgb(249, 217, 70);
overflow: hidden;
z-index: 2;
}
.bodyH .condoleBelt {
position: absolute;
}
.bodyH .condoleBelt .left,
.bodyH .condoleBelt .right {
width: 100px;
height: 16px;
border: 5px solid #000;
background: rgb(32, 116, 160);
position: absolute;
top: -90px;
left: -35px;
z-index: 2;
-webkit-transform: rotate(45deg);
}
.bodyH .condoleBelt .left {
top: -88px;
left: 165px;
-webkit-transform: rotate(-45deg);
}
.bodyH .condoleBelt .left:after,
.bodyH .condoleBelt .right:after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #000;
position: absolute;
top: 4px;
left: 88px;
}
.bodyH .condoleBelt .left:after {
left: 5px;
}
.bodyH .trousers {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
border-top: 6px solid #000;
background: rgb(32, 116, 160);
}
.trousers_top {
width: 160px;
height: 60px;
border: 6px solid #000;
border-bottom: none;
border-radius: 0 0 5px 5px;
background: rgb(32, 116, 160);
position: absolute;
bottom: 100px;
left: 34px;
}
.pocket {
width: 60px;
height: 45px;
border: 6px solid #000;
border-radius: 0px 0px 25px 25px;
position: absolute;
bottom: 65px;
left: 84px;
}
.line_right {
width: 30px;
height: 30px;
border-bottom-left-radius: 100px;
border-bottom: 6px solid #000;
border-left: 6px solid #000;
position: absolute;
left: 0;
bottom: 60px;
-webkit-transform: rotate(-75deg);
}
.line_left {
width: 30px;
height: 30px;
border-bottom-right-radius: 100px;
border-bottom: 6px solid #000;
border-right: 6px solid #000;
position: absolute;
right: 0;
bottom: 63px;
-webkit-transform: rotate(75deg);
}
.line_bottom {
height: 40px;
border: 3px solid #000;
border-radius: 3px;
position: absolute;
left: 118px;
bottom: 0px;
}
.hair {
position: relative;
}
.left_hair_one {
width: 130px;
height: 100px;
border-radius: 50%;
border-top: 8px solid #000;
position: absolute;
left: 17px;
top: -17px;
-webkit-transform: rotate(27deg);
-webkit-animation: lefthair 2s ease-in-out infinite;
}
@-webkit-keyframes lefthair {
0%,
25%,
31%,
100% {}
30% {
-webkit-transform: rotate(31deg) translate3d(-3px, -1px, 0);
}
}
.left_hair_two {
width: 80px;
height: 80px;
border-radius: 50%;
border-top: 6px solid #000;
position: absolute;
left: 45px;
top: -10px;
-webkit-transform: rotate(15deg);
}
.eyes {
position: relative;
z-index: 3;
}
.eyes .leftEye,
.eyes .rightEye {
width: 85px;
height: 85px;
border-radius: 50%;
border: 6px solid #000;
background: #fff;
position: absolute;
top: 60px;
left: 27px;
}
.eyes .leftEye {
left: 124px;
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye {
width: 40px;
height: 40px;
border-radius: 50%;
background: #000;
position: absolute;
top: 24px;
left: 22px;
-webkit-animation: blackeye 5s ease-in infinite;
}
@-webkit-keyframes blackeye {
0%,
20%,
50%,
70%,
100% {
-webkit-transform: translateX(0px);
}
30%,
40% {
-webkit-transform: translateX(15px);
}
80%,
90% {
-webkit-transform: translateX(-15px);
}
}
.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white {
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 7px;
left: 17px;
-webkit-animation: whiteeye 5s ease-in-out infinite;
}
@-webkit-keyframes whiteeye {
0%,
20%,
50%,
70%,
100% {
-webkit-transform: translateX(0px);
}
30%,
40% {
-webkit-transform: translate3d(3px, 4px, 0);
}
80%,
90% {
-webkit-transform: translate3d(-15px, 4px, 0);
}
}
.eyes .leftEye .left_blackEye .left_white {
top: 4px;
left: 17px;
}
.eyes .leftEye:after,
.eyes .rightEye:after {
content: '';
width: 28px;
height: 18px;
background: #000;
position: absolute;
left: -30px;
top: 37px;
-webkit-transform: skewX(20deg) rotate(7deg);
}
.eyes .leftEye:after {
left: 89px;
top: 37px;
-webkit-transform: skewX(-20deg) rotate(-7deg);
}
.mouse {
position: relative;
}
.mouse .mouse_shape {
width: 55px;
height: 35px;
border: 5px solid #000;
border-bottom-left-radius: 30px;
background: #fff;
position: absolute;
top: 175px;
left: 98px;
z-index: 3;
-webkit-transform: rotate(-35deg);
-webkit-animation: mouse 5s ease-in-out infinite;
}
@-webkit-keyframes mouse {
40%,
43% {
width: 45px;
height: 25px;
top: 180px;
}
0%,
35%,
48%,
100% {
width: 55px;
height: 35px;
top: 175px;
-webkit-transform: rotate(-35deg);
}
}
.mouse .mouse_shape:after {
content: '';
width: 70px;
height: 32px;
border-bottom: 5px solid #000;
border-radius: 35px 26px 5px 5px;
background: rgb(249, 217, 70);
position: absolute;
top: -16px;
left: 3px;
-webkit-transform: rotate(34deg);
-webkit-animation: mouse_mask 5s ease-in-out infinite;
}
@-webkit-keyframes mouse_mask {
40%,
43% {
width: 60.5px;
top: -19.3px;
left: 1.5px;
}
0%,
35%,
48%,
100% {
width: 70px;
top: -16px;
left: 3px;
-webkit-transform: rotate(33deg);
}
}
.hands {
position: relative;
}
.hands .leftHand,
.hands .rightHand {
width: 80px;
height: 80px;
border: 6px solid #000;
border-radius: 25px;
background: rgb(249, 217, 70);
position: absolute;
top: 220px;
left: -23px;
-webkit-transform: rotate(40deg);
-webkit-animation: rightHand .8s ease-in-out infinite;
}
@-webkit-keyframes rightHand {
0%,
50%,
100% {
-webkit-transform: rotate(40deg);
}
30% {
-webkit-transform: rotate(37deg) translateX(1px);
}
}
.hands .leftHand {
left: 182px;
top: 220px;
-webkit-transform: rotate(-40deg);
-webkit-animation: leftHand .8s ease-in-out infinite;
}
@-webkit-keyframes leftHand {
0%,
50%,
100% {
-webkit-transform: rotate(-40deg);
}
80% {
-webkit-transform: rotate(-37deg) translateX(-1px);
}
}
.hands .leftHand:after,
.hands .rightHand:after {
content: '';
width: 6px;
border: 3px solid #000;
border-radius: 3px;
position: absolute;
left: 13px;
top: 50px;
-webkit-transform: rotate(90deg);
}
.hands .leftHand:after {
left: 53px;
top: 50px;
-webkit-transform: rotate(-90deg);
}
.feet {
position: relative;
}
.feet .left_foot,
.feet .right_foot {
width: 36px;
height: 50px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 9px;
background: #000;
position: absolute;
top: 406px;
left: 88px;
-webkit-transform-origin: right top;
-webkit-animation: rightfoot .8s ease-in-out infinite;
}
@-webkit-keyframes rightfoot {
0%,
50%,
100% {
-webkit-transform: rotate(0deg);
}
80% {
-webkit-transform: rotate(10deg);
}
}
.feet .left_foot {
border-bottom-right-radius: 9px;
border-bottom-left-radius: 6px;
left: 130px;
-webkit-transform-origin: left top;
-webkit-animation: leftfoot .8s ease-in-out infinite;
}
@-webkit-keyframes leftfoot {
0%,
50%,
100% {
-webkit-transform: rotate(0deg);
}
30% {
-webkit-transform: rotate(-10deg);
}
}
.feet .left_foot:after,
.feet .right_foot:after {
content: '';
width: 60px;
height: 35px;
border-radius: 20px 10px 21px 15px;
background: #000;
position: absolute;
left: -36px;
top: 14.4px;
-webkit-transform: rotate(5deg);
}
.feet .left_foot:after {
border-radius: 10px 20px 15px 21px;
left: 13px;
-webkit-transform: rotate(-5deg);
}
.groundShadow {
width: 200px;
height: 2px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
top: 455px;
left: 25px;
}
</style>
</head>
<body>
<div>
<!-- 容器 -->
<div>
<!-- 小黄人 -->
<div>
<!-- 身体 -->
<div>
<!-- 裤子 -->
<div>
<!-- 吊带 -->
<div></div>
<div></div>
</div>
<div></div>
<!-- 裤子突出的矩形部分 -->
<div></div>
<!-- 裤袋 -->
<!-- 三条线 -->
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<!-- 头发 -->
<span></span>
<span></span>
</div>
<div>
<!-- 眼睛 -->
<div>
<!-- 左眼 -->
<div>
<div></div>
</div>
</div>
<div>
<!-- 右眼 -->
<div>
<div></div>
</div>
</div>
</div>
<div>
<!-- 嘴巴 -->
<div></div>
</div>
<div>
<!-- 双手 -->
<div></div>
<div></div>
</div>
<div>
<!-- 双脚 -->
<div></div>
<div></div>
</div>
<div></div>
<!-- 脚底阴影 -->
</div>
</div>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
帐号已注销
2018-11-29 · TA获得超过434个赞
知道小有建树答主
回答量：272
采纳率：34%
帮助的人：67.5万
我也去答题访问个人页
展开全部
百度上就有一堆
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
匿名用户
2018-11-28
展开全部
什么主题？几页？
追答
关于什么主题的
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 2条折叠回答
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2025Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式