我已經完成了頭部，但眼睛不會出現在我面前。我應該使用 grid 還是 flex ？
#e1 #e2 是眼睛，我把它們和頭圈放在一個容器 cnt-head 中。
這是 HTML：
<body>
<div id="container">
<div id="hat" class="sman"></div>
<div id="hat-white" class="sman"></div>
<div id="hat" class="sman"></div>
<div id="hat-long" class="sman"></div>
<div id="cnt-head" class="sman">
<div id="head" class="sman"></div>
<div id="e1"></div>
<div id="e2"></div>
</div>
</div>
</body>
這是 CSS ：
body{
height: 100%;
width: 100%;
}
#container{
width: 400px;
height: 300px;
background: #dd6b4d;
}
.sman{
margin: auto;
}
#hat{
background: #0E1F2B;
width: 30px;
height: 12px;
}
#hat-white{
background: #FFFFFF;
width: 30px;
height: 8px;
}
#hat-long{
background: #0E1F2B;
width: 45px;
height: 4px;
}
#cnt-head{
height: 30px;
width: 45px;
overflow: hidden; /* This hide the div under another */
}
#head{
background: #FFFFFF;
position: relative;
width: 45px;
height: 45px;
border-radius: 50px;
top: -5px;
}
#e1{
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
}
#e2{
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
}
每個答案都會很好 thx，是否有可能在 1 div 中繪制整個雪人？或者每個身體部位至少有 3 個 div？
當前目標
uj5u.com熱心網友回復：
希望它對你有用！！！
body{height: 100%;width: 100%;}
#container{width: 400px;height: 300px;background: #dd6b4d;}
.sman{
margin: auto;
}
#hat{
background: #0E1F2B;
width: 30px;
height: 12px;
}
#hat-white{
background: #FFFFFF;
width: 30px;
height: 8px;
}
#hat-long{
background: #0E1F2B;
width: 45px;
height: 4px;
}
#cnt-head{
height: 30px;
width: 45px;
overflow: hidden; /* This hide the div under another */
position: relative;
}
#head{
background: #FFFFFF;
position: relative;
width: 45px;
height: 45px;
border-radius: 50px;
top: -5px;
}
#e1{
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
left: 10px;
top: 10px;
}
#e2{
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
right: 10px;
top: 10px;
}<div id="container">
<div id="hat" class="sman"></div>
<div id="hat-white" class="sman"></div>
<div id="hat" class="sman"></div>
<div id="hat-long" class="sman"></div>
<div id="cnt-head" class="sman">
<div id="head" class="sman"></div>
<div id="e1"></div>
<div id="e2"></div>
</div>
</div>uj5u.com熱心網友回復：
如果您右鍵單擊該元素，然后選擇檢查，然后將代碼懸停在您的眼睛 div 上，您可以看到它們在那里，但在您的雪人頭下方。在這種情況下，我建議在你的頭上使用一個偽元素，讓眼睛從該 div 內的左上角位置開始。另外，如果您不想要它，您現在可以洗掉 div。
body{
height: 100%;
width: 100%;
}
#container{
width: 400px;
height: 300px;
background: #dd6b4d;
}
.sman{
margin: auto;
}
#hat{
background: #0E1F2B;
width: 30px;
height: 12px;
}
#hat-white{
background: #FFFFFF;
width: 30px;
height: 8px;
}
#hat-long{
background: #0E1F2B;
width: 45px;
height: 4px;
}
#cnt-head{
height: 30px;
width: 45px;
overflow: hidden; /* This hide the div under another */
}
#head::before, #head::after{
content: "";
height: 8px;
width: 8px;
left:12px;
top:15px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
}
#head::after{
left:26px!important;
}
#head{
background: #FFFFFF;
position: relative;
width: 45px;
height: 45px;
border-radius: 50px;
top: -5px;
} <div id="container">
<div id="hat" class="sman"></div>
<div id="hat-white" class="sman"></div>
<div id="hat" class="sman"></div>
<div id="hat-long" class="sman"></div>
<div id="cnt-head" class="sman">
<div id="head" class="sman"></div>
</div>
</div>旁注：記住使 id 唯一:)
uj5u.com熱心網友回復：
body {
height: 100%;
width: 100%;
}
#container {
width: 400px;
height: 300px;
background: #dd6b4d;
}
.sman {
margin: auto;
}
#hat {
background: #0E1F2B;
width: 30px;
height: 12px;
position: absolute;
left: 185px;
top: 0px;
z-index: 19;
}
#hat-middle {
background: #0E1F2B;
width: 30px;
height: 12px;
position: absolute;
left: 185px;
top: 16px;
z-index: 18;
}
#hat-white {
background: #FFFFFF;
width: 30px;
height: 8px;
position: absolute;
left: 185px;
top: 8px;
z-index: 17;
}
#hat-long {
background: #0E1F2B;
width: 45px;
height: 4px;
position: absolute;
left: 178px;
top: 28px;
z-index: 16;
}
#cnt-head {
height: 30px;
width: 45px;
overflow: hidden;
/* This hide the div under another */
}
#head {
background: #FFFFFF;
width: 45px;
height: 45px;
border-radius: 50px;
position: absolute;
left: 177px;
top: 25px;
z-index: 3;
}
#scarf_Center {
background-color: rgb(255 156 20);
position: absolute;
left: 168px;
top: 59px;
width: 65px;
height: 16px;
z-index: 15;
border-radius: 10px 10px 10px 10px;
border: 4px solid #dd6b4d;
}
#e1_right {
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
left: 205px;
top: 40px;
z-index: 5;
}
#e2_left {
height: 8px;
width: 8px;
border-radius: 50px;
background: #0E1F2B;
position: absolute;
left: 185px;
top: 40px;
z-index: 4;
}
#head_bottom {
background-color: rgb(255, 255, 255);
position: absolute;
left: 164px;
top: 60px;
width: 80px;
height: 80px;
z-index: 1;
border-radius: 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="container">
<div id="hat" class="sman"></div>
<div id="hat-white" class="sman"></div>
<div id="hat-middle" class="sman"></div>
<div id="hat-long" class="sman"></div>
<div id="scarf_Center"></div>
<div id="e1_right"></div>
<div id="e2_left"></div>
<div id="head" class="sman"></div>
<div id="head_bottom" class="sman"></div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/396421.html
上一篇：懸停CSS時背景顏色不會改變