分類目錄歸檔：網頁制作

分享收藏的CSS+DIV陳列館網站

由 發表于 ┊2,521 PV

學習程序最好的方法是查看別人的原代碼，學習CSS也一樣，這篇文章介紹最人們的CSS網站收集站點，行話叫CSS陳列館（showcase），[專錄]網站設計師必看，必收藏，畢學習

　　http://www.csszengarden.com/
　　CSS禪意花園是最富盛名的CSS設計陳列館，Dave　Shea在創辦之初是為了讓網頁設計師通過CSS樣式表針對同一個Html文件的設計不同的樣式，卻沒想到這個項目成為了當今網頁設計頂尖高手展現無窮創意的舞臺，看看禪意花園的

　　http://www.cssvault.com/
　　Cssvault是第一個以網站縮略圖的方式呈現的優秀設計的網站，而CSS陳列館（showcase）這一說法也是由這里開始，從開始至今大約一年的時間里面，收錄了大量的優秀設計，是CSS設計師必去的網站之一。

　　http://www.webstandardsawards.com/
　　Web Standards Award，顧名思義，這里也是收集符合“網頁標準”設計的網站，除收集外，還對每月收集來的網站進行評選，獲勝設計可以冠以當月“網頁標準”設計獎的頭銜，對于設計師來說，也是一種殊榮。

　　http://www.unmatchedstyle.com/
　　這個網站是最新出爐的一個CSS陳列館，和前面介紹的幾個網站大同小異，也是采用縮略圖的方式呈現，當然每個網站收集者的審美特征都不同，多一個地方無疑也給鐘情于CSS設計的朋友多了一個選擇，而且他們的更新很勤快。

繼續閱讀 →

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

由 發表于 ┊1,779 PV

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

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

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

繼續閱讀 →

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

由 發表于 ┊1,705 PV

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

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

繼續閱讀 →

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

由 發表于 ┊3,065 PV

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

一、頁面布局與規劃

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

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

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

繼續閱讀 →

padding-CSS速查手冊

由 發表于 ┊1,855 PV

padding版本：CSS1　 兼容性：IE4+ NS4+　繼承性：無

語法：

padding : length

參數：
length : 由浮點數字和單位標識符組成的長度值 | 或者百分數。百分數是基于父對象的寬度。請參閱長度單位

說明：

檢索或設置對象四邊的補丁邊距。
如果提供全部四個參數值，將按上－右－下－左的順序作用于四邊。
如果只提供一個，將用于全部的四條邊。
如果提供兩個，第一個用于上－下，第二個用于左－右。
如果提供三個，第一個用于上，第二個用于左－右，第三個用于下。
內聯對象要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute。
不允許負值。
對應的腳本特性為padding。請參閱我編寫的其他書目。
關于對象的尺寸與邊框，內外補丁等樣式表屬性的關系，請參看圖例以及height和width屬性。

示例：

body { padding: 36pt 24pt 36pt; }
body { padding: 11.5%; }
body { padding: 10% 10% 10% 10%; }

word-break應用

由 發表于 ┊1,718 PV

word-break版本：IE5+專有屬性　繼承性：無語法：

word-break : normal | break-all | keep-all

參數：
normal : 　依照亞洲語言和非亞洲語言的文本規則，允許在字內換行
break-all : 　該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 　與所有非亞洲語言的normal相同。對于中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本

說明：

設置或檢索對象內文本的字內換行行為。尤其在出現多種語言時。
對于中文，應該使用break-all 。
對應的腳本特性為wordBreak。請參閱我編寫的其他書目。

示例：

div {word-break : break-all; }