Time of Update: 2018-12-05
開始學網頁設計的時候都是table布局,最開始就是用ps把網站做好,然後切片,儘管現在還有在用,但仔細觀察一下,大都這種網站都有類似的特點,其一不是對格式需求很嚴格的,其二就是追求的往往是美觀、個性,而不是功能,大都都是要吸引別人的眼球,然後獲得其他的目的,真正的門戶網站、官網如今早已更新換代改用div+css布局了,那麼到底它有什麼優點啊,其實到現在我都覺得如果用table的話,會簡單一點,省的一個一個的敲代碼,所以收集了一些有關的資料,說服一下自己:Div+CSS網站設計的優點
Time of Update: 2018-12-05
這個例子就可以說明 IE6 IE7 IE8 FireFox在css下的區別.通過不同代碼的區別,可以讓網站得到不同的相容,呵呵~~~~CodeCode highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
Time of Update: 2018-12-05
原文連結:http://www.vvcha.cn/c.aspx?id=3057/* 最小寬度 */.min_width{min-width:300px; /* sets max-width for IE */ _width:expression(document.body.clientwidth < 300 ? "300px" : "auto");}/* 最大寬度 */.max_width{ max-width:600px; /* sets max-width for ie */ _
Time of Update: 2018-12-05
文本主要展示CSS content及其相關的屬性的一些提示:•:before和:after虛擬元素•content屬性•CSS quotes與content屬性的結合使用•計數器它們的基本介紹請參考:CSS content, counter-increment 和 counter-reset介紹及用法1、插入產生內容 使用:before 和:after虛擬元素結合content屬性,就可以在頁面內任何一個元素前或後插入內容,比如下面這個聲明,可以在具有href屬性的連結的前面加上字串“
Time of Update: 2018-12-05
IE6,IE7:margin-left不相容用display:inline;IE和Firefox不相容用!importantCSS hack:區分IE6,IE7,firefox區別不同瀏覽器,CSS hack寫法:區別IE6與FF: backgroundrange;*background:blue;區別IE6與IE7: background:green !important;background:blue;區別IE7與FF: backgroundrange;
Time of Update: 2018-12-05
在講CSS優先順序之前,我們得要瞭解什麼是CSS,CSS是用來做什麼的。 首先,我們對CSS作一個簡單的說明:CSS是層疊樣式表(Cascading Style
Time of Update: 2018-12-05
一、使用css縮寫 使用縮寫可以協助減少你CSS檔案的大小,更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫文法總結》,這裡就不展開描述。 二、明確定義單位,除非值為0 忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫width="100",但是在CSS中,你必須給一個準確的單位,比如:width:100px width:100em。只有兩個例外情況可以不定義單位:行高和0值。除此以外,其他值都必須緊跟單位,注意,不要在數值和單位之間加空格。 三、區分大小寫
Time of Update: 2018-12-05
方法Code highlighting produced by Actipro CodeHighlighter
Time of Update: 2018-12-05
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Test</title><style type="text/css"> tr {
Time of Update: 2018-12-05
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"
Time of Update: 2018-12-05
CSS:<style type="text/css">/* <![CDATA[ */table, td{ border-color: #600; border-style: solid;}table{ border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse;}td{ margin: 0; padding: 4px; border-width:
Time of Update: 2018-12-05
當今使用者的顯示器越來越大的今天,之前的1024*768固寬布局有點越來越不合時宜,對大螢幕的使用者而言,兩側空空的留白給人第一眼的印象是嚴重的螢幕浪費,作為網頁設計師的你有責任給這一批使用者一個良好的使用者介面。當然為了減少這種螢幕的浪費,採用彈性流體布局是最好的解決方案,它可以充分利用螢幕空間,無論你是多大分辯率的使用者,都能盡情滿屏展示內容。然而因為種種限制,目前的網頁完全採用流體彈性布局條件還不具備(特別是瀏覽器廠商對標準的肆意蹂躪以及CSS標準的不完全支援等等)。作為夾在使用者和廠商的
Time of Update: 2018-12-05
1/* 禁止換行 */.nowrap{word-break:keep-all;white-space:nowrap;}/* 強制換行 */.break{word-break:break-all;}css強制不換行div{white-space:nowrap;}css自動換行div{ word-wrap: break-word; word-break: normal;
Time of Update: 2018-12-05
一、架構 頁面的架構基本上都是:“頭”、“主體”、“尾”。但是對於一些頁面如Tudou.com,由於布局的需要,還應在“頭”的下面還要加個“菜單”。二、布局(以下用#ID表示頁面元素) #Head和#Foot裡的就不說了,具體查看示範頁面源碼。 布局說的是將#Main裡的內容分成幾大塊。我們看Tudou.com,#Main裡典型的左右結構,我們用#Layout_1,#Layout_2表示。三、模組 布局#Layout_1,#Layout_2裡的塊就是模組了,
Time of Update: 2018-12-05
在開發的時候會使用到多個CSS檔案和JS檔案,如何組織就成了一個問題。個人認為在開發的時候使用多個檔案,這樣方便查看,到發布的時候再用工作合并成一個。大概思路如下:一般包括兩個檔案,一個在開發的時候使用,一個在發布的時候使用,程式根據配置載入其中一個。例如有一個All-debug.css檔案,在開發的時候使用,裡面的內容是:@import url(../960/960-all.css);@import url(core.css);@import
Time of Update: 2018-12-05
2008-12-18日更新至0.11版修複了在0.1版中的GIF圖片品質差的問題。附最新的源檔案,可執行檔。歡迎大家使用,反饋。(使用此工具需要安裝微軟的dot net framework
Time of Update: 2018-12-05
有朋友使用DIV置中,但是卻發現DIV置中失靈了,是怎麼回事呢?下面給大家解決一下問題,呵呵!
Time of Update: 2018-12-05
CSS的調用方式一共有4種,分別是:行內樣式,內嵌式,link連結式,@import匯入式,在同級的前提下,我們可以按樣就近原則來理解他們的優先順序,則越前定義的樣式,會被後面的樣式覆蓋。假如兩個或更多的規定在應用了前三個規定具有相同優先順序,則後給出的規則優先於早先給出的規則。如果在網頁的HEAD標記中同時使用了STYLE標記符(指定內置樣式)和LINK標記符(指定連結式樣式),並且這兩個樣式指定中同時應用了具有同一優先順序別的樣式,則STYLE標記符和LINK標記符的先後順序將決定樣式的優先
Time of Update: 2018-12-05
.mycode{ margin-top:20px; padding-right:200px ; padding-left:50px; float:left; display:inline}.mycode ul{ width:500px; height:300px } .mycode li{ width:200px; float:left; height:30px; list-style:none} .mycode li p{text-align:right;
Time of Update: 2018-12-05
錨偽類在支援 CSS 的瀏覽器中,連結的不同狀態都可以不同的方式顯示,這些狀態包括:活動狀態,已被訪問狀態,未被訪問狀態,和滑鼠移至上方狀態。a:link {color: #FF0000} /* 未訪問的連結 */a:visited {color: #00FF00} /* 已訪問的連結 */a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */a:active {color: #0000FF} /* 選定的連結