CSS

今天用了很久時間終於解決了這個問題，基本完美了，唯一不完美的就是 IE 6 只有在圖片完全下載完成後才會自動調整大小，不過聊勝於無，總比進入頁面後看到長長的橫向捲軸舒服的多，這裡使用了 expression，但是利用了一次載入，所以 expression 不會造成記憶體流失。當然，如果你有更好的解決方案，希望能與我交流。 代碼如下： .Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed

xmlns="http://www.w3.org/1999/xhtml">

[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

body { font-size: 0.8em; color: navy; } 　　上面的意思是為body選取器設定font-size字型大小和color字型顏色。 　　所以基本的，當它作用與HTML頁面時，在body標籤（整個視窗中的內容）之間的文字顏色是navy字型大小是0.8ems。 長度和百分比 　　CSS裡面有許多屬性值要指定單位，但有些基本單位被使用在一些屬性上，在這之前值得屬性下它們。

1、十六進位的顏色值對位元與大小寫 編寫十六進位顏色值時你可能會用小寫字母或省略成3位元，關於這寫法沒找到確實的資料證明對瀏覽器的渲染效率是否有影響，但十六進位的顏色值預設標準是大寫及6位元標註。在未知情況下不希望冒險而降低了渲染的效率。 * 不贊成 - color:#f3a; * 建議用 - color:#FF33AA; 2、display與visibility的差異

不知道家有沒有遇到過這樣的情況：在CSS控製圖片大小時，如果把圖片的寬度寫死，比如 img{width:500px;} ，固然，如果圖片寬度大於500px可以很好的控制它不讓它過大，但如果圖片寬度小於500px，比如說只有100px時，剛才的寫法會把這張圖擴大5倍顯示，顯然，這不是我們想看到的。 那麼，CSS如何可以區分對待這些圖片設定大小呢？很簡單，請看： 複製代碼

自己用個符號·來代替，卻發現怎麼顯示都比較小，後來自己研究才發現我的字型全部定義成tahoma了，只要採用“宋體”就正常了。·指令碼之家·指令碼之家·指令碼之家·指令碼之家·指令碼之家

當你覺得圖片與文字距離太接近時，就可以使用此屬性。 圖文間隔：Hspace和 Vspace 的設定 1.水平間隔：HSPACE。 例如：<IMG hspace=10 src="*.gif"> (單位也是用像素（pixel）來計算的。) 2.垂直間隔：VSPACE。 使用方法與 HSPACE 相同，在這裡不多作介紹。 例如：<IMG vspace=10 src="*.gif"> (離文字的水平距離，通常多少設一點以免靠文字太近。)

1. 檢查HTML元素是否有拼字錯誤、是否忘記結束標記 即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查一下有無錯誤。 2. 檢查CSS是否正確 檢查一下有無拼字錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼字錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼字錯誤。 3. 確定錯誤發生的位置 如果錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊後顯示恢複正常，即可確定錯誤發生的位置。 4.

這樣就存在了新的問題，目前在IE7中工作正常的網頁在IE8中會出現問題。 微軟在IE8提供三種解析頁面的模式 　　IE8 Standard Modes ：預設的最標準的模式，嚴格按照W3C相關規定 　　IE7 Standards Modes ：IE7現在用的解析網頁的模式，開起機關是在中加入 　　Quirks Modes ：IE5用的解析網頁的模式，開起機關是刪除HTML頂部的DOCTYPE聲明 　　注意：不同模式間的網頁在IE8中可以互相 frame

題目的痛點在於兩點： 垂直置中；圖片是個置換元素，有些特殊的特性。至於如何解決，下面是一個權衡的相對結構乾淨，CSS簡單的解決方案： .box { /*非IE的主流瀏覽器識別的垂直置中的方法*/ display: table-cell; vertical-align:middle; /*設定水平置中*/ text-align:center; /* 針對IE的Hack */ *display: block; *font-size: 175px;/*約為高度的0.873，200*0.873

可以通過不同規則來定義不同內容塊裡的連結樣式。類似這樣：#nav a:link或者 #main a:link或者#footer a:link。也可以定義不同內容塊中相同元素的樣式不一樣。例如，通過#main p和#sider p分別定義#main p和#sider p的樣式。從結構上講，你的頁面是由圖片、連結、列表、段落等組成的，這些元素本身並不會對顯示在什麼網路 裝置中（PDA還是手機或者網路電視）有影響，它們可以被定義為任何的表現外觀。

看圖:這種效果,甚至是三列四列的新聞模組,以前我都用table,以為比css方便,直到後來發先了a的浮動之後,原來用ul更方面,更容易控制,先來看看代碼吧: 引用:.news{} .news li{ list-style:none; clear:both} .news li a#n1{ text-decoration:none; float:left; line-height:22px;} .news li a#n2{ text-decoration:none; float:right;

[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

區別IE6與FF： background:orange;*background:blue; 區別IE6與IE7： background:green !important;background:blue; 區別IE7與FF： background:orange; *background:green; 區別FF，IE7，IE6： background:orange;*background:green

屏蔽IE瀏覽器（也就是IE下不顯示） *:lang(zh) select {font:12px !important;} /*FF的專用*/ select:empty {font:12px !important;} /*safari可見*/ 這裡select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器專屬的。 僅IE7識別 *+html {…} 當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。 IE6及IE6以下識別 * html {…}

區塊層級元素div盡量少用，其實和table一樣，嵌套越少越好，它也是會影響速度的！ ol 有序列表。 <ol> <li>……</li> <li>……</li> <li>……</li> </ol> 表現為： 1…… 2…… 3…… ul 無序列表，表現為li前面是大圓點而不是123 <ul> <li>……</li> <li>……</li> &

inline style embeded style external style user style inline style是醜陋的，它們穿梭在HTML文檔中，與HTML元素扭成一團，給Web前端開發人員造成了許多麻煩。它們往往以這樣的面目出現： <p style="color:red;">This is a paragraph.</p> embeded style比inline

因為"{"和"}"和CSS裡的 "{"與"}"衝突. 好像也不能用引號,具體沒有測試. 這樣一來,在CSS裡寫指令碼就不具備靈活了,但是如果想寫一個複雜的指令碼到CSS裡,該如何處理呢?是一個問題,經測試,可以先定義一個函數,然後在expression裡調用就行了,不過由於在CSS裡用了expression,所以,只能在IE裡運行. 一下是樣本,點擊代碼可運行. xmlns="http://www.w3.org/1999/xhtml">

點擊查看效果: xmlns="http://www.w3.org/1999/xhtml"> 以下兩個DIV的樣式基本一樣,但是第一個的外掛(理解俺的意思就行了)樣式:background-color後面加了一個 !important,所以,雖然第一個DIV行內(in line)CSS也定義了background-color,但是卻是參照外掛的background-color,其它的沒有指定 !important 的,就被行內的STYLE覆蓋掉了.