|
DreamWeaver CS3網(wǎng)頁(yè)制作中的CSS布局規則。
CSS文件的鏈接方式
1、附加鏈接：外部CSS
2、導入CSS：常用應用多個(gè)CSS文件時(shí)，將多個(gè)CSS導入一個(gè)CSS文件中
CSS規則定義有三種
1、類(lèi)比如“.RedText”、“.BlueText”和“.BigText”等等
2、標簽針對原有HTML標簽做的重新CSS定義
3、高級偽類(lèi)、定義了ID的元素，以及綜合性定義
CSS規則的應用
1、只有“類(lèi)”樣式才需要應用，class=”xxxx”。任何元素都可以應用類(lèi)。
2、class與id的區別
3、標簽應用一般對于“body”標簽一次性使用，對于諸如“l(fā)i”、“td”等在頁(yè)面中重復性比較大的標簽不推薦定義。
4、高級多運用，定義“#id li”比定義“l(fā)i”要好得多。
CSS規則的執行順序
1、按照CSS代碼的執行先后順序
2、如果有重復的規則，按照后執行的定義
3、最終規則是多個(gè)定義規則的綜合
重點(diǎn)：高級規則定義
1、對于不同表格的文字樣式定義。(不同表格使用不同ID、使用類(lèi)樣式定義)
2、一頁(yè)中的多種超級鏈接樣式定義
3、多個(gè)相同規則不同對象的CSS共同定義
4、對于同一對象定義的多種CSS方式考慮哪種更科學(xué)(擴展性和代碼精簡(jiǎn)性)
教你快速定位到復雜的CSS BUG問(wèn)題
相信大家對于常見(jiàn) CSS BUG 的處理已經(jīng)相對比較熟悉，例如：IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin
Bug 等等。但時(shí)常我們也會(huì )碰到復雜的 CSS BUG 問(wèn)題，所謂“復雜”實(shí)質(zhì)是指觸發(fā)的條件很復雜，而“BUG” 也并非指一定是瀏覽器的 BUG 。對于此類(lèi)問(wèn)題，我們首先要解決的是如何定位到問(wèn)題，只有快速的定位到問(wèn)題，才能更好的解決問(wèn)題。
對于快速定位，個(gè)人的經(jīng)驗處理一般如下(基本可以定位到我在 淘寶 遇到的 90% 以上的復雜 CSS BUG 問(wèn)題)：
1、檢查頁(yè)面的標簽是否閉合
不要小看這條，也許折騰了你兩天都沒(méi)有解決的 CSS BUG 問(wèn)題，卻僅僅源于這里。畢竟頁(yè)面的模板一般都是由開(kāi)發(fā)來(lái)嵌套的，而他們很容易犯此類(lèi)問(wèn)題。
快捷提示：可以用 Dreamweaver 打開(kāi)文件檢查，一般沒(méi)有閉合的標簽，會(huì )黃色背景高亮。
2、樣式排除法
有些復雜的頁(yè)面也許加載了 N 個(gè)外鏈 CSS 文件，那么逐個(gè)刪除 CSS 文件，找到 BUG 觸發(fā)的具體 CSS 文件，縮小鎖定的范圍。
對于剛才鎖定的問(wèn)題 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發(fā)樣式定義，甚至是具體的觸發(fā)樣式屬性。
3、模塊確認法
有時(shí)候我們也可以從頁(yè)面的 HTML 元素出發(fā)。刪除頁(yè)面中不同的 HTML 模塊，尋找到觸發(fā)問(wèn)題的 HTML 模塊。
4、檢查是否清除浮動(dòng)
其實(shí)有不少的 CSS BUG 問(wèn)題是因為沒(méi)有清除浮動(dòng)造成的。養成良好的清除浮動(dòng)的習慣是必要的，推薦使用 無(wú)額外 HTML 標簽的清除浮動(dòng)的方法(盡量避免使用overflow:hidden;zoom:1 的類(lèi)似方法來(lái)清除浮動(dòng)，會(huì )有太多的限制性)。
5、檢查 IE 下是否觸發(fā) haslayout
很多的 IE 下復雜 CSS BUG 都與 IE 特有的 haslayout 息息相關(guān)。熟悉和理解 haslayout 對于處理復雜的 CSS BUG 會(huì )事半功倍。
快捷提示：如果觸發(fā)了 haslayout，IE 的調試工具 IE Developer Toolbar 中的屬性中將會(huì )顯示 haslayout
值為 -1。
6、邊框背景調試法
故名思議就是給元素設置顯眼的邊框或者背景(一般黑色或紅色)，進(jìn)行調試。此方法是最常用的調試 CSS BUG 的方法之一，對于復雜 BUG 依舊適用。經(jīng)濟實(shí)惠還環(huán)保^^
最后想給大家強調一點(diǎn)的是，養成良好的書(shū)寫(xiě)習慣，減少額外標簽，盡量語(yǔ)義，符合標準，其實(shí)可以為我們減少很多額外的復雜 CSS BUG，更多的時(shí)候其實(shí)是我們自己給自己制造了麻煩。希望大家遠離 BUG ，生活越來(lái)越美好。
|
嘉興雷鳥(niǎo)是一家集企業(yè)軟件開(kāi)發(fā)，WEB網(wǎng)站建設，移動(dòng)APP制作等綜合型的互聯(lián)網(wǎng)公司，為嘉興顧客提供一站式的企業(yè)軟件開(kāi)發(fā)，安卓app開(kāi)發(fā)，ios開(kāi)發(fā)服務(wù)，同時(shí)為嘉興企業(yè)提供全面移動(dòng)互聯(lián)軟件技術(shù)解決方案，是嘉興知名的綜合型APP軟件外包開(kāi)發(fā)公司。根據前期調研方案和客戶(hù)實(shí)際需求，以專(zhuān)業(yè)獨到的設計理念、精益求精的技術(shù)精神、嚴格完善的品控系統，為嘉興每一位客戶(hù)提供專(zhuān)屬的移動(dòng)互聯(lián)軟件技術(shù)解決方案。經(jīng)過(guò)不斷積累，嘉興雷鳥(niǎo)陸續推出視頻直播APP、電商商城APP、P2P網(wǎng)貸APP、智能硬件APP開(kāi)發(fā)、移動(dòng)APP開(kāi)發(fā)、微信公眾平臺開(kāi)發(fā)、一元購APP、智慧社區服務(wù)APP、生活服務(wù)O2O系統APP等各類(lèi)APP產(chǎn)品，為嘉興各行企業(yè)向移動(dòng)互聯(lián)網(wǎng)轉型奠定了堅實(shí)基礎。在激烈的市場(chǎng)競爭中，嘉興雷鳥(niǎo)創(chuàng )造了嘉興軟件定制開(kāi)發(fā)行業(yè)的卓越口碑，是具有更高品質(zhì)的移動(dòng)互聯(lián)網(wǎng)軟件技術(shù)定制服務(wù)商。
