試圖設計基於Flash元素的HTML5頁面我發現

我試圖實現我在另一個網站上找到的設計。它是在Flash中設計的，但我試圖使用HTML5，CSS和Javascript（或必要時使用PHP）來複制類似內容。試圖設計基於Flash元素的HTML5頁面我發現

請參閱以下網站。 http://www.raytheon.com/newsroom/technology/

我試圖複製窗簾式設計，但我剛開始。我最初的問題是，我會如何將這些按鈕放在內容旁邊呢？我現在不擔心滑動轉換，我只是想知道應該如何進行佈局。

2011-08-03 muttley91

我會做這樣的：

<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; 
}

更新：其實我覺得（讀取的更新後另一個答案），浮動更好，因爲浮動動畫會更容易。我仍然使用overflow：隱藏在頁面上。使頁面可見，使其寬度動畫化，所以活動頁面的寬度爲400px。所有頁面都有400px的內容，但只能看到20px。

來源

2011-08-03 18:48:59 Jan

我認爲你可以通過製作具有較小寬度和較大高度的div來製作相同的佈局，並將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>

來源

2011-08-03 18:30:23

我對如何使它像所有東西一樣適合，比如定位和什麼都更加好奇。 – muttley91

我給你添加了一個示例代碼，你應該做什麼，但你必須通過添加最適合你的樣式來更新它。我只是給了你這個想法。 –

試圖設計基於Flash元素的HTML5頁面我發現

回答

相關問題