我已经尝试了所有其他蓝图、960 等。我想为自定义宽度和间距制作自定义框架，应该针对框之间的任何宽度或间距进行修改。 我需要最好的优化和快速的布局方式。想在 css 中制作一个可重用的框架/方法/模式。
例如:
(来源:fivetechnology.com)
编辑: 到目前为止，我发现这篇文章很有用 http://www.cssnewbie.com/build-custom-frameworks/ 想知道别人的看法。
最佳答案
如果您真正了解 html 和 css，那么使用记事本在大约五分钟内就能将这些东西放在一起。
它们是盒子...
...在我说完这些之后，我不得不看看我是否真的足够快，可以在记事本中做到这一点。我很兴奋，我没有更好的事可做，我想我应该能够支持我所说的话。
I almost got too lazy, but then I just committed, cause it would only
be five minutes, right?
Started at:
Honor system here I guess, everything between this time and the next time was all that I typed between those two times. After I finished I copied it out into coda, saved it to see that it worked (it did), fixed the formatting for readability, and pasted it back in. Yes I really put the font family and colors in, I don't know why. I figured why not?
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.我向你保证我打字和思考的速度相当慢，我不会怀疑不到两分钟的时间。所有颜色和尺寸都被猜测了。这对于生产网站来说并不理想，但很高兴弄清楚最初发生了什么。
我的里面没有列，你基本上可以在样式方面复制这些框，并按行做很多事情。固定宽度和 float 权限将完成列的工作。
This is what a finished version could look like.显然花费的时间远远超过五分钟，但还不错。
关于css - 如何快速制作CSS Column Design？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1892489/