Question

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

在我的布局中（here）我希望将页面的左半部分作为固定导航面板，其中图像突出显示当前页面，然后每个选项右侧刷新为独立的滚动页面和高亮图像在导航面板中设置为新选项。

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

谢谢！

Answer 1

您将菜单放在一个设置为position: fixed;

的元素中

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

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

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

Answer 2

这是一个简单的示例，可以帮助您开始：

jsFiddle

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

左侧的导航div使用position: fixed;设置样式。这样可以将导航div始终保持在一个位置。

相反，右侧的内容div采用position: absolute;样式设置left: 25%。导航div和内容div的宽度以百分比形式设置。这允许内容占用相同的相对屏幕空间，无论窗口是大还是小。您的内容将适应您的观看者分辨率。

使用<iframe>将是改变右手内容div中内容的一种可能解决方案。另一种方法是使用ajax，但是现在必须了解客户端和服务器脚本，以便从中获得全部好处。

iFrame

Ajax

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

jQuery

jQuery Templates Plugin

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

他们也有ajax支持：

jQuery Ajax

希望这有帮助。

祝你好运，快乐的编码！

Answer 3

我接受@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 -->

祝你好运！

HTML 5初学者。如何实现这种布局？

3 个答案: