如何创建一个一页的网站？

-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

如何创建一个一页的网站？

回答

相关问题