CSS

本系列教程為入門級教程，適合初學者學習，由最簡單的知識一點一點進階。主要以執行個體為主，很少部分理論，這樣更適應初學者快速掌握。因本人也正在學習，難免有一些錯誤或疏漏地方，望各位給予指正。本教程參考《CSS網站布局實錄》一書，在此向作者表示感謝。 要想學好DIV+CSS，首先要有一定的HTML和CSS知識，如果這些你還不瞭解，建議你先去補習這一課，再來學習本教程。另外還要拋棄傳統表格版面配置的思維模式，至於為什麼，在你學習本教程中慢慢就會體會到。如果這些你都準備好了，那麼開始吧！ 一列固定寬度

1. Block和inline元素對比 所有的HTML元素都屬於block和inline之一。 block元素的特點是： 總是在新行上開始； 高度，行高以及頂和底邊距都可控制； 寬度預設是它的容器的100%，除非設定一個寬度 , , , , 和 是塊元素的例子。 相反地，inline元素的特點是： 和其他元素都在一行上； 高，行高及頂和底邊距不可改變； 寬度就是它的文字或圖片的寬度，不可改變。 , , , , , 和是inline元素的例子。 用display: inline

調適型配置是網頁設計中常見的布局形式，自適應的布局能夠根據瀏覽器視窗的大小，自動改變其寬度和高度值，是一種非常靈活的布局形式，良好的調適型配置網站對不同解析度的顯示器都能提供最好的顯示效果。實際上div預設狀態的佔據整行的空間，便是寬度為100%的調適型配置的表現形式，一列調適型配置需要我們做的工作也非常簡單，只需要將寬度由固定值改為百分比值的形式即可。複製代碼 代碼如下:#layout { border: 2px solid #A9C9E2;

下拉及彈出式菜單是網站設計中常用導航形式，這種菜單形式能夠充分利用頁面現在空間隱藏與顯示更多內容，並能對內容進行合理的分類顯示，是一種非常優秀的導航形式。

CSS網頁布局入門教程3：一列固定寬度置中_基礎教程頁面整體置中是網頁設計中最普遍應用的形式，在傳統表格版面配置中，我們使用表格的align="center"屬性來實現，。p本身也支援align="center"屬性，也可以讓p呈現置中狀態，但css布局是為了實現表現和內容的分離，而align對齊屬性是一種樣式代碼，書寫在XHTML的p屬性之中，有違背分享原則（分離可以使你的網站更加利於管理），因此應當css的方法實現內容的置中，我們以固定寬度一列布局代碼

有了一列固定寬度作為基礎，二列固定寬度就非常簡單，我們知道div用於對某一個地區的標識，而二列的布局，自然需要用到兩個div，XHTML代碼如下： 複製代碼 代碼如下:左列 右列 新的代碼結構中使用了兩個id，分別為left和right，表示兩個div的名稱，我們所需要做的是，首先為它們制定寬度，然後讓兩個div在水平行中並排顯示，從而形成二列式的布局，CSS代碼如下： 二列固定寬度——AA25.CN 左列 右列 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

學習任何東西都是一樣，從小學、中學、大學，除了學習知識外就是去學習方法！ 　　要想掌握CSS,

學完了上節教程，我想對於這於這節的學習就容易得多了。 橫向菜單是通過div及JavaSprict實現下拉控制，縱向菜單呢？答案是肯定的。我們現在要做的就是一個縱向菜單，css代碼： ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;} ul li { position:relative;} li ul { position:absolute;

text-align:justify只能對多行中的非最後一行進行左右對齊。對於單行自己沒辦法，IE有text-justify 可以解決問題，對了非IE的我的方式比較垃圾，因為只在特殊場合下才會用。 Example Source Code [www.52css.com] .justify{ height:1.1em; overflow:hidden; text-align:justify; text-justify :distribute-all-lines; } div.cn:after {

從二列固定寬度入手，開始嘗試二列布局的情況下，左右欄寬度能夠做到自適應，從一列調適型配置中我們知道，設定自適應主要通過寬度的百分比值設定，因此在二列寬度自適應的布局中也同樣是對百分比寬度值的設計，繼續上面的CSS代碼，我們得新定義二列的寬度值： 複製代碼 代碼如下:#left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px;

DIV+CSS 英文命名規範_基礎教程1.CSS ID 的命名 外　套：　　wrap 主導航：　　mainnav 子導航：　　subnav 頁　腳：　　footet 整個頁面：　content 頁　眉：　　header 頁　腳：　　footer 商　標：　　label 標　題：　　title 主導航：　　mainbav（globalnav） 頂導航：　　topnav 邊導航：　　sidebar 左導航：　　leftsidebar 右導航：　　rightsidebar 旗　志：　　logo

在實際應用中，有時候需要左欄固定寬度，右欄根據瀏覽器視窗大小自動適應，在CSS中實現這樣的布局方式是簡單可行的，只需在設定左欄的寬度即可，如上例中左右欄都採用了百分比實現了寬度自適應，而我們只需要將左欄寬度設定為固定值，右欄不設定任何寬度值，並且右欄不浮動，代碼如下： 複製代碼 代碼如下:#left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 30

我們應該養成良好的編碼習慣，CSS整體布局聲明為我們的代碼簡化、提高運行效率提供了途徑。我們列舉比較常用的形式，並加上解釋。整體布局聲明的作用在於將目標作一個整體的概括，聲明一些完全相同或基本相同的屬性及值，以免在後面的代碼中每一個標籤中都需要單獨定義。若有不同的屬性與值，後面的重新定義即可。 一、通配式整體布局聲明。 * { margin:0; padding:0; font-size:0.8em; ...

從1990年代初HTML被發明開始樣式表就以各種形式出現了，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示內容，讀者來決定網頁應該怎樣被顯示。 但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加外來定義樣式的語言越來越沒有意義了。 1994年哈坤·利提出了CSS的最初建議。伯特·波斯（Bert

在一列固定寬度之中，我們使用margi:0px auto;這樣的設定，使一個div得以達到置中顯示，而二列分欄中，需要控制的是左分欄的左邊與右分欄的右邊相等，因此使用margi:0px auto;似乎不能夠達到寧產的效果，這時就需要進行div的嵌套式設計來完成了，可以使用一個置中的div作為容器，鈄二列分欄的兩個div旋轉在容器中，從而實現二列的顯示，結合上面的代碼，新的XHTML代碼結構如下： 二列固定寬度置中——AA25.CN 左列 右列 [Ctrl+A

現在國內絕大多數的網站都用CSS把字型大小設定為12px，像素雖然也是相對尺寸單位，但只是相對於螢幕的解析度 ，當螢幕的解析度一定時，如果你感到字太小，閱讀有困難，在非標準瀏覽器中就無能為力了，所以說，如果把單位改成em，那麼就可以用CTRL+滑鼠滾動把字放大，或者用菜單上的查看>文字大小來改變字的大小。 如何設定

使用浮動定位方式，從一列到多列的固定寬度及自適應，基本上可以簡單完成，包括三列的固定寬度。而在這裡給我們提出了一個新的要求，希望有一個三列式布局，基中左欄要求固定寬度，並居左顯示，右欄要求固定寬度並居右顯示，而中間欄需要在左欄和右欄的中間，根據左右欄的間距變化自動適應。這給布局提出了一個新的要求，而且單純使用float屬性與百分比屬性並不能夠實現，CSS目前還不支持度百分比的計算精確到考慮左欄和右欄的佔位，如果對中間欄使用100%寬度的話，它將使用瀏覽器視窗的寬度，而非左欄與右欄的中間間距，因此

一、關於注釋 　　在建立xhtml+CSS網站時，CSS中的注釋非常重要。在建立CSS樣式時，應當保持隨手注釋的習慣。一般的，我習慣於使用“/* 注釋內容 */”的格式來寫注釋，因為在EditPlus等具有高亮功能的編輯器裡，使用C語言中常用的“/***************/”之類的注釋是無意義的，沒有必要填充大量無意義內容作為分隔。帶有注釋的文檔作為網站的原始CSS文檔，在發布網站的時候，可以使用CSS壓縮公用程式壓縮CSS，在輸出的CSS中去掉注釋以提高檔案傳輸效率。 二、關於命名 　　

徹底放棄表格版面配置，使用xhtml+CSS建站也已經有一年多了。一年多的實踐也積累了一定的經驗，現在寫這篇文章來總結一下。在使用xhtml+CSS建站的過程中有一個比較關鍵的問題：網站的CSS樣式表規劃與管理。 我的CSS管理進化史

1， default:2，滑鼠移上去:來源： 今天在同事的手機的電話薄裡面發現的，發現他存的電話號碼都是顯示名字，然後只要往下移動，就能顯示這個人的相應的號碼。 然後自己就在想，這還滿不錯的嘛。於是就想到以前好象收藏過類似的效果。 稍微改下。 總結：生活中的發現無處不在，能夠善於發現，然後勤于思考、聯想，這樣的確是個優點。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"