设计网页组件布局的常用方法

Question

首次从头开始设计网页布局，并想知道设置网页及其上的所有组件测量的最佳做法。 该页面将具有水平标题，其中包含导航栏，下方有三列。 这是我到目前为止所提出的：

• 使用水平对齐的导航链接修复标题部分的高度（
）
• 修复了网络组件的高度和宽度（以像素为单位）
• 组件驻留在具有最小宽度设置
的三列（div元素）中

我想错过什么或者它是一个好方法吗？

PS我完全了解Bootstrap等，但是在这个项目中不能使用任何框架，只有纯html / css

Answer 1

如果你知道基本的HTML和CSS（可能还有javaScript），我会马上去阅读twitter-bootstrap http://getbootstrap.com/

如果你不能使用框架，那么https://html5boilerplate.com/将是一个开始让自己成为公平竞争环境和良好结构的好地方:)我认为这可能是你项目的完美开始。

Answer 2

您的问题非常广泛，可能会被关闭但需要考虑的事项;

考虑使用其他人指出的HTML Boilerplate。这不是一个框架，它只是一个HTML文档的起点，它包含一个重置，可以消除您在开始时可能遇到的任何不一致。您应该根据需要自定义它。

在布局方面，我会考虑使用Flexbox，它可以为您提供所需的布局。

如果您需要支持移动浏览器，那么Media Queries就是您的朋友。这应该可以为您提供足够的信息。

对于JS，请在需要时添加它！

Answer 3

这是我的解决方案：尝试Quick Slicer获取初始布局草图，然后编辑代码，微调CSS（实际上是.scss），将尺寸重构为绝对 p 我 x els或 em （如有必要？），并填写内容文本以满足您的需求。