HTML 和 CSS 框架 [关闭]答案

【问题标题】：HTML & CSS Frameworks [closed]HTML 和 CSS 框架 [关闭]
【发布时间】：2014-02-21 05:22:00
【问题描述】：

我是一名初学者，已经学习了 html 和 css 的所有基础知识。目前，我已经了解了框架的概念，以便在网页中轻松放置元素。

关于这一点，我仍然对如何将它们实现到代码中感到困惑。每当我下载一个，我得到一堆文件，不知道如何处理它们。我很惊讶网上没有太多关于如何使用它们的解释，也许我找错地方了。

其次，我应该从一个适合初学者的框架入手吗？我见过有人建议使用 960 Grid System。

此外，是什么让框架“轻”？ “轻框架”有什么区别和用途？

【问题讨论】：

stackoverflow.com/help/dont-ask

标签： html css frameworks

【解决方案1】：

我知道你一定有点迷茫，就像我们现在讨论其他主题一样。

转到此链接：

This is the code of 960 Grid System

您必须复制链接的全部内容。

在您当前的网络中，您将拥有一个主要的 HTML 文件（可能是 index.html 或类似的文件）。在您的主要 HTML 文件或索引所在的同一文件夹中，创建一个名为 CSS 的文件夹，并在此文件夹中创建一个名为 grid960.css 的文件。现在，打开它，复制链接的所有内容并将其粘贴到您的 grid960.css 文件中。保存它，在您的主 HTML 文件中，您必须调用它才能使其工作。为此，在您的 HTML 头部部分中，复制以下内容：

<link rel="stylesheet" href="css/grid960.css">

现在你可以使用它了。而且您必须知道使用它的最佳方法是将其类与 div 一起应用。为了解释 grid960.css 的一些类，我举个例子：

<div class="container_16"> <!--The other option is container_12.-->
   <div class="grid_8">
      This div is going to occupy half part of the window.
   <div>
   <div class="grid_4">
      This div is going to occupy a quarter of the window.
   <div>
   <div class="grid_4">
      This div is going to occupy a quarter of the window.
   <div>
</div>

你也可以这样做：

<div class="container_12">
   <div class="grid_12">
      This div is going to occupy the whole window. Next grid you put is going to be below it because is not going to fit.
   <div>
   <div class="prefix_2 grid_8 suffix_2">
      This div is going to occupy the whole window too, but with a margin-left (prefix_2) with the same width of a div of class grid_2, and the same for the margin-right (suffix_2)
   <div>
</div>

当然，你可以做组合：

<div class="container_16">
   <div class="preffix_1 grid_7 suffix_8">
   </div>
   <div class="preffix_6 grid_10">
   </div>
</div>

无论你想要什么。尝试一下。这很容易。希望对你有所帮助。

【讨论】：