Question

我是新来的，一般来说我最近开始学习webdev，而我正在尝试制作一些＆＃34;投资组合＆＃34;网站培训练习技巧。我有一个问题是我无法解决的问题，而且我只是在屏幕上看了几个小时，这让我很困惑

第一个问题是页面右侧的空白。 2.下一个问题是相对定位后剩下的很多空白。怎么能用这些摆脱这些东西？

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>


<!--header-->
<header>

</header>



<div class = "container">

<div class="text">
<h1 id = "h1">“The life of a designer...” </h1>
<h2 id = "h2">Is a life of fight. Fight against the ugliness. 
Just like a doctor fights against disease. For us,
the visual disease is what we have around, and what we 
try to do is cure it somehow with design.</h2>
<h3>– Massimo Vignelli. </h3></div></div> 

<div class="txt">
<p id ="one">Hi, i am webdeveloper<id></id></p>
<p id ="two">If you want work with me</p> 
<p id ="three">leave a message.</p>
</div>


<div class = "icons">
<img src = "icons/cheap.png" alt = "cheap" id="cheap"/>
<img src = "icons/Trust.png" alt = "trust" id="trust"/>
<img src = "icons/timeliness.png" alt = "timeliness" id="timeliness"/>
<img src ="icons/developing.png" alt ="developing" id="developing"/>
</div>

<div class = "Social">
<a href=""><img src ="icons/facebook.png" alt ="fb" /></a> 
<a href=""><img src ="icons/instagram.png" alt ="insta" /></a>  
<a href=""><img src ="icons/linkedin.png" alt = "linkedin"/></a>   

</div>






<!--Overview-->  
<section>
<article>
Aaaa
</article>

</section>


<!-- Social media icons-->     
<aside>
</aside>  

<footer>
</footer>   
</body>
</html>

CSS：

    @font-face {
    font-family: myFirstFont;
    src: url(/fonts/Graviola_Regular.otf);
    }

    @font-face {
    font-family: czcionka;
    src: url(/fonts/czcionka.ttf);
    }

    body {
    margin:0px;
    padding:0px;
    }
    header{
    background-image:url(bg1.jpg);
    background-repeat:no-repeat;
    height:800px;
    opacity: 0.8; 
    background-size:100% 100%;





   }
   .txt {
   position:relative;
   right:-50px;
   top:-1120px;
   border-left:3px solid white;
   font-family:czcionka;



  }

  .txt #one {
  position:relative;
  color:white;
  font-size: 50px;
  position:relative;
  bottom:-60px

  }
  .txt #two {
  position:relative;
  color: white;
  font-size: 50px;


  }
  .txt #three {
  position:relative;
  color: white;
  font-size: 50px;
  top:-60px

  }

  .container .text {
  color:white;

  text-align: center;
  position:relative;
  top: -450px;
  margin: 50px;
  font-family: myFirstFont;



  }

  .container .text #h1 {
  font-size:60px;
  border-bottom: 3px solid;
  font-family:myFirstFont;
  }
  .container .text #h2 {
  font-size: 25px;
  font-style:italic;
  }
  .container .text #another {
  position: relative;
  top:-500px;
  font-family:myFirstFont;
  font-size:40px;

  }


 .Social {
 position: relative;
 top:-1460px;
 right:-50px;
 margin:500px;
 }
 .icons #cheap {
 position: relative;
 top:-1139px;
 right:-1225px

 }


.icons #timeliness {
position:relative;
top:-1140px;
right: -1110px


}

.icons #developing {
position:relative;
top:-1140px;
right:-750px;


}

Here's link to img how this looks. When i scroll down page rest of my site elements are very far down.

Like this looks the white space what i talking about

页面右侧的空白区域仍然是定位[css，html]

0 个答案: