畫面和集管之間的間距必須減小這裏

-2

html { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    height: 100vh; 
 
} 
 

 
.content { 
 
    color: black; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    font-family: 'Pacifico', cursive; 
 
    position: relative; 
 
    text-shadow: 1px 1px white; 
 
    background-attachment: fixed; 
 
} 
 

 
.header { 
 
    padding: 100px 0px 50px 0px; 
 
    margin: 0px; 
 
    text-align: center; 
 
    font-size: 10rem; 
 
    font-family: 'Lobster', cursive; 
 
    text-shadow: 4px 4px white; 
 
    letter-spacing: 5px; 
 
    word-spacing: 0px; 
 
    background-attachment: fixed; 
 
    animation: fadeUp 1.5s ease; 
 
} 
 

 
.about-me { 
 
    height: 100vh; 
 
    width: 100%; 
 
    background-image: url(/images/backgrounds/amsterdam.jpg); 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    display: table; 
 
    margin-right: 0; 
 
    padding-left: 0px; 
 
} 
 

 
.selfie { 
 
    margin-top: 100px; 
 
    margin-left: 100px; 
 
    margin-right: 0px; 
 
    padding-right: 0px; 
 
    height: 250px; 
 
    width: 250px; 
 
    float: left; 
 
    animation: image-fadeIn 3s ease; 
 
    border-radius: 50%; 
 
} 
 

 
.what-i-do { 
 
    height: 80vh; 
 
    width: 100%; 
 
    background-image: url(/images/backgrounds/development.jpg); 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.how-i-work { 
 
    height: 80vh; 
 
    width: 100%; 
 
    background-image: url(/images/backgrounds/school.png); 
 
    background-size: auto; 
 
    background-attachment: fixed; 
 
} 
 

 
.projects { 
 
    height: 80vh; 
 
    width: 100%; 
 
    background-image: url(); 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.contact { 
 
    height: 50vh; 
 
    width: 100%; 
 
    background-image: url(/images/backgrounds/social-media-pattern-.jpg); 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 

 

 
.black-box { 
 
    height: 7vh; 
 
    width: 100%; 
 
    background-color: black; 
 
} 
 

 
@keyframes image-fadeIn { 
 
    0% { 
 
     opacity: 0 
 
    } 
 
    50%{ 
 
     opacity: 0.2 
 
    } 
 
    100%{ 
 
     opacity: 1 
 
    } 
 
} 
 

 
@keyframes fadeUp { 
 
    from { 
 
     transform: translateY(20px); 
 
     opacity: 0; 
 
    } 
 
    to { 
 
     transform: translateY(0px); 
 
     opacity: 1; 
 
    } 
 
} 
 

 
@keyframes

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link href="/css/portfolio.css" type="text/css" rel="stylesheet"> 
 
     <link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico" rel="stylesheet"> 
 
     <title>Ruben Nijhuis</title> 
 
    </head> 
 
    
 
<body> 
 
    <div class="container"> 
 
     <div class="about-me"> 
 
      <img src="images/selfies/gustin-1.png" alt="headshot" class="selfie"> 
 
      <h1 class="header">About Me</h1> 
 
      <p class="content"> 
 
       From Amsterdam, addicted to designing and available for your project.<br> 
 
       Been coding since 2017 and didn't stop since.<br> 
 
       People overwhelmed me with requests for projects.<br> 
 
       You're company doesn't have a weßbsite yet.<br> 
 
       What are you doing? Hire me already.<br> 
 
      </p> 
 
     </div> 
 
     
 
     <div class="black-box"></div> 
 
     
 
     <div class="what-i-do"> 
 
      <h1 class="header">I make websites</h1> 
 
      <p class="content"> 
 
       So you problaby came here because you need a website.<br> 
 
       Well done, you're at the right address.<br> 
 
       
 
      </p> 
 
     </div> 
 
     
 
     <div class="black-box"></div> 
 
     
 
     <div class="how-i-work"> 
 
      <h1 class="header">How I work</h1> 
 
      <p class="content"> 
 
       I need 2 things.<br> 
 
       1. The design.<br> 
 
       2. The deadline.<br> 
 
       Were set.<br> 
 
      </p> 
 
     </div> 
 
     
 
     <div class="black-box"></div> 
 
     
 
     <div class="projects"> 
 
      <h1 class="header">Projects</h1> 
 
      <p class="content"> 
 
      
 
      </p> 
 
     </div> 
 
     
 
     <div class="black-box"></div> 
 
     
 
     <div class="contact"> 
 
      <h1 class="header">Contact</h1> 
 
      <p class="content"> 
 
      
 
      </p> 
 
     </div> 
 
     
 
    </div> 
 
    
 
</body> 
 

 
</html>

問題。我無法獲得圖片和標題之間的間距。
需要改變的是頭部位於中間> ，圖片需要在左側。
如果有人可以幫忙。
感謝

（它沒有讓我張貼的問題，以便即時通訊只是要增加更多的文字） djdbfHUH蘭桂坊AFESUHFUEGSAFGEAUFHUEHASUFHUSADFJSDLHFEYIGKSBFJKBJK

來源

2017-09-05 Ruben Nijhuis

先給一些例子創建一個小提琴什麼的 –

你需要證明你的HTML和CSS。您的描述並不能真正幫助我們。 – Stuart

這裏是代碼 –

<div class="aboutMeHeader"> 
     <img src="k360-gallery.png" alt="headshot" class="selfie"> 
     <h1 class="header">About Me</h1> 
    </div>

我包你的IMG和H1到另一個div，並將此爲CSS

.aboutMeHeader{ 
width: 100%; 
min-height: 300px; 
border:1px solid black; 
text-align: center; 
} 
.aboutMeHeader img{ 
    float:left; 
} 
@media only screen and (max-width: 768px) { 
    .selfie{ 
    margin-bottom: 0px; 
    margin-top: 10px; 
    float:left; 
    margin-left: 0px; 
} 

.aboutMeHeader h1{ 
    text-align: center; 
    font-size: 20px; 
}

}

來源

2017-09-05 10:28:08 Bourne96

這將如何幫助？ –

如果你不想頭到g Ø到一個新的行，你可以換PIC和頭到另一格

<div class='headerDiv'> 
      <img src="pic.jpg" alt="headshot" class="selfie"> 
      <h1 class="header">About Me</h1> 
</div>

，然後用顯示器撓性設置

.headerDiv{ 
    display: flex; 
}

來源

2017-09-05 10:33:47 GioGio

畫面和集管之間的間距必須減小這裏

回答

相關問題