網(wǎng)頁(yè)設(shè)計(jì)中一些CSS的元素的使用技巧

一、代碼優(yōu)化問題總結(jié)：

1、削減瀏覽器兼容差異（用固定圖片代替不兼容效果，如：“圓角”屬性）

2、保證DW視圖不變形（削減框架自適應(yīng)，鎖定寬高，DW視圖無瀏覽器默認(rèn)屬性）

3、firefox中縮放不變形（float元素用背景色差做邊線，別用1px  border）

4、不同分辨率下背景變形（100%背景時(shí)，加min-width限制）

5、圖片背景上放文字進(jìn)行優(yōu)化后，如何隱藏

（1、文字層自力出去：position:absolute; 2、文字層放下面去：z-index:-1px；也別用透明色）

二、IE6兼容優(yōu)化：

1、inpit不支撐border:none（通用：input {border-width:0px;}）

2、不能繼續(xù)父屬性（使用時(shí)給具體定位具體屬性）

3、外部CSS文件不能自識(shí)別編碼（請(qǐng)按編碼保存并聲明）

4、z-index層屬性無效（用輩份提拔顯示級(jí)別）

5、內(nèi)容溢出導(dǎo)致布局變形（overflow:hidden）

6、重復(fù)字符（浮動(dòng)元素好后跟一個(gè)clear:both的div）

7、ul和li有基礎(chǔ)街高（ul樣式加font-size:0;）

8、浮動(dòng)元素有雙外邊距（浮動(dòng)元素加display:inline）

9、3像素問題（給顯示元素保留至少3px的余地，即它看似不占地方——定位走了）余地計(jì)算公式：外margin×2+內(nèi)margin≤總空間－3px鄰邊數(shù)。

10、少用不用浮動(dòng)border（其實(shí)我也糾結(jié)該用什么了）

三、去掉在IE6中默認(rèn)的左邊距IE中默認(rèn)有padding-left：就算用!important來做hack（修正），將它設(shè)置為0，仍然存在左邊距的，（IE默認(rèn)項(xiàng)目符號(hào)在內(nèi)部，而是為項(xiàng)目符號(hào)預(yù)留位置）

解決的四種方法：

1、list-style-position:outside

2、設(shè)置寬度后再定義vertical－align:bottom

3、定義寬度外面再加一個(gè)寬度讓不產(chǎn)生空白行距。

4、List-style：none;

在做設(shè)計(jì)的時(shí)候，無論用什么效果，要做到誰的問題誰解決。意思就是：假如給li邊框效果，當(dāng)鼠標(biāo)經(jīng)過變邊框顏色時(shí)無論里面的a 是否與li相同寬高，也不能用a來顯示轉(zhuǎn)變的邊框。

網(wǎng)頁(yè)名稱：網(wǎng)頁(yè)設(shè)計(jì)中一些CSS的元素的使用技巧
標(biāo)題路徑：http://www.bm7419.com/news41/285891.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、全網(wǎng)營(yíng)銷推廣、商城網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)建站、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)