Question

我已经尝试过所有其他蓝图，960等。我想为自定义宽度和装订线制作自定义框架，应该修改框之间的任何宽度或间距。我需要最好的优化和快速的布局方式。想在css中创建一个可重用的框架/方法/ patteren。

例如：

修改到现在为止，我发现这篇文章很有用http://www.cssnewbie.com/build-custom-frameworks/ 想了解别人的意见。

Answer 1

如果你真的了解html和css，这些东西在记事本大约五分钟内完全融合在一起。

他们是盒子......

......在我说完之后，我不得不看看我是否真的足够快在记事本中做到这一点。我很高兴，我没有更好的事情要做，我想我应该能够支持我说的话。

I almost got too lazy, but then I just committed, cause it would only
be five minutes, right? 

Started at:

荣誉系统在这里，我想，一切在这个时间和下一次之间就是我在这两者之间键入的所有内容倍。我完成后我复制了它进入尾声，保存它看到它工作（它确实），修复了格式为了便于阅读，并将其粘贴回来在。是的，我真的把字体系列和颜色，我不知道为什么。一世想为什么不呢？

2:35:17

<html>
<head>
<title>Speed Challenge Impromptu</title>
</head>
<style>
 body {
  background: #000;
  color: #fff;
  margin: 0;
  padding: 0;
  font-family: helvetica;
  font-size: 12px;
  border-bottom: 1px solid #999;
 }
 #wrapper {
  width: 960px;
  margin: 0 auto;
  padding: 5px;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  background: #222;
 }
 #header {
  height: 160px;
  background: #444;
  border: 1px solid #aaa;
 }
 #menu {
  margin-top: 5px;
  margin-bottom: 5px;
  height: 50px;
  background: #555;
  border: 1px solid #aaa;
 }
 #content {
  height: 800px;
  background: #666;
  border: 1px solid #aaa;
  margin-bottom: 5px;
 }
 #footer {
  height: 25px;
  background: #444;
  border: 1px solid #aaa;
 }
</style>
<body>
<div id="wrapper">
 <div id="header">
 </div>
 <div id="menu">

 </div>
 <div id="content">

 </div>
 <div id="footer">

 </div>
</div>
</body>
</html>

2:41:52

Not bad for being totally unprepared in a bit over six minutes.我向你保证，我打字和思考的速度相当慢，我不会怀疑两分钟的时间。猜测所有的颜色和尺寸。它对于一个制作网站来说并不理想，但是最好弄清楚最初会发生什么。

我的列中没有列，你基本上可以将这些盒子复制到自己的样式中，并且可以做很多行。固定宽度和浮动权限将为列完成工作。

This is what a finished version could look like.显然需要花费超过五分钟，但仍然不错。

Answer 2

您展示的各种布局让我觉得960 grid system可能适合这种情况。

Answer 3

如果有一个“最佳方式”来构建一个CSS框架，那么现有产品之一就已经在使用它了，或者知道它的人现在正在构建一个。

不幸的是，既然你已经尝试过所有的产品并且它们不适合你，我认为你不会有太多运气。没有人可以告诉你构建框架的“最佳方式”。这就像问“建造汽车的最佳方式”是什么。这是一个相当广泛的主题。

如果您有关于框架构建技术方面的具体问题，有人可能会帮您解决。

如何快速制作CSS Column Design？

3 个答案: