(一)常用的CSS命名規則
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面週邊控制整體佈局寬度：wrapper
左右中：left right center
登錄條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子功能表：submenu
搜索：search
友情連結：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標籤頁：tab
文章列表：list
提示資訊：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
註冊：regsiter
狀態：status
投票：vote
合作夥伴：partner
在 css 裡面，如果子元素 div 設float:left
在Firfox底下父元素div 不會隨著自動更改高度
<div id="aa">
<div id="bb">
</div>
</div>
#aa{background:#ffffff;}
#bb{float:left;}
之前都是在最底下，塞一個空的<div style="clear:both"></div>
但今天發現更簡單的方法似乎可行
就是在父div css裡面加一個 overflow:hidden;
FF IE6 IE7 測試皆正常
#aa{background:#ffffff; overflow:hidden;}
資料來源：http://goo.gl/sjhWi
第一種 div 置中方法，適用於 FireFox、Chrome、Opera
margin: 0px auto;
第二種 div 置中方法，IE8 適用
要在 IE8 成功置中可以用兩個 div 相互合作
外面的 div 要設定 text-align:center
讓包在裡面的 div 可以順利置中
<div style="text-align:center;">
<div style="margin:0 auto;border: 2px solid blue; width:150px;">這裡是文字</div>
</div>
第三種 div 置中方法，適用於 IE7
*margin: 0px auto;
第四種 div 置中方法，適用於 IE6
_margin: 0px auto;
補充：
body {
text-align: center; /*FOR IE5 專用才會置中*/
}
由於在body中有設定text-align: center;
這時文字會置中(被繼承)
所以在 container需在加入text-align: left;
才會使文字靠左編排
修改如下
#container
{
margin: 0 auto;
width: xxxpx;
text-align: left;
}
資料來源：網路轉載
FB分享時可以抓到網頁縮圖的方法
http://cloud.zoes.tw/index.php/web-design/33-fb
將網頁分享至Facebook時，會將網頁中所有圖片都變成分享時的預覽縮圖(包括廣告圖)
指定分享時的預覽縮圖的方式：
在<head> </head>之間加入
<link rel="image_src" href="name.jpg" />
每每遇到要使用網路ATM進行轉帳時
會發現在執行安裝Active X控制項時整個畫面動彈不得
最後只能強制關閉瀏覽器
一直煩腦的問題終於找到解決方案了
以下是 所發表的文章：
在IE8 中，您使用晶片金融卡讀卡機並且使用網路ATM的功能。剛開始一切正常，但是在可能會跳出第二個視窗(驗證或是第二代金融讀卡機要輸入密碼)的時候，IE8可能會整個停止回應，或是完全沒有任何接下來的動作。
問題原因：
由於IE8的新開視窗或是新開分頁，基於穩定性的理由，預設將會開啟額外的Process來處理各分頁的動作，若網路銀行的Active X Control設定需要獨佔晶片卡的連線時，另外一個分頁的Process將無法存取晶片卡讀卡機，因而導致這個問題。
建議做法：
如果我們暫時無法等到網路銀行更新相關的作業模式(就是網路銀行修改WebATM程式來相容IE8)，使用者可以透過一個簡單的方案來暫時解決這個問題：
問題：
今天本想用 Flash 圖片來作一個圖案的連結，於是在圖案的按鈕元件上加上了 ActionScript 的動作，如下
on ( release ) {getURL("/searchfull.php");}
結果是怎麼試，怎麼點就是沒有動作！於是修改了一下目標框架(Frame) 試看看：
on ( release ) {getURL("/searchfull.php","_blank");}
心想該不會目標框架是必填吧！於是改上了原網頁 _self 自身框架：
on ( release ) {getURL("/searchfull.php","_self");}
聽說這是發生 Flash Player 9 之後我猜可能是基於安全性的理由，除非網頁端有允許，否則 Flash 對 Script 作存取的動作，也無法透過 Javascript 達成連結的作用，因此才會造成連結無效。所以只要將網頁端設定為允許存取Script 就可以解決了呀！
|
HTML Code
|
無論是 CSS 下拉式目錄，或是 Javascript 製作出來的彈出式清單，一旦遇到 Flash 時，就被 Flash 遮蓋住，這個問題困擾了不少設計人員，原則上有兩種解決方法，一種是在圖層中使用 IFRAME，另一種則是改變 Flash 嵌入方式。
這裡談的是第二種方式，以swfobject方式嵌入，語法為：
|
<script type="text/javascript" src="images/swfobject.js"></script> |
步驟是先連結 swfobject.js 這個檔案，檔案的官方下載位置是：
壓縮檔中檔案很多，是範例及說明，要用到的只有 swfobject.js一個檔案。
然後宣告一個放置 flash 的區塊，這個例子的識別名稱為 flashcontent，接下來，建立 FlashObject 物件，語法是：
| var fo=new FlashObject(swf檔,識別元,寬度,高度,Flash版本,背景色); |
如果需要加其他屬性，例如透明，則使用 fo.addParam 加入，語法為：
| fo.addParam("wmode", "transparent"); |
最後，把物件寫到 flashcontent 區塊中，語法為：
| fo.write("flashcontent"); |
如此就完成了，原文刊載於：
http://www.adobe.com/devnet/flash/articles/swfobject.html
原因和網頁元件的特性有關，如果要把網頁元件分類，其中有一種分類法為：可定位(Positional)和不可定位(non-Positional)，什麼意思呢？網頁中呈現的元件，例如段落、表格等，是由 HTML 創建出來的，但部份我們熟知的元件，例如表單，卻不是由 HTML 創建出來，而是作業系統本身建立，HTML 只不過是叫過來用(call)，類似的元件還有 Java Applet、ActiveX、Flash 和一些 plug-in等。
講白一點，HTML 是一個二維空間，只上下左右的概念，有了 CSS 之後，開始有三度空間的概念，但，前述提到的這些元件，既非擺在二維空間裡，也不是擺在三度空間中，到底擺那？天知道！所以 z-index 失效，基本上，這應屬於瀏覽器的問題，這裡有一篇專文論述：
http://www.webreference.com/dhtml/diner/seethru/index.html
同樣的情況，還常見於下拉表單突破彈出選單，但這個問題，瀏覽器本身已經解決了，像 FireFox 上就不會發生，至於 IE，我就沒空想知道他們改正沒。
這算是個老問題了，199X 年時就被廣泛討論，最主要是用 Javascript 製作的動態下拉功能表被表單中的下拉清單穿透造成的，當時急壞了一些人，後來發現，用 IFRAME 這個不可定位元件來以毒攻毒可以解決這問題，原理就是把 IFRAME 放到圖層中，如此一來，管你底下是表單的下拉清單還是 Flash，一律可以蓋過去。作法就有點囉嗦，這裡就不提了。
卜維丰 6/3 07'
以上是轉載並節錄自卜維丰 的blog http://audi.tw/Blog/webDesign/Flash.swfobject.js.asp
有時候需要在flash上蓋一張圖片時，會用到 position:absolute 的技巧，卻發現圖片還是被flash蓋住了，原來是在默認的情況下，Flash應用程序都是優先於其它HTML標籤，因此Flash會顯示在最上方。
解決這個問題的方法
只要在<OBJECT> </ OBJECT>內加上<param name="wmode" value="Opaque"。/>
上述的方式主要針對 IE
其它瀏覽器則需要另外在<embed>裡新增 wmode ="Transparent"
Asp.Net C# 在資料繫結時
發現DB裡的資料數字太長
在web上不會換行
因此嘗試了以下定義css的方式
word-break:break-all;
但發現在火狐底下卻無法執行
原來是此語法是 IE Only
因此換成 white-space:nowrap 在FireFox底下就可以了 (But IE又不行了=..=)
參考資料：http://www.blueshop.com.tw/board/show.asp?subcde=BRD20081031161914RZF
補充：
可解決相容性問題了→ http://fanyc0124.wordpress.com/2010/12/02/%E5%BC%B7%E5%88%B6%E6%8F%9B%E8%A1%8C/
http://www.jx828.com/mb/divcssjiaocheng/16639.html
今天放上SWF後發現在火狐瀏覽該網頁時下方會多出一片空白
經由阿狗大神查詢
發現可能是因為「Object」標籤造成的問題
以下是查詢的結果：
有時候Firefox會把<Object>視為「行內(inline)」元素，也就是當作一般的文字來看待；既然是文字，就會有文字應該有的高度、大小等實體空間的存在。
如果我們把行高與字體大小皆設為0也可解決這個問題！不過，還有另一個方法，就是把Object的display屬性設成是區塊(block)，只要用CSS指定如下即可：
object{
display:block;
}
設為區塊屬性(display:block)之後，該區域在Dreamweaver 8.0的設計模式中會產生雙倍高度的怪異現象…也就是明明只放了一個Flash元件，但Dreamweaver看起來卻是兩個一樣的東西上下黏在一起！
