我已经尝试了所有其他蓝图,960等。我想为自定义宽度和装订线创建自定义框架,应针对框之间的任何宽度或间距对其进行修改。
我需要最佳的优化和快速方法来进行布局。想要在CSS中创建可重用的框架/方法/模式。

举些例子:

css - 如何快速进行CSS列设计?-LMLPHP
(来源: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:



  我猜这里的荣誉系统,一切
  在这段时间和下一次之间
  是我在这两个之间输入的所有内容
  次。完成后,我将其复制
  进入尾声,保存下来看看
  工作(确实),修复了格式
  可读性,然后将其粘贴回
  in。是的,我真的把字体家族
  和颜色,我不知道为什么。一世
  想通了为什么不呢?


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.显然要花费超过五分钟的时间,但仍然不错。

10-05 20:44
查看更多