如何創建一個一頁的網站？

-1

我對網頁設計相當陌生，並瞭解網站佈局當我瀏覽YouTube時，我遇到了this video，vlogger解釋了他最喜歡的5種網站設計。如何創建一個一頁的網站？

在時間1:44他開始談論單頁設計和談論SplitSecnd。我喜歡他們背景的設計方式。

我知道如何給div元素一個不同的背景圖像或顏色，但我想知道如何創建一個類似的或複製他們的背景？他們的背景有圖像和三角形切出來，然後一個新的部分開始:)

任何幫助，將不勝感激。我很感激一些示例代碼:)

<!DOCTYPE html> 
<html> 
<title> Lot of Divs </title> 
<style> 

    body{ 
     margin: 0; 
     padding: 0; 
    } 
    .content{ 
     width: 1280px; 
     height: 800px; 
     font-family: "Courier New",monospaced; 
     font-size: 18px; 
     color: white; 
    } 
    #div1{ 
     background-image: url("../img/mentalist-1.jpg"); 
     background-repeat: no-repeat; 
     margin: 0; 
     padding: 0; 
    } 
    #div2{ 
     background-image: url("../img/prisonbreak-1.jpg"); 
     background-repeat: no-repeat; 
     margin: 0; 
     padding: 0; 
    } 
    p{ 
     text-align: justify; 
    } 
</style> 
<body> 
    <div class = "content" id="div1"> 
     <p> 
      An infamous 'psychic' abandons his public persona, outing himself as a fake, to focus on his work as a consultant 
      for the California Bureau of Investigation in order to find "Red John," the madman who killed his wife and daughter. 
     </p> 
    </div> 
    <div class = "content" id="div2"> 
     <p> 
      Structural Engineer Michael Scofield turns himself in to the Fox River Penitentiary in order to break out his brother Lincoln Burrows, 
      who is on death row for the murder of the Vice President's brother. 
      But Lincoln was set up by some of the Company (an agency formed by corrupt government officials) guys, 
      headed by General Jonathan Krantz. Michael breaks out from Fox River with his brother Lincoln and other convicts 
     </p> 
    </div> 
</body> 
</html>

我所試圖實現的是一個解釋：類似於SplitSecnd的

背景風格

獲取在後臺兩個omages粘在一起（在底部沒有空白）

來源

2013-03-15 Little Child

你應該發佈一些你自己的代碼，並證明你卡住的地方，否則這個問題很可能會因爲「過於寬泛」而關閉。你需要更具體。 – 2013-03-15 16:00:02

好吧，我會做的:)給我幾分鐘:) – 2013-03-15 16:00:44

有一件事你可能有興趣看看是視差網站。給它一個谷歌:) – Seer 2013-03-15 16:03:36

SplitSecnd構建起來更容易，然後你可能會想。它們堆疊透明* .png圖像。例如，第一個是這裏：https://www.splitsecnd.com/assets/images/core/road_crop_v3-min.png

從那裏你可以堆疊它們。使用與position: absolute;,z-index: ...和top: ...px;的div。

z-index越高，它會在「堆棧」（靠近屏幕，比如z軸）上越高。位置頂部允許您將div的位置放在eachother（y-asis）之下。您將不得不使用接近圖像高度的值，然後對其進行微調。

來源

2013-03-15 16:46:48 Neograph734

如何創建一個一頁的網站？

回答

相關問題