발견 된 플래시 요소를 기반으로 HTML5 페이지를 디자인하려고 시도했습니다.

Question

다른 사이트에서 찾은 디자인을 구현하려고합니다. 플래시로 설계되었지만 HTML5, CSS 및 자바 스크립트 (또는 필요한 경우 PHP)를 사용하여 유사한 내용을 복제하려고합니다.

다음 사이트를 참조하십시오. http://www.raytheon.com/newsroom/technology/

나는 창백 유형 디자인을 복제하려고 시도하고 있지만 막 시작했습니다. 내 첫 질문은, 버튼을 콘텐츠와 나란히 놓는 방법에 대해 어떻게 생각합니까? 나는 순간적으로 슬라이딩 전환에 대해 걱정하지 않는다. 어떻게 그렇게 배치되어야하는지 궁금하다.

Answer 1

내가 이런 식으로 할 거라고 :

이

<div class="pagecontainer"> 
    <div id="page1" class="page" style="background: url(picture20px*400px);"/> 
    <div id="page2" class="activepage" style="background: url(picture20px*400px);"/> 
    <div id="page3" class="page" style="background: url(picture20px*400px);"/> 
</div> 

는 CSS :

.pagecontainer { 
    position:relative; 
    width:440px; 
    height:400px; 
    overflow:hidden; 
} 
.activepage { 
    float:left; 
    width:400px; 
    height:400px; 
    overflow:hidden; 
    padding-left:20px; 

} 
.page { 
    float:left; 
    width:20px; 
    height:400px; 
    overflow:hidden; 
    padding-left:20px; 
} 

업데이트 : 사실, 난 (생각의 업데이트를 읽은 후 다음 은 샘플 코드 다른 답변) 그 이유는 플로트가 더 쉬울 것이기 때문입니다. 여전히 오버플로 : 페이지에서 숨김을 사용합니다. 페이지를 보이게 만들고 너비를 애니메이션하므로 활성 페이지의 너비는 400 픽셀입니다. 모든 페이지의 콘텐츠는 400px이지만 20px 만 표시되어야합니다.

Answer 2

너는 작은 너비와 큰 높이로 div를 만들어서 같은 레이아웃을 만들 수 있다고 생각하고 텍스트가있는 div 안에 이미지를 플래시처럼 놓는다.

<div style="float: left; width: 20px; height: 400px;background-color:Red"> 
     </div> 
     <div style="float: left; width: 20px; height: 400px;background-color:Blue"> 
     </div> 
     <div style="float: left; width: 20px; height: 400px;background-color:Black"> 
     </div> 
     <div style="float: left; width: 20px; height: 400px;background-color:Yellow"> 
     </div> 
     <div style="clear:both" > 
     </div>