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
Time of Update: 2018-12-05
很多時候我們必須使一些塊元素並排顯示,一般想到的是必須使用浮動,但是塊元素浮動給邊距(margin)的時候在IE下會出現加倍的BUG,所以很多時候不得不把這個塊元素套在一個內嵌元素裡面,然後給內嵌元素浮動和邊距。今天看到了懌飛、秦歌和烏龍茶關於display:inline-block的文章,很不錯,綜合一下,記錄下來。display:inline-block簡單來說就是將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內,允許空格。但是這個屬性目前不是所有的瀏覽器
Time of Update: 2018-12-05
background-position:| [percentage | length]{1,2}|[top | center | bottom]| [left | center | right] www.86oo.combackground-position:[percentage | length]是用X(橫座標)y(縱座標)定義,如background-position: 20px 40px; http://www.86oo.combackground-position:[top |
Time of Update: 2018-12-05
顏色16進位的色彩值,如果每兩位的值相同,可以縮寫一半,例如:#000000可以縮寫為#000;#336699可以縮寫為#369;注意:在同一個CSS配置節中,不要交錯使用全寫和縮寫的顏色配置,在系統資源極低時,會導致瀏覽器渲染失敗。盒尺寸通常有下面四種書寫方法:property:value1; 表示所有邊都是一個值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1
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"><head><title></title><meta
Time of Update: 2018-12-05
單行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 兩行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center;} #content-top { margin-left:auto;
Time of Update: 2018-12-05
定位一直是WEB標準應用程式中的痛點,如果理不清楚定位那麼可能應實現的效果實現不了,實現了的效果可能會走樣。如果理清了定位的原理,那定位會讓網頁實現的更加完美。定位的定義:在CSS中關於定位的內容是:position:relative | absolute | static | fixedstatic 沒有特別的設定,遵循基本的定位規定,不能通過z-index進行層次分級。relative 不脫離文檔流,參考自身靜態位置通過 top,bottom,left,right
Time of Update: 2018-12-05
在CSS網頁布局開發中,會有很多小技巧,新手朋友往往對此很不熟悉。在某一兩個小問題上,或許糾纏很長時間才能搞明白,雖然在的文檔中,多次提及過這方面的內容,但依然有很多朋友在這些問題上犯錯。我們今天看看這些CSS技巧,認真讀一讀,或許您並不能完全理解,您可以在進行搜尋,擴充您所想要得到的知識,相信您會有很多收穫!網頁布局開發中,會有很多小技巧,這裡再擴充一下您所想要得到的知識,相信您會有很多收穫! 一、ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值。 二、
Time of Update: 2018-12-05
利用CSS來布局頁面配置DIV有點邏輯性!重點理解盒子模型,標準流和非標準流的區別,還有定位原理!把這3個攻破了,就非常簡單了!多實踐多參考!最後就是相容問題了,在實踐中自然就有經驗了!這些相容技巧都是經驗來的! 盒子模型有兩種,分別是 IE 盒子模型和標準 W3C 盒子模型。他們對盒子模型的解釋各不相同,先來看看我們熟悉的標準盒子模型: 圖片看不清楚?請點擊這裡查看原圖(大圖)。 從可以看到標準 W3C 盒子模型的範圍包括
Time of Update: 2018-12-05
css樣式的rel屬性:rel屬性用於定義串連的檔案和html文檔之間的關係。rel=stylesheet指定一個固定或首選的樣式而rel="alternate stylesheet"定義一個互動樣式。固定樣式在樣式表啟用時總被應用。連結標籤a的rel屬性超級連結<a>標記代表一個連結點,是英文anchor的簡寫。它的作用是把當前位置的文本或圖片串連到其他的頁面、文本或映像,這已是眾所周知了,但關於它的文法結構可能有點鮮為人知,而要用活它則必須瞭解其文法結構。<a>
Time of Update: 2018-12-05
又好久沒有寫部落格了,也不知道應該寫點啥,不知道什麼東西值得與大家分享。前些天看這個http://www.qikan.com.cn/Article/dnxx/dnxx200406/dnxx20040622.html網頁時,發現他的那個文字漸層效果很有意思。今天沒事就抓出來分析一下,並給出簡化後的例子及簡單的原理分析。效果:例子源碼:<style type="text/css">.contMask{
Time of Update: 2018-12-05
:html+css代碼:html+css 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>井字形表格</title> 6 <style
Time of Update: 2018-12-05
在使用css對html文檔聲明樣式的時候,一般情況(即不考慮使用者進行樣式設定,只考慮開發人員和使用者代理程式-瀏覽器-)下,頁面樣式最終的體現是開發人員所寫的樣式和瀏覽器預設樣式的最終合作結果。實際上,從比較淺的層次來講的話,使用者代理程式的樣式無需考慮在內,一是因為使用者代理程式的樣式一般是display之類的基本樣式,而並非網頁中最具有展現意義的color、float等樣式;二則是因為使用者代理程式的樣式與開發人員的樣式相比較,總是後者優先。因此,在基本的hml文檔中樣式的處理上(常規情況
Time of Update: 2018-12-05
之前寫過關於清除浮動的一些方法介紹---(http://www.cnblogs.com/qiwenke/archive/2012/10/07/2714434.html),最近在學習的過程中又翻閱到了不少好的文章---(如http://www.iyunlu.com/view/css-xhtml/55.html)----因此重頭審視之前寫的文章的時候,發現漏洞百出。特此加上一篇簡單的補充作為自己的學習筆記:一、仍然以原來代碼為例(如下):<div class="container">
Time of Update: 2018-12-05
Time of Update: 2018-12-05
離去是為了更好的開始,新的開始、新的工作馬上開始了。一直以來覺得在css上面根基不是很強大,打算花一周時間將《CSS禪意花園》《精通CSS網頁布局》重新總結一遍,主要將以前沒注意的東東做個筆記。布局是需要縝密的結構分析和設計第一天 CSS布局基礎1)在html中匯入外部樣式表(兩種方法) 1-1)<link href="001.css" rel="stylesheet" type="text/css"/> 1-2)<style type="text/css"
Time of Update: 2018-12-05
第二天 文本布局和圖片布局文本布局:1)一個常見的上下左下右分塊布局:<!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"> <head> <meta http-
Time of Update: 2018-12-05
以前的日曆選取器都是用table製作的,現在都是div+css時代了,這兩天就重寫了一個日曆選取器主要特點如下:用div
Time of Update: 2018-12-05
現在主流的瀏覽器分別是:Internet Explorer 6, Internet Explorer 7和Firefox 2。這讓我們在網站設計中不得不考慮如何使樣式“crossover”。這裡介紹一個較為簡單的方法使樣式的顯示效果在上述三種瀏覽器中保持一致。首先我們針對Firefox 2設計了如下的樣式代碼:#MyDiv { margin : 10px 10px 10px 10px; } 然後針對Internet Explorer 6進行樣式修改,使用如下的代碼語句,該代碼只能被 IE 6
Time of Update: 2018-12-05
這篇文章已經在草稿箱裡放了好久,考慮一下還是發布吧。這是翻譯的文章,原文在這裡Efficiently Rendering