老师，鼻孔怎么在上面了，没有在鼻子上，是哪里写的不对吗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon Dog</title>
</head>
<body>
<div class="dog center">
<div class="forehead center"></div>
<div class="face center"></div>
<div class="chin center"></div>
<div class="ear">
</div>
<div class="ear right"></div>
<div class="birthmark"></div>
<div class="eye">
<div class="pupil">
</div>
</div>
<div class="eye right">
<div class="pupil">
</div>
</div>
<div class="nose center"></div>
<div class="nostril"></div>
<div class="nostril right"></div>
</div>
<style>
:root{
--hl: #1b2f90;
--bg: #f9f9f6;
}
body {background:#ffc400}
.dog{width:300px;
height:400px;
position:relative;
}
.center{position:absolute;
left:50%;
transform:translate(-50%,0);}
.forehead{
width:102px;
height:48px;
background:var(--bg);
border-radius:40px 40px 8px 8px;
}
.face{width:110px;
height:68px;
background:var(--bg);
border-radius:50%;
top:20px;
z-index:1;}
.chin{width:104px;
height:36px;
background:var(--bg);
border-radius:52px/0 0 36px 36px;
top:60px;
z-index:1;}
.ear {background: var(--hl);
width: 16px;
height: 70px;
border-radius:50%;
position: absolute;
z-index:0;
left:50%;
top: 34px;
transform-origin: 50% 0%;
transform:translate(-42px,0) rotate(10deg);
}
.ear.right {transform: scale(-1,1)
translate(-26px,0) rotate(10deg);
}
.birthmark {
width: 30px;
height: 36px;
background: var(--hl);
border-radius: 15px / 17px 23px 2px 13px;
position: absolute;
z-index: 1;
left: 50%;
top: 10px;
transform: translate(15px,0) rotate(-10deg);
}
.eye{background:var(--bg);
width: 24px;
height: 24px;
border-radius:12px/13px 12px 12px 2px;
position: absolute;
z-index:2;
left:50%;
top: 20px;
transform-origin: 50% 0%;transform:translate(-44px,0) rotate(10deg);
box-shadow:1px 0px 0px 0px #000 inset,-1px 0px 5px 1px #ddd;
overflow:hidden;}
.eye.right{transform:scale(-1,1) translate(-21px,0) rotate(10deg);
box-shadow:1px 0px 0px 0px #000 inset;}
.pupil{width:26px;
height:26px;
background:#e79101;
border-radius:50%;
position:absolute;
left:3px;
top:1px;
box-shadow:0 0 8px 0 #000 inset;
}
.pupil::before{
width:18px;
height:18px;
background:#000;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
content:'';
}
.pupil::after{
width:5px;
height:5px;
background:#fff;
border-radius:50%;
position:absolute;
left:3px;
top:7px;
content:'';
}
.nose{
width: 62px;
height: 32px;
top: 42px;
z-index: 1;
background: #363035;
border-radius:31px / 10px 10px 22px 22px;
}
.nostril{
width: 15px;
height: 4px;
top: 19px;
background:linear-gradient(0deg,#363035 0%,#000 100%);
position: absolute;
left: 50%;
border-radius:50%;
transform: translate(-21px,0) rotate(30deg);
}
.nostril.right{transform: scale(-1,1) translate(-7px,0) rotate(30deg);}
</style>
</body>
</html>
正在回答
同学你好！
是因为多了一个闭合的div标签。这样就鼻孔就不是参照鼻子去定位了
如果帮助到了你 欢迎采纳 祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星