CSS

按照CSS規範，浮動元素（floats）會被移出文檔流，不會影響到塊狀盒子的布局而只會影響內聯盒子（通常是文本）的排列。因此當其高度超出包含容器時，一般父容器不會自動伸長以閉合浮動元素。但是有時我們卻需要這種自動閉合行為，具體如何處理呢？有一種做法就是在父容器內再插入一個額外的標籤，並令其清除浮動（clear）以撐大父容器。這種方法瀏覽器安全色性好，沒有什麼問題，缺點就是需要額外的（而且通常是無語義的）標籤，所以我個人不大喜歡。後來又有了一種新的方式，使用 :after

　　如何避免表格因為圖片尺寸或者過長的英文字元而變形撐開，在CSS加入以下代碼就可以防止，同時英文單詞也會按單詞斷行，不是按字母這個。我想說的是這個在CSS2.0是不支援的，但是能解決一些實際問題。頁面設計不是為了標準檢驗而設計，還是以使用者使用為主，在目前有些WEB標準無法解決的一些問題上，我會採用一些非標準的方法處理，只要主流BROWSER如IE,Firefox,Netscape,Opera等上能正確顯示，我會把通過WEB表準的校正放在次要位置，並且MS已經建議在CSS3。0中加入這個屬性了

應用Web標準進行網頁製作以後，我們通常用ul無序列表標籤來構建菜單。我們以前討論過很多橫向菜單的製作，在前面的文章中，我們講述了《用“ul+li”及css製作韓國風格菜單》，是一種縱向的導覽功能表。我們今天來看另一種縱嚮導航菜單，我們不斷的總結經驗、提高編碼水平，才能在實際操作中更加的得心應手。　　我們看下面的XHTML代碼：  代碼如下複製代碼

圖片自動適應大小是一個非常常用的功能，在進行製作的時候為了防止圖片撐開容器而對圖片的尺寸進行必要的控制，我們可不可以用CSS控製圖片使它自適應大小呢？　　我們想到了一個比較簡單的解決方案，雖然不是非常的完美，如果您的要求不是非常高，已經可以滿足你的需要了。我們看下面的代碼：  代碼如下複製代碼

　　一般而言，滑鼠以斜向上的箭頭顯示，移到文本上時變為有頭的豎線，移到超級連結上變為手型。但用css可控制滑鼠的顯示效果，如可使滑鼠移到普通文本上也顯示成手型。　　用css控制的文法如下:　　<span style="cursor:*">文本或其它頁面元素</span>　　把 *

　　CSS樣式表，是使用來調用單獨的檔案好呢，還是直接用 嵌入頁面內部好呢?或者說究竟這兩種方法該怎麼使用呢?　　在阿捷的w3cn中，他說:　　引用內容　　在以前，我們通常採用2種方法使用樣式表:　　頁面內嵌法:就是將樣式表直接寫在頁面代碼的head區。類似這樣:　　<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>

不可換行 <NOBR></NOBR> （不換行） overflow版本：CSS2　 相容性：IE4+ NS6+　繼承性：無 文法：  overflow : visible | auto | hidden | scroll  參數：  visible : 　不剪下內容也不添加捲軸。假如顯式聲明此預設值，對象將被剪下為包含對象的window或frame的大小。並且clip屬性設定將失效 auto :

　　如果用傳統的方法製作這個翻轉菜單，至少需要把圖片切成10塊，還要加上JS代碼，在圖片按鈕上再加行為，現在完全用CSS來實現，圖片只要一張，見下圖：　　CSS代碼:　  代碼如下複製代碼 　#imgmenu{ 　　width: 450px; 　　height: 25px; /*高度是背景圖片的一半*/ 　　background: url(/imagelist/06/43/473648jpj0j1.gif);

　　CSS自動實現網頁列印版本 　　許多網站上都有一個針對列印的版本，但實際上這並不需要，因為可以用CSS來設定列印風格。　　也就是說，可以為頁面指定兩個CSS檔案，一個用於螢幕顯示，一個用於列印：　　  代碼如下複製代碼 <link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen"

　　認識css的偽類　　偽類(Pseudo classes)是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是selector:pseudo class { property: value;

一.使用CSS縮寫使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫文法總結》，這裡就不展開描述。二.明確定義單位，除非值為0忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫width=100，但是在CSS中，你必須給一個準確的單位，比如：width:100px

自適應高度的問題，採用 Div + CSS 進行三列或二列布局時，事先不知道具體高度，只能根據內容的增減自適應高度，要使兩列（或三列）的高度相同，用 Table 很容易實現，但採用 Div + CSS 就顯得比較麻煩了。按照一般的做法，大都採用背景圖填充或 JS 指令碼的方法使高度相同，但這些都不是最好的辦法，我認為…下面介紹採用“隱藏容器溢出”和“正內補丁”和“負外補丁”結合的方法主要代碼：

目錄介紹 針對瀏覽器的選取器 讓IE6支援PNG透明 移除超連結的虛線 給行內元素定義寬度 讓固定寬度的頁面置中 圖片替換技術 最小寬度 隱藏水平捲軸  一、介紹這篇文章包括了8個非常有用的解決辦法, 在進行css設計遇到問題時你就會用到它們.二、 針對瀏覽器的選取器這些選取器在你需要針對某款瀏覽器進行css設計時將非常有用. IE6及其更低版本 * html {}IE7及其更低版本 *:first-child+html {} * html {}僅針對IE7

　　前些天加了一個設計群,裡面一幫人都在嚷嚷要學css,但是不知道從哪裡入手,於是我就在群裡隨便嘀咕了一句"哈哈,我是高手...."

　　翻譯:零度，轉載請註明本文英文原文出處以及本文地址!由於我英文水平有限，有不懂的地方還請閱讀原文，歡迎交流!　　相對定位　　當一個元素被指明為{position:relative;}的時候，它開始是遵守正常流規則的(也就是說，如果你不給他任何規則，他就和正常的一樣，譯者注)，它周圍元素相應的被定位。然後，元素盒根據它的屬性值位移。　　請注意上面元素周圍的盒子是正常布局的，包括垂直邊距的摺疊，因此，採用相對定位的元素有可能覆蓋其他元素。　　瀏覽器安全色性

統來說，“標準網頁”的檔案組織就是XHTML+CSS。其中XHTML主要用來表示網頁結構和顯示內容，而CSS則是定義結構布局和修飾內容樣式。常用於布局的XHTML一般有：DIV：主要用於頁面內容邏輯上的分塊，比如一張網頁一般包括頭部、導航、側欄、內容和著作權等責任分區。此時即可使用DIV標籤分割。同時對各區塊建議這樣的命名：頭部：<div id="masthead"></div>導航：<div

　　CSS selector 選擇符是我們進行CSS網頁布局的基礎。CSS selector到底有哪些，如何合理的運用呢？選擇符可以分為三類，除了第一類HTML selector之外，其它兩類我們是可以自己命名的，在進行命名時，注意包含語義，或者添加必要的注釋，使我們的代碼更清晰，易讀。　　HTML selector 標籤選擇符　　HTML selector就是HTML的標籤，如：DIV，TD，P，H1等等，如你用 

我們瀏覽網頁的時候，經常會遇到一些互動的效果。例如容器在滑鼠移上去的時候，會發生一些變化。這些效果，可以用多種方法來實現。現在我們要解決的是如何在CSS中寫指令碼實現互動效果。　　CSS代碼如下：  代碼如下複製代碼

　　　　偽類(Pseudo classes)是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是selector:pseudo class { property: value; }，簡單地用一個半形英文冒號(:)來隔開選擇符和偽類。　　CSS很多的建議並沒有得到瀏覽器的支援，但有四個可以安全使用的用在串連上的偽類。link用在為訪問的串連上。visited用在已經訪問過的串連上。hover用於滑鼠游標置於其上的串連。ac

在項目中，我們經常會遇到需要查看資料表中所有欄位詳細資料的情況，通常我們會把某些必要的欄位如ID等顯示出來，然後把其它欄位匯總放到DetailView或者另一個頁面，然後提供一個“查看詳細資料”的LinkButton，抑或是利用指令碼彈出另一個Web視窗。這些做法都稍顯蹩腳，如果只是為“查看詳細資料”而查看詳細資料（額，有些拗口），我們還有更好的解決辦法，利用div+css來達到類似ToolTip的效果。   &nbs