希望能書寫簡單而漂亮的CSS網站代碼嗎？Nice and Free CSS Templates 這個網站提供免費的模板代碼，代碼均能通過W3C檢驗。該網站提供12款模板代碼，基本上能滿足日常網站的設計樣式。有興趣的各位可以參詳下。
分類目錄歸檔：網頁制作
網站制作之八大要領
要領一：確定網站主題
做網站，首先必須要解決的就是網站內容問題，即確定網站的主題。美國《個人電腦》雜志(PC Magazine)評出了99年度排名前100位的全美知名網站的十類題材:第1類:網上求職;第2類:網上聊天/即時信息/ICQ;第3類:網上社區/ 討論/郵件列表;第4類:計算機技術;第5類:網頁/網站開發;第6類:娛樂網站;第7類:旅行;第8類:參考/資訊;第9類:家庭/教育;第10類:生 活/時尚。我們可以參看上面的分類，繼續細分。如果自己在某些方面有興趣，或掌握的資料較多，也可以做一個自己感興趣的東西，一者，你可以有自己的見解， 做出自己的特色;二者，在制作網站時不會覺得無聊或者力不從心。興趣是制作網站的動力，沒有創作熱情，很難設計制作出優秀的作品。
對于內容主題的選擇，要做到小而精，主題定位要小，內容要精。不要去試圖制作一個包羅萬象的站點，這往往會失去網站的特色，也會帶來高強度的勞動，給網站的及時更新帶來困難。記住:在互聯網上只有第一，沒有第二!
10 步學習如何進行 css 定位
我們今天來探討一下不同的 css 布局特性，包括：position:static, position:relative, position:absolute, 等等。
1 . position:static：
網頁各個單元的默認位置，這意味著該單元的位置通常不發生變化。在一般情況下，你不需要特別對它進行設定，除非你需要指定先前已經確定的另一個位置。
1 2 3 | #div-1 { position:static; } |
效果：
繼續閱讀
幾種典型配色方案
新模板《 羽落凡塵》
網站設計精華65條原則
01.明確內容
如果你想成為一個網站設計者，并正想建一個網站的話，首先應該考慮網站的內容，包括網站功能和你的用戶需要什么。你的整個設計都應該圍繞這些方面來進行。
02.抓住用戶
如果用戶不能夠迅速地進入你的網站，或操作不便捷，網站設計就是失敗的。不要讓用戶失望而轉向你的對手的網站。
03.優化內容
內容是核心。大約在兩年以前，企業網站就像一本廣告冊子，更槽糕的是，網站使用了大量的圖片，似乎要幾個世紀才能下載完。
Chanels網站（www.channels.co.uk）在設計的某些方面是成功的，但是內容太貪乏，并且要花很長時間才能找到所要的東西，因此不能算是一個成功的網站。
04.快速下載
沒有什么比要花很長時間下載頁面更槽糕的了。作為一條經驗，一個標準的網頁應不大于60K，通過56K調制解調器加載花30秒的時間。有的設計者說網頁加載應在15秒內。
05.網站升級
時刻注意網站的運行狀況。性能很好的主機隨著訪問人數的增加，可能會運行緩慢。但是，如果你不想失去訪問者的話，一定要仔細計劃好你的升級計劃。
用 CSS 打造一個惟妙惟肖的網頁版蘋果工具條！
如果你是大蘋果的粉絲，你一定會愛上這款由 CSS 打造的蘋果工具條（dock menu，效果預覽），原文作者原創，原文會手把手教你打造！該工具條使用了 Jquery 這個輕量級 Javascript 類庫（很多 AJAX 效果哦）提供的接口，Interface 提供的界面組件和原作者的原創 Icon。 這款 CSS dock menu 是為了用在作者打造的 WordPress 皮膚 iTheme 上的，不用我多說，大家都猜到了吧：一款模仿蘋果的 WP 主題。
該皮膚支持 widgets ，側邊欄支持拖拽，適合WordPress 2.0 和 2.1，適合以下瀏覽器：IE, Firefox, Safari, Opera。
想看原文教程呢，請點擊這里，想下載 CSS dock menu呢，這里。
Insert code
In between the HTML <head> tag, add the following code
1 2 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/interface.js"></script> |
1 | <link href="style.css" rel="stylesheet" type="text/css" /> |
1 2 3 4 5 | <!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(iepngfix.htc) } </style> <![endif]–> |
一些DIV+CSS 命名規范
1.CSS ID 的命名
外 套： wrap
主導航： mainnav
子導航： subnav
頁 腳： footet
整個頁面： content
頁 眉： header
頁 腳： footer
商 標： label
標 題： title
主導航： mainbav（globalnav）
頂導航： topnav
邊導航： sidebar
左導航： leftsidebar
右導航： rightsidebar
旗 志： logo
標 語： banner
菜單內容1： menu1 content
菜單容量： menu container
子菜單： submenu
邊導航圖標：sidebarIcon
注釋： note
面包屑： breadcrumb(即頁面所處位置導航提示）
繼續閱讀
為自己的網頁制做Tab Pane
在E-Spacy看到了漂亮的Tab Pane，于是也給自己的BLOG裝了個。
安裝方法是參照E-Spacy做的，效果見側欄 。
到tabpane下載源代碼，解壓縮后，上傳到自己的網頁空間，推薦放到WP安裝目錄的wp-content\themes內。
然后把此兩行代碼復制到模板文件的header.php內，head之間：
1 2 | <script type="text/javascript" src="js/tabpane.js"></script> <link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" /> |
其中js/tabpane.js和css/tab.webfx.css部分改成自己的網絡鏈接地址，推薦使用
1 | <?php bloginfo('template_directory'); ?> |
這樣在更換空間時也不會出錯。
3個小工具
1.CSS Creator
這個小工具可以為您可視化的制作theme的框架結構，包括doctype、外形(滿屏，居中，靠左)、最小寬度、最大寬度、頭部、左右欄、底部等的基本CSS定義。設置完畢以后點擊Generate Layout便會生成HTML和CSS文件，右鍵另存為即可使用了。
總的來說，對于CSS初學者還是很有用的，因為初學者對一些margin、float可能搞不懂，使得左右欄這樣的布局無法實現。這個小工具僅僅是各出一個基本的框架結構，生成的CSS文件還需要進一步的完善。比如說，你要加入你的配色。
2.kuler
布局完成以后，我們就需要考慮theme的色系了，憑空的想像是很難得，使用這個小工具可以為你節省冥思苦想的煩惱。而且網站還列出了一些優秀的配色方案，值得借鑒。需要注冊。
3.Stripe Generator
有些時候，我們對一些區域，比如說背景，不僅僅需要一些顏色的裝飾，可能會需要一些條紋？但PS等制圖軟件又不會，這時該怎么辦？使用Stripe吧，通過Stripe可以更具自己的需要選擇背景色，背景樣式，條紋色，條紋的形狀，條紋間距和寬度等，而且生成的條紋可以實現無縫連接，免去一些考慮是否無縫的苦惱。