我已经尝试了所有其他蓝图,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:
我猜这里的荣誉系统,一切
在这段时间和下一次之间
是我在这两个之间输入的所有内容
次。完成后,我将其复制
进入尾声,保存下来看看
工作(确实),修复了格式
可读性,然后将其粘贴回
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.显然要花费超过五分钟的时间,但仍然不错。