新手: CSS三栏布局

我目前知道两种基于CSS的三栏布局方式。第一种叫“嵌套”,第二种叫“挤压”。(名目都是我自己编的)

1. 嵌套。这个简单,大部分三栏布局都用这个,我想。就是两个div(AB和C),在其中一个中嵌上两个div(A和B)。

3-column-css-based-layout

CSS代码是:

#AB { float:left; }
#A { float:left; }
#B { float:right; }
#C { float:right; }
.clear { clear:both; }

HTML代码是:

<html>
<body>
<div id="AB"></div>
<div id="A"></div>
<div id="B"></dive>
<div class="clear"></div>
<div id="C"></div>
</body>
</html>

2. 挤压。这个也不难。先让A、C漂浮在左右两边,B左右Padding出A、C的宽度,这样B就把A、C挤到两边成为中间一栏了。需要注意的是,在HTML代码中,要先A、C块,再B块。

3-column-css-based-layout

CSS代码是:

#A { float:left; width:200px; }
#B { padding:5px 200px; }
#C { float:right; width:200px; }
.clear { clear:both; }

HTML代码是:

<html>
<body>
<div id="A"></div>
<div id="C"></div>
<div id="B"></div>
<div class="clear"></div>
</body>
</html>

尝试自己写一个WP Theme

或许我太闲了,打算自己写一个Wordpress Theme,并且已经开了头。算是挑战自己的CSS知识,PHP知识就谈不上挑战了: 几乎不懂。所以,写出一个有多多功能的Theme不是我的计划,只要还算易于阅读也就够了。到Theme集中营看了不少,越发觉得界面没必要复杂、炫目,而且以我个人经验,大量文章都是通过FEED阅读器阅读的。

在一堆代码里确实容易昏头,昨天就因为复制错误,毁了自己这个blog的style.css,只得找出20多天前的备份重写。备份是多么多么重要。就目前的进展看,有些目不忍睹,不过最好还是坚持完成。当然,难免将来会把一些笔记发上来。

Freeware: Code Editor – PsPad editor

编辑代码可以使用 windows自带的记事本,也可以使用数以百计的文字编辑器。
之前我使用PsPad,功能丰富,使用顺手,但是它不支持UTF-8,不能自动换行…,没有办法,我只有加装了notepad2

--切换是痛苦的--

所以现在要删掉PsPad和notepad2,因为有了更优秀的PsPad editor,也就是支持UTF-8和自动换行的4.50版的PsPad。

语法高亮度显示,查找替换,书签,标签栏,文件夹导航…,有这些特性的软件多得很,为什么我要执着于PsPad呢?

因为它有代码浏览器。比如编辑CSS时可以快速定位Elements, Classes, IDs。
因为它有快速的颜色转换器:

还有其它诸如FTP,HEX编辑,工程管理等。说实话,这些我倒不太用到,但同样很多我没有提到的非常便捷的“小功能”,让我执着于PsPad。在windows下,这也许是最好的免费的code editor了。

下载页,PsPad的开发者还推荐了TopStyle Lite version 3.1这个软件,免费的。可以快速加入CSS的各项参数。试用了几下,不错。