DIV+CSS布局入門教程(六)

這半個月以來今天是頭一天在20:00左右下班,想起關于這個教程一直沒有完成,心里感覺非常不踏實。兩個月前剛辭職,本想把教程全部完成,但是由于一次不幸,導致硬盤中的數據大部分丟失,本寫了一半的教程也隨之灰飛煙滅。但最近有許多的網友通過博客、QQ、MSN、E-MAIL等途徑與我聯系,希望能繼續更新這個教程,甚至有網友居然撥打我的手機(我不知道大家是如何知道我的號碼的,,哎~~)被大家所感動,時間雖然很緊,但還是抽點時間來盡量完成這個教程吧~~就像鯨魚叔叔所說的,時間就是奶,越擠就越多~~

首先,有些東西需要說明一下。對于之前的文章,由于為了讓大家更好的區分各層的關系,教程中不少地方使用了大寫的CLASS或者ID,其實這樣做是不推薦的,我推薦的方法是使用單詞之間增加下劃線,或者單詞拼接的方法。因為CSS是區分大小寫的。大家可以看到,我提供給大家的下載文件中全部都是使用小寫來處理的。

我們先來處理sidebar的樣式,經過分析,我們可以得知,sidebar有四個部分,我們將這四個部分分為四個層:

繼續閱讀

Div+CSS布局入門教程(五)

四、頁面制作(1)—-用好border和clear

  由于找工作找房子的原因,隔了這么久才能開始寫教程,心里感覺很對不起一直在關注本站的朋友,今天是找到房子的第二天,于是趕快繼續寫教程。
  這一節里面,主要就是想告訴大家如何使用好border和clear這兩個屬性。

繼續閱讀

Div+CSS布局入門教程(一)

轉自http://www.tblog.com.cn

一、頁面布局與規劃

好久沒有認真寫點東西了,想起最近這些時間經常有朋友問到我有關于DIV+CSS布局的問題,其實歸根結底還是由于沒有入門造成的。那么接下來的這篇文章就帶領大家入門吧…

在網頁制作中,有許多的術語,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關于HTML的基本知識,而在你學習這篇入門教程之前,請確定你已經具有了一定的HTML基礎。下面我們就開始一步一步使用DIV+CSS進行網頁布局設計吧。

所有的設計第一步就是構思,構思好了,一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構畫出來,以下是我構思好的界面布局圖。
01.JPG

繼續閱讀