|
您的位置: 首頁 > 網(wǎng)站資訊 > 網(wǎng)頁設(shè)計(jì)中一些CSS的元素的使用技巧 |
網(wǎng)頁設(shè)計(jì)中一些CSS的元素的使用技巧發(fā)布日期:2017/3/13
一、代碼優(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)變的邊框。 |
其他相關(guān)文章 |
|
|
|
||||||||
Copyright 2012-2025 上海蒙狼網(wǎng)絡(luò)科技有限公司 www.jnjiaoyu.cn All Rights Reserved |