色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

定位文本有困難

CSS
錢艷冰2年前7瀏覽0評論

我應該如何移動圖像中標記的信息文本 我主要嘗試使用絕對位置來定位文本和背景，但不知何故，它攜帶了額外的空間，導致其他文本在不同的區域流動。

這是我的HTML代碼

<!DOCTYPE html>
<html>
<head>
<title>Doodle | Portfolio</title>
<link rel="icon" type="image/x-icon" href="doodlewebimgs/letterd.GIF">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="subbackground">

        <img src="doodlewebimgs/about.png" class="icon1">
        <img src="doodlewebimgs/partners.png" class="icon1"> 
        <img src="doodlewebimgs/skills.png" class="icon1" id="c"> 
        <img src="doodlewebimgs/contact_us.png" class="icon1">  
   
    <span class="newsubbackground">
    </span> 

    <span class="newground">
    </span> 


    <span class="newserver">
        <div class="servername" > Doodle's Hub</div>
        <img src="doodlewebimgs/serverpfp.jpg" class="guildpic">
    </span>

    <div class="sortchannel">一一一一一一一一一一一一一一一一</div>
        <div class="button">

            <span class="emoji" >#</span>
            <span class="infochannel">information</span>

        </div>
    <span class="textbox"></span>
    <span class="userlog"></span>
</div>

<div >
    <img src="doodlewebimgs/cutewebpic.jpg" class="profilepic" style="width: 250px">
</div>
</body>
</html>

這是我的CSS代碼

.subbackground{
    background-color: #8D9797;
    height: 700px;
    width: 160px;
    border-radius: 10px;
    margin-top: 25px;
    margin-left: 15px;
  }
  .newsubbackground{
    background-color: #8D9797;
    height: 700px;
    width: 1000px;
    border-radius: 10px;
    position: absolute;
  top:25px;
  left: 195px;
  }
  .newground{
    background-color: #8D9797;
    height: 700px;
    margin-left: 1070px;
    width: 310px;
    border-radius: 10px;
    position: absolute;
    top:25px;
  }
  body {
  background-color:#4E545C;
  color: #E5E8E8;
  }
  .profilepic{
  position: absolute;
  top:243px;
  left: 50px;
  border-radius: 50%;
  }
  .icon1{
    border-radius: 50%;
    width: 100px;
   margin-left: 15px;
     margin-top: 10px;
  }
  #c{
    margin-top: 240px;
  }
  .newserver{
    background-color: #1F232C;
    height: 680px;
    width: 273px;
    border-radius: 10px;
    position: absolute;
  top:35px;
  left: 205px;
  }
  .textbox{
    background-color: #1F232C;
    height: 680px;
    width: 700px;
    border-radius: 10px;
    position: absolute;
  top:35px;
  left: 485px;
  }
  .userlog{
    background-color: #1F232C;
    height: 680px;
    width: 290px;
    border-radius: 10px;
    position: absolute;
  top:35px;
  left: 1217px;
  }
  .guildpic{
    width: 273px;
    height: 200px;
    border-radius: 10%;
  }
  .servername{
    position: absolute;
    top: 3%;
    left: 30%;
    transform: translate(-50%, -50%);
    font-size: x-large;
  }
  .sortchannel{
    position: absolute;
    top: 33%;
    left: 14%;
    font-size: medium;
  }
  .infochannel{
    position: absolute;
    top: 37%;
    left: 18%;
    font-size: x-large;
  }
  .emoji{
    position: absolute;
    top: 36.6%;
    left: 16.5%;
    font-size:30px;
  }
  .channelemote{
    position: absolute;
    top: 37%;
    left: 18%;
    width: 1px;
    height: 1px;
  }

.button {
  position: absolute;
  background-color: #4CAF50;
  border: none;
  color: white;
  text-decoration: none;
  cursor: pointer;
}


.button:hover{
background-color: red;  
}

我試著改變尺寸，但是沒有用。