Sunday, April 20, 2008

簡易式的三欄式網頁格局

在製做 opmsg 時,在想著,需不需要使用 blueprintcss 來做為頁面格局的框架,卻又覺得牛刀殺雞實在不快。所以自已做了一個只有三的格局:
.column {
    float: left;
    margin-right: 15px;
}

.column.one { width: 200px; }
.column.two { width: 600px; }
.column.three { width: 140px; }

.column.three:after {
    content: '.';
    clear: both;
    visibility: hidden;
}
使用方法就是寫三個 div, 分依次給 class 為 "column one", "column two", "column three",就可以讓他們三欄併列了,實際上的效果正如 opmsg.com

Labels:


Comments: Post a Comment

Subscribe to Post Comments [Atom]



Links to this post:

Create a Link



<< Home

This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]