1

我是 html/html5 新手，但不是编程新手，我正在尝试编写我的个人网站。我已经阅读了许多关于基础知识的资源和教程，但我正在寻找一些关于如何开始实现我想要的布局的技巧。

在我的布局（此处）中，我希望将页面的左半部分作为一个固定的导航面板，其中的图像突出显示当前页面，然后使用每个选项，右侧刷新到一个新的独立滚动页面，并且突出显示图像动画在导航面板中找到新选项。

我应该如何开始实现这样的目标？我只需要朝着正确的方向推动元素/脚本的类型/我需要实现的任何东西。

谢谢！

4

3 回答 3

0

您将菜单放置在设置为的元素中position: fixed;

固定位置将确保菜单不会在页面上移动，无论是否滚动其余部分。

然后使用javascript，您可以在窗口上添加一个“滚动”事件侦听器（或者只是您想要观看滚动的div）。当它触发时，检查 scrollY 属性以查看它在什么范围内，并可能突出显示菜单中的某些项目。

希望这会引导您走上正确的道路。这是一个广泛的问题，所以这里有一个广泛的答案！

于 2013-02-01T20:49:50.227 回答
0

这是一个简单的示例，可帮助您入门：

jsFiddle

当您滚动时，您会注意到右侧的文本滑出屏幕，但绿色框保持在同一位置。这是通过一点 CSS 完成的。

左侧导航 div 的样式为position: fixed;. 这使导航 div 始终保持在一个位置。

相比之下，右侧的内容 divposition: absolute;使用了left: 25%set 样式。导航 div 和内容 div 的宽度以百分比设置。这允许内容占用相同的相对屏幕空间，无论窗口更大或更小。您的内容将适应您的观众分辨率。

使用<iframe>遗嘱是更改右侧内容 div 中内容的一种可能解决方案。另一种是使用ajax，但它变得更加高级，因为您现在必须了解客户端和服务器脚本才能从中获得全部好处。

iFrame

阿贾克斯

如果您的信息是静态的并且不会经常更改，您可以考虑使用附加到内容 div 的多个模板制作一个单页 Web 应用程序。

jQuery

jQuery 模板插件

jQuery 也非常适合学习 JavaScript，并且让构建动态客户端应用程序变得轻而易举。

他们也有ajax支持：

jQuery 阿贾克斯

希望这可以帮助。

祝你好运，编码快乐！

于 2013-02-01T20:59:04.427 回答
0

我赞同@Jeromy French的建议——我认为Bootstrap、Foundation和其他响应式框架对它们有很大的帮助。

这是使用 Bootstrap 的示例：http: //jsfiddle.net/panchroma/2dF6s/

除了 HTML5 之外，您还可以获得适用于从智能手机到宽桌面的所有内容的布局。这不是获得移动友好网站的唯一方法，但它是几个不错的选择之一。

我认为，随着智能手机和平板电脑的发展，你对响应式网站和移动网站了解得越多，你的未来就会越好。

我认为所有响应式框架都使用基于网格的系统，下面是 Bootstrap 的 HTML 外观： 

<div class="container">
<div class="row-fluid" align="center">
    <div class="span12">
        <h1>Header</h1>
    </div><!-- close span12 -->
</div> <!-- close row -->

<div class="row">

<div class="span3" id="side-nav" data-spy="affix" data-offset-top="200">

<h5>Option 1</h5>
<h5>Option 2</h5>
<h5>Option 3</h5>
<h5>Option 4</h5>
</div> <!-- end span3 -->

<div class="span9">
<p>Main Content Here </p>
 </div> <!-- end span9 -->
</div><!-- end row -->
</div><!-- end containter -->

祝你好运！

于 2013-02-02T23:52:08.897 回答