한 페이지 웹 사이트를 만드는 방법은 무엇입니까?

-1

저는 웹 페이지 디자인에 상당히 익숙하며 웹 사이트 레이아웃에 대해 배우기 위해 YouTube를 탐색 중이었고 012logger가 자신이 가장 좋아하는 5 가지 웹 사이트 디자인을 설명하는 this video을 발견했습니다.한 페이지 웹 사이트를 만드는 방법은 무엇입니까?

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

자신의 코드 중 일부를 게시하고 멈추는 위치를 보여줘야합니다. 그렇지 않으면이 질문은 "지나치게 광범위 함"으로 인해 닫힐 수 있습니다. 좀 더 구체적이어야합니다. –

좋아, 할거야 :) 몇 분 정도 줘. –

당신이 바라 보는 한가지는 시차 웹 사이트 다. Google에주세요 :) – Seer

SplitSecnd는 더 쉽게 구현 될 수 있습니다. 그들은 투명한 * .png 이미지를 쌓아 올리고 있습니다. 예를 들어, 첫 번째 것은 다음과 같습니다. https://www.splitsecnd.com/assets/images/core/road_crop_v3-min.png

거기에서 스택 할 수 있습니다. position: absolute;, z-index: ... 및 top: ...px;의 div를 사용하십시오.

z- 색인이 높을수록 '스택'(z- 축과 같이 화면에 더 가깝습니다)에 더 높습니다. position top은 div의 위치를 서로 마주 보게합니다 (y-asis). 이미지 높이에 가까운 값을 사용하고 미세 조정해야합니다.

출처

2013-03-15 16:46:48 Neograph734

한 페이지 웹 사이트를 만드는 방법은 무엇입니까?

답변

관련 문제