2016-09-25 156 views
-1

好吧所以我的問題是我設置了一個壁紙,但它被切斷我不知道它有什麼問題如果有人可以看看我的代碼,並告訴我什麼是錯誤的,我已經嘗試從main.html中刪除壁紙,但沒有鎖到目前爲止設置壁紙的問題

 <!DOCTYPE html> 
     <html> 
     <head> 
    <meta charset="utf-8"> 
    <title> Jihad Miski | Designer </title> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"> 
    <link rel="stylesheet" href="css/main.css"> 
    </head> 
    <body> 
    <header> 
     <a href="main.html" id="logo"> 
     <h1>Jihad Miski</h1> 
     <h2>Designer</h2> 
     </a> 
     <nav> 
     <ul> 
      <li><a href="main.html"></a></li> 
      <li><a href="about.html" id="about">About</a></li> 
      <li><a href="contact.html" id="contact">Contact</a></li> 
     </ul> 
     </nav> 
     </header> 
     <div id="wrapper"> 
     <section> 
     <ul id="gallery"> 
      <li> 
      <img src="img/wallpaper.jpg" alt=""> 
      </li> 
     </ul> 
     </section> 
     <footer> 
     <a href="http://instagram.com/ayrabfac"><img src="img/insta.jpeg" alt=""></a> 
     <p>&copy; 2016 Jihad Miski </p> 
      </footer> 
     </div> 
     </body> 
    </html> 











/******************************************* 
******************************************* 
*********** general ******************* 
******************************************* 
*******************************************/ 

body { 
    font-family: 'Poiret One', sans-serif; 

} 



    #wrapper { 
max-width: 930px; 
margin: 0 auto; 
padding: 0% 5%; 
background-color: transparent; 


} 


a { 
    text-decoration: none; 
} 


img { 
    max-width: 100%; 

} 



body { 
background-image: url('../img/wallpaper.jpg'); 
background-size: cover; 
background-position: center center; 
background-repeat: no-repeat; 
} 




/******************************************* 
******************************************* 
*********** positioning  **************** 
******************************************* 
*******************************************/ 

#logo { 
    position: fixed; /* or absolute */ 
    top: 40%; 
    left: 40%; 
    margin: 0; 
    } 


    nav { 
    text-align: center;  /* or absolute */ 
    top: 40% ; 
    left: 40% ; 
    } 




/******************************************* 
******************************************* 
*********** font  ******************* 
******************************************* 
*******************************************/ 


h1{ 
    font-family: 'Poiret One', sans-serif; 
    margin: 15px 0; 
    font-size: 3em; 
    font-weight: normal;; 
    line-height: 0.8em; 
} 

h2{ 
    font-family: 'Poiret One', sans-serif; 
    margin: 30px 0; 
    font-size: 1.24em; 
    font-weight: normal; 
    line-height: 0.8em; 
} 


/******************************************* 
******************************************* 
*********** color  ***************** 
******************************************* 
*******************************************/ 

    a { 
    color: #6ab47b; 
    } 

h1 , h2 { 
    color: #fff; 
} 

#about { 
    color: #808080; 
} 

#contact { 
    color: #808080; 
} 



/******************************************* 
******************************************* 
*********** footer ******************* 
******************************************* 
*******************************************/ 

footer { 
    font-size: 1em; 
    text-align: center; 
    padding-top: 50px; 
    color: #808080; 
} 
+0

你可以請示範這與實際圖像? –

回答

0

我在本地運行代碼時沒有問題。當你說'切斷'你指的是你的照片(wallpaper.jpg)?

您可以嘗試將左右圖像邊距設置爲自動。

img { 
    max-width:100%; 
    margin-left:auto; 
    margin-right:auto; 
} 
+0

有沒有一種方法可以在這裏顯示屏幕截圖?當我運行該代碼時,你給我的壁紙是一半大小! –

+0

它仍然被切斷?或者它是完整的圖像,應該是它的一半大小? –

+0

它的一切都很好,我把它修好了謝謝 –