用CSS取代传统布局揭秘尝新（同时也解决一个Blogger问题）

读了Virginia DeBolt 的关于CSS的一篇文章，让我对这位老奶奶深感佩服，不愧为wise-women。 下面列举了她用css取代传统布局的方法，个人觉得十分援用，记录在此。

HTML Attributes CSS Properties Notes align="left" align="right" float: left; float: right; With CSS anything can be floated: images, paragraphs, divs, headings, tables, lists, etc. When you float anything, be sure to assign a width to the element you floated. marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; With CSS, margin can be set for any element, not just the body element. More importantly, margins can be set individually for the top, right, bottom and left of any element. vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; a:visited: #339; a:hover: #999; a:active: #00f; In HTML, link colors were set as an attribute of the body tag and applied uniformly to every link on the page. Using descendant selectors in CSS, link colors can be set to different values in different parts of a page. bgcolor="#FFFFFF" background-color: #fff; In CSS, background-color can apply to any element, not just body and table. bordercolor="#FFFFFF" border-color: #fff; Any element can have a border, the colors of which can be set individually for top, right, bottom and left if desired. border="3" cellspacing="3" border-width: 3px; With CSS, any element can have a border. Borders can be set uniformly as you see them in the table on this page, or the size, style and color of borders can be set individually for the top, right, bottom and left (or any combination thereof) of any element. When setting the borders for tables, use the table, td or th selectors. When setting the spacing for tables, use the table, td, and th selectors. If you want a single border line between adjacent table cells, useborder-collapse: collapse; Border can replace hr when used only as border-top or border-bottom on an element. A rule for border-right and border-bottom can simulate a drop shadow. <br clear="left"> <br clear="right"> <br clear="all"> clear: left; clear: right; clear: both; Many two and three column layouts use float to position elements on a page. If part of your presentation depends on background colors or images behind floated elements, you may want to use clear. See the references for "Understanding how Float Behaves" following this chart. cellpadding="3" vspace="3" hspace="3" padding: 3px; With CSS, any element can have padding. Padding can be set uniformly or individually for the top, right, bottom and left of any element. Padding is transparent, so background-color or background-image will shine through. align="center" text-align: center; margin-right: auto; margin-left: auto; Text-align only applies to text. Block elements such as paragraphs and divs can be centered using margin-right: auto; and margin-left: auto; This table, by way of example, is set for width: 80%; and is centered using margin-left: 10%; See the References below this chart for information on hacks and workarounds needed for centering. 原文链接:http://www.wise-women.org/tutorials/cssplanning/

关于float的小技巧可以去我的老博客，我不打算把里面的东西搬过来，可能也不会在里面写东西了。我觉得blogger现在挺好，以后应该不会被封了。

让人有趣的是，我费了好大的功夫才把这个表格摆成现在这个一正常的样子，其中谢谢耳刀网友的热心帮助，让我发现是
的问题，此后再发现要去掉\r\n这样的回车换行符。

原因是这样：blogger在你添加的html提交时，里面你的\r\n会硬编码为
，因此我也就一真多了很大一快空白，所以要把code里的\r\n删除掉，让code在一排，但自己删除恐怕没有人愿意做，所以我特写了一个java类解决此问题，使用方便。具体见下面说明

/*

**author: livahu

**time: 2007.3.13 00:51

*/



import java.io.FileInputStream;

import java.io.FileNotFoundException;

import java.io.PrintWriter;

import java.util.Calendar;

import java.util.Scanner;



public class ProcessSymbol {



    public static void deleteSymbol(String file) throws FileNotFoundException {

        Scanner sc = new Scanner(new FileInputStream(file))

                .useDelimiter("\r\n");



        PrintWriter out = new PrintWriter(file.substring(0, file

                .indexOf(".txt"))

                + "_" + Calendar.getInstance().get(Calendar.SECOND) + ".txt");

        

        while (sc.hasNext()) {

            out.write(sc.next());

        }

        sc.close();

        out.close();

    }

    

    public static void main(String[] args) {

        if (args.equals("") || args == null) {

            System.out.println("请选择一个文件做处理！");

        } else {

            try {

                ProcessSymbol.deleteSymbol(args[0]);

            } catch (FileNotFoundException e) {

                e.printStackTrace();

            }

        }

    }



}



将此java类编译，然后修改excute.bat文件

@echo off
set CLASSPATH={替换为你保存java类在同一目录};%CLASSPATH%
java ProcessSymbol %1

然后你将你要去除\r\n字符的html文件复制到一个txt文件里，现让java类class文件bat文件txt文件在同一目录，这时你把txt文件拖动到bat文件上就可以转化了，会在同一目录生成一个加上秒钟的txt文件，这就是你要的没有\r\n的html代码写在一行的代码了，剩下的事就是添加到blogger html里就OK了。