尝试基于我发现的HTML5元素设计一个Flash页面
尝试基于我发现的HTML5元素设计一个Flash页面
提问于 2011-08-04 02:25:59
我正在尝试实现一个我在另一个网站上找到的设计。它是用Flash设计的，但我正在尝试用HTML5、CSS和Javascript (如果需要的话，也可以用PHP )复制类似的东西。
请参阅下面的站点。http://www.raytheon.com/newsroom/technology/
我试图复制窗帘类型的设计，但我才刚刚开始。我最初的问题是，如何让按钮与内容并排显示？目前我并不担心滑动过渡，我只是想知道它应该如何布局。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-08-04 02:49:00
我会这样做：
<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;
}更新:实际上，我认为(在阅读了其他答案的更新后) float更好，因为使用float动画会更容易。我仍然会使用overflow:隐藏在页面上。要使页面可见，请设置其宽度动画，使活动页面的宽度为400px。所有页面的内容都是400px，但应该只有20px是可见的。
Stack Overflow用户
发布于 2011-08-04 02:30:23
我认为你可以做同样的布局，制作小宽大高的div，然后在div里面放一个图片，上面的文本和flash一样水平。下面是一个示例代码：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6931327
复制相关文章
相似问题
腾讯云开发者
