网页设计中一些CSS的元素的使用技巧

2023-10-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来显示转变的边框。

网页名称:网页设计中一些CSS的元素的使用技巧
标题路径:https://www.cdcxhl.com/news41/285891.html

成都网站建设公司_创新互联,为您提供网站改版全网营销推广商城网站网站建设外贸建站云服务器

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

商城网站建设