建站
咨詢
售后
建站咨詢
新聞中心
本文和大家重點討論一下DIV CSS實例教程中的要點，此文為DIV CSS實例教程，還有DIV CSS實例之常見錯誤及DIV CSS實例初級常見錯誤，希望對你的學(xué)習(xí)有所幫助。
10年積累的成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有大英免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
DIV CSS實例教程要點總結(jié)
從事頁面重構(gòu)工作，從局部細節(jié)到頁面的整合，然后再看整體系統(tǒng)的結(jié)構(gòu)。在各個步驟，都有不同的處理技巧和重構(gòu)的思想方式。此文為DIV CSS實例教程，還有DIV CSS實例之常見錯誤及DIV CSS實例初級常見錯誤，原創(chuàng)總結(jié)了自己犯的一些錯誤，和細節(jié)處理的問題，以便讓您更靈活的掌握這門技術(shù)，提高制作效率和可用性。認真閱讀，我想你會有收獲的。
◆DIV CSS實例教程：文檔類型（DOCTYPES）對瀏覽器影響
定義文檔類型：
1、所有單位屬性必須指明 例如：{font-size:3px; margin:5px;}；（當(dāng)值為0時可不指定單位)
2、影響盒模型，指定寬度和高度的時，要減去Padding，如一個DIV的顯示高度為200，而其Padding為：10px ，則div的Height不能定為200px，而應(yīng)該是：180px;
未定義文檔類型：
1、所有的單位默認為px，因此當(dāng)不指定時等價于px,例如margin:5;。 （當(dāng)值為0時可不指定單位)
2、指定寬度和高度的時候，Padding不影響
3、所有IE版本支持統(tǒng)一。
◆DIV CSS實例教程：浮動要點
用更合理的方式對浮動進行控制。
1、IE6下浮動浮動方向和magrin方向一致，且浮動的元素是塊元素時.會引發(fā)雙倍的magrin值~此時應(yīng)用display:inline；可解決浮動驅(qū)動margin的值。我以前應(yīng)用IE6 hack "_"不合理；
2、clear 清除浮動各個適應(yīng)代碼：.clear{clear:both;font-size:1px;width:1px;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0}/*ie and firefox1.5*/；
3、盒模型內(nèi)嵌套浮動，解決高度的自動伸展：
底部加
IE:height:1%;FF:.runrunrun:after{ /*在pelement這個元素的后邊*/ content: "." /*寫入一個點*/display:block;/*塊級布局方式*/clear:both; /*清除左右浮動*/ height:0;visibility:hidden;/*不可見*/ }
◆DIV CSS實例教程：圓角樣式實現(xiàn)幾種方法
頁面最常用的設(shè)計圓角的方式，重要在擴展性和自適應(yīng)性。例子 biaoshi.rar (1.07 KB)
biaoshi.rar (1.07 KB)
獲取附件：runner.web#gmail.com
1、用position: relative; 和position: absolute;用圓角圖片進行絕對定位；在設(shè)置border:1px solid #ccc; 應(yīng)用margin負值進行定位，如：margin:-1px;
2、應(yīng)用div{border:0 solid #A5DA94;font-size:0;height:1px;margin:0 1px;overflow:hidden;}；更愛maring值，和border-width:進行漸變效果；
◆DIV CSS實例教程：玩轉(zhuǎn)表格
附件:表格的應(yīng)用10例子 web-table.rar (65.93 KB) web-table.rar (65.93 KB)
獲取附件：runner.web#gmail.com
1、根據(jù)需求利用表單各個元素：thead,tfoot,tbody,caption（說明）,col,th,summary(摘要)
2、IE6不支持CSS控制背景變色。#box-table-a tr:hover td(IE6不支持非A的hvoer偽類)
◆DIV CSS實例教程：網(wǎng)頁文字設(shè)置
1、字體全部是E文時，font-family: Arial, Helvetica, sans-serif; 否則特殊符號顯示變形。（需要定義內(nèi)容為英文字體）
2、UTF-8模式下，宋體容易變成亂碼，原因在于編輯器使用時，要注意重新輸入。
3、文章列表在使用“?”時，font-family應(yīng)該設(shè)置為宋體（）
4、對字體大小單位的定義為px，有一定的局限性。（從用戶體驗講 用EM***）
◆DIV CSS實例教程：常用瀏覽器HACK
附件:CSS hack瀏覽器兼容一覽表
1、“_property:value” 適應(yīng)IE6一下
2、“*property:value” 適應(yīng)所有IE
3、“*+html div ” 適應(yīng)IE7 ie5
◆DIV CSS實例教程：布局隱藏的技巧
1、使用text-indent的負值;例如{text-indent:-9999px;} （值不用設(shè)置太大 太大會影響渲染速率）
2、使用display:none,將和模型整體隱藏。不影響其它樣式。
3、超出的部分隱藏;可以設(shè)置{overflow:hidden;}；
4、使用font設(shè)置超小字體，達到隱藏內(nèi)容的目的，例{font-size:0;}。
◆DIV CSS實例教程：DIV自適應(yīng)布局方法
1、背景的合理應(yīng)用，從視覺達到自適應(yīng)的目的；
2、自動居中顯示技巧：父級別設(shè)置：text-align:center;字模型設(shè)置：width:*px; margin:0 auto;
3、min-height IE6不支持（其實再IE6中height的值即為最小高度.），需要hack設(shè)置高度。例：_height:*px; IE6超出高度可自動擴展。
網(wǎng)站題目：DIVCSS實例教程要點總結(jié)
URL標題：http://www.dlmjj.cn/article/ccciodp.html
