|
您的位置: 首頁 > 網站資訊 > 網頁設計中一些CSS的元素的使用技巧 |
網頁設計中一些CSS的元素的使用技巧發布日期:2017/3/13
一、代碼優化問題總結: 1、削減瀏覽器兼容差異(用固定圖片代替不兼容效果,如:“圓角”屬性) 2、保證DW視圖不變形(削減框架自適應,鎖定寬高,DW視圖無瀏覽器默認屬性) 3、firefox中縮放不變形(float元素用背景色差做邊線,別用1px border) 4、不同分辨率下背景變形(100%背景時,加min-width限制) 5、圖片背景上放文字進行優化后,如何隱藏 (1、文字層自力出去:position:absolute; 2、文字層放下面去:z-index:-1px;也別用透明色) 二、IE6兼容優化: 1、inpit不支撐border:none(通用:input {border-width:0px;}) 2、不能繼續父屬性(使用時給具體定位具體屬性) 3、外部CSS文件不能自識別編碼(請按編碼保存并聲明) 4、z-index層屬性無效(用輩份提拔顯示級別) 5、內容溢出導致布局變形(overflow:hidden) 6、重復字符(浮動元素好后跟一個clear:both的div) 7、ul和li有基礎街高(ul樣式加font-size:0;) 8、浮動元素有雙外邊距(浮動元素加display:inline) 9、3像素問題(給顯示元素保留至少3px的余地,即它看似不占地方——定位走了)余地計算公式:外margin×2+內margin≤總空間-3px鄰邊數。 10、少用不用浮動border(其實我也糾結該用什么了) 三、去掉在IE6中默認的左邊距IE中默認有padding-left:就算用!important來做hack(修正),將它設置為0,仍然存在左邊距的,(IE默認項目符號在內部,而是為項目符號預留位置) 解決的四種方法: 1、list-style-position:outside 2、設置寬度后再定義vertical-align:bottom 3、定義寬度外面再加一個寬度讓不產生空白行距。 4、List-style:none; 在做設計的時候,無論用什么效果,要做到誰的問題誰解決。意思就是:假如給li邊框效果,當鼠標經過變邊框顏色時無論里面的a 是否與li相同寬高,也不能用a來顯示轉變的邊框。 |
其他相關文章 |
|
|
|
|||||||||
Copyright 2012-2025 上海蒙狼網絡科技有限公司 m.aqdzp.cn All Rights Reserved |