Time of Update: 2017-01-13
很多朋友在使用DreamWeaver的時候都會遇到這樣的情況,如下圖。 給當前編輯的文檔連結了CSS檔案,並對頁面元素應用了定義的CSS樣式,但在DreamWeaver中卻看不到任何效果。 主要原因就是DreamWeaver多出了一個樣式呈現工具列,該工具列允許你輕易的為不同的媒體類型,例如螢幕、手持功能和列印輸出進行設計。其他的支援媒體類型有投影裝置, TTY(Television Type Devices),以及TV媒體類型。同時還提供了通過開關CSS顯
Time of Update: 2017-01-13
三欄布局是目前最常見的網頁布局,主要頁內容放在中間一欄,邊上的兩欄放置導航連結之類的內容。基本布局一般是標題之下放置三欄,三欄佔據整個頁面的寬度,最後在頁的底端放置頁尾,頁尾也佔據整個頁面寬度。 絕大多數網頁設計者都熟悉傳統的網頁設計技術,用這些技術可以產生帶有表格、建立固定寬度布局或者“液態”(它可以根據使用者瀏覽器視窗寬度自動調整)布局的網頁。現在,我們都開始拋棄基於表格的布局技術,許多網路設計者正在從XHTML標記和CS
Time of Update: 2017-01-13
IE7 修複了很多 bug,也增加了對一些選擇符的支援,所以現在諸如 *html {} 和 html>body {} 等針對 IE 隱藏或顯示的 hack 都會在 IE7 中失效。雖然 CSS Hack 不推薦使用,條件注釋才是萬無一失的過濾器,但是條件注釋只能出現在 HTML 中,CSS Hack 還是有用武之地的。Nanobot 發現了一些針對 IE7 的 CSS Hack,具體就是:>bodyhtml**+html這三種寫法,其中前兩種都是不合法的 CSS
Time of Update: 2017-01-13
最小高度可以設定一個BOX的最小高度,當其內容較少時時,也能保持BOX的高度為一定,超出就自動向下延伸,但到目前為止,只有Opera 和 Mozilla 支援,IE7開始也支援了,但IE7處於測試階段,等正式版發布到普及需一段也許比較長的時間,除非MS把它捆綁在某個作業系統上,如何在現有基礎上(IE6 80-90%),合理、妙用最小高度了?假定有二個BOX,我們需要它的最小高度為150PX。 代碼如下複製代碼
Time of Update: 2017-01-13
代碼如下: 以下是引用片段: 代碼如下複製代碼 <style>#galleryh { padding:0; margin:0 auto 5em auto; list-style-type:none; overflow:hidden; width:495px; height:240px; border:1px solid #888; background:#
Time of Update: 2017-01-13
整體聲明的方法 1. 基本上,整體聲明有兩種方法,第一種就是針對一個標籤,然後一次設定好幾個樣式。第二種就是同時對好幾個標籤設定相同的樣式。下面這個例子就是:“針對一個標籤,然後一次設定好幾個樣式”: 代碼如下複製代碼 <stype="text/CSS"> body{font-size:9pt;font-color:red;background:white}</style> 2.
Time of Update: 2017-01-13
分項聲明 搞懂了基本聲明和整體聲明後,現在要來談談分項聲明了,這個內容基本上不用多講,因為並沒有什麼特別的用法,看看下例就知道了: 代碼如下複製代碼 <style type="text/CSS"> body{font-size:9pt; font-color:red}body{font-family:宋體; background:white}</style>
Time of Update: 2017-01-13
用css實現網頁背景漸層的代碼如下:一、從上往下漸層body{FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}二、從左上至右下漸層body{FILTER:Alpha(style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100);
Time of Update: 2017-01-13
按照CSS規範,浮動元素(floats)會被移出文檔流,不會影響到塊狀盒子的布局而只會影響內聯盒子(通常是文本)的排列。因此當其高度超出包含容器時,一般父容器不會自動伸長以閉合浮動元素。但是有時我們卻需要這種自動閉合行為,具體如何處理呢?有一種做法就是在父容器內再插入一個額外的標籤,並令其清除浮動(clear)以撐大父容器。這種方法瀏覽器安全色性好,沒有什麼問題,缺點就是需要額外的(而且通常是無語義的)標籤,所以我個人不大喜歡。後來又有了一種新的方式,使用 :after
Time of Update: 2017-01-13
如何避免表格因為圖片尺寸或者過長的英文字元而變形撐開,在CSS加入以下代碼就可以防止,同時英文單詞也會按單詞斷行,不是按字母這個。我想說的是這個在CSS2.0是不支援的,但是能解決一些實際問題。頁面設計不是為了標準檢驗而設計,還是以使用者使用為主,在目前有些WEB標準無法解決的一些問題上,我會採用一些非標準的方法處理,只要主流BROWSER如IE,Firefox,Netscape,Opera等上能正確顯示,我會把通過WEB表準的校正放在次要位置,並且MS已經建議在CSS3。0中加入這個屬性了
Time of Update: 2017-01-13
在使用CSS建站時,您肯定遇到過形形色色的布局問題,最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易,當您遇到困難時為您提供快速參考。 1、有疑問,先驗證 在調試時,先對您的代碼進行驗證往往能省去不少麻煩事。格式不正確的XHTML/CSS 會導致許多布局上的錯誤。在其他瀏覽器中進行測試之前,請先在最先進的瀏覽器中撰寫和測試CSS代碼,而不是相反。 如果您在破舊的瀏覽器中編寫和測試,你的代碼就不得不依賴那個破舊瀏覽器的糟糕的顯示,然後在符合標準的瀏覽器中進行測試,看到顯示結果&
Time of Update: 2017-01-13
CSS樣式表檔案是使用link來調用單獨的檔案好呢,還是直接用<style>......</style>嵌入頁面內部好呢?或者說究竟這兩種方法該怎麼使用呢? w3cn的阿捷說,在以前,我們通常採用2種方法使用樣式表: 頁面內嵌法:就是將樣式表直接寫在頁面代碼的head區。類似這樣: <style type="text/css"><!--body { background&
Time of Update: 2017-01-13
在前一段時間製作了CSS calendar,然後我就想用css製作一個table的模型,該模型遵循親和力規則,而且有良好的視覺效果圖:顏色的選擇和搭配這樣做的好處是:
Time of Update: 2017-01-13
SPAN 和 DIV 的區別在於,DIV(division)是一個區塊層級元素,可以包含段落、標題、表格,乃至諸如章節、摘要和備忘等。而SPAN 是行內元素,SPAN
Time of Update: 2017-01-13
CSS selector 選擇符是我們進行CSS網頁布局的基礎。CSS selector到底有哪些,如何合理的運用呢?選擇符可以分為三類,除了第一類HTML selector之外,其它兩類我們是可以自己命名的,在進行命名時,注意包含語義,或者添加必要的注釋,使我們的代碼更清晰,易讀。 HTML selector 標籤選擇符 HTML selector就是HTML的標籤,如:DIV,TD,P,H1等等,如你用
Time of Update: 2017-01-13
我們在瀏覽網頁的時候有時可以看到網頁捲軸顏色不是系統預設的樣式,而是漂亮的紅色或其它顏色樣式,其實這就是在網頁代碼之間加入代碼來實現的,具體是哪些代碼呢? 頁面捲軸代碼及其解釋如下:scrollbar-3d-light-color 設定或檢索捲軸亮邊框顏色 scrollbar-highlight-color 設定或檢索捲軸3D介面的亮邊(ThreedHighlight)顏色 scrollbar-face-color 設定或檢索捲軸3D
Time of Update: 2017-01-13
我們瀏覽網頁的時候,經常會遇到一些互動的效果。例如容器在滑鼠移上去的時候,會發生一些變化。這些效果,可以用多種方法來實現。現在我們要解決的是如何在CSS中寫指令碼實現互動效果。 CSS代碼如下: 代碼如下複製代碼
Time of Update: 2017-01-13
滑鼠移至上方tip效果,是一個非常有用的功能,在頁面配置受到局限的時候,我們不能往頁面中添加過多的內容。而滑鼠移至上方tip效果,可以在滑鼠移上去的時候有一個提示資訊,我們可以將相關的資訊放置在這個tip中,不影響頁面美觀而又能很好的傳達資訊。應用div+css布局,我們用CSS可以實現這樣的效果嗎?其實這很簡單,我們可以建立一個span或div,將之初始設定成:display:none,隱藏這一標籤的內容。(關於display可以參考這裡)當滑鼠移上去的時候,我們將此內容顯示出來。然後對其進行
Time of Update: 2017-01-13
我們在製作表單的時候,往往希望有滑鼠移至上方互動效果。實現這樣的效果,我們有多種方法:1、在xhtml中直接寫入onmouseover、onmouseout指令碼就可以實現了,但這樣就違背了web標準所倡導的內容、表現相分離的原則。以後若要對此進行修改也將會很繁瑣。這樣直接寫入xhtml也會讓頁面代碼增加,如果只是一個input輸入框或許是無所謂的,如果是幾十個幾百個,增加的位元組數就很寵大了。2、在xhtml中加入小指令碼,滑鼠經過時可以切換CSS。具體內容請看這篇文章。雖然實現了內容、表現相
Time of Update: 2017-01-13
偽類(Pseudo classes)是選擇符的螺栓,用來指定一個或者與其相關的選擇符的狀態。它們的形式是selector:pseudo class { property: value; },簡單地用一個半形英文冒號(:)來隔開選擇符和偽類。 CSS很多的建議並沒有得到瀏覽器的支援,但有四個可以安全使用的用在串連上的偽類。link用在為訪問的串連上。visited用在已經訪問過的串連上。hover用於滑鼠游標置於其上的串連。ac