试图设计基于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页面我发现

回答

相关问题