如何写出兼容性很好的页面

开发
通常情况下,不同类型的网站都去认认真真的排版后,对前端就有一定的掌握程度,对写静态页面问题就不大了。至于个数嘛,3个完整网站以上。

写出好的页面前首先你要把HTML4与HTML5学会了,然后CSS,CSS3也有一定的掌握。

通常情况下,不同类型的网站都去认认真真的排版后,对前端就有一定的掌握程度,对写静态页面问题就不大了。至于个数嘛,3个完整网站以上。

提醒:如果要写出非常好的页面,js是必不可少的,这对初学前端的人来说,就有点难度了,但也别胆怯,按照学习的先后进度来学习,先学HTML+CSS,再学习HTML5+CSS3,学到一定程序后,再去接触javascript,我相信就算是自学,HTML+CSS 2个月左右,javascript一个月,肯定是能学出来的。

如果上面的还不会,就去学习一下吧:HTML教程、HTML5教程、CSS教程、CSS3教程、javascript教程。

说多了,接下来说一下如果写出兼容性好的网页:

1.文档声明不可少:<!doctype>

其实这跟 WCAG 根本上连不上什么直接关系,但为了一个兼容性更好,特别是向后兼容的页面,必须要把这个东西写上:

<!doctype>

2.有兼容性标签的尽量不要用

学习的过程当中你就已经有些兼容性的了,如果要用,除飞你只想让该标签的效果只在某些浏览器里面有效果,特别是H5,现在好些标签都没有统一在所有浏览器有效。

3、写CSS之前一定要先清格式

清除标签格式是必须的,因为大部分标签都有兼容性,但又必须使用,例如ul标签在ie6,7下默认是有外边距的,在ie8,火狐,谷歌下默认有内边距。

4、常见浏览器bug要避免

例如:在嵌套div中,如果外层div没有设置边框,内层div的margin-top会无效,它会直接作用到外层DIV上(也就是外层div margin-top的效果了)

5、子元素浮动,父元素默认包不住子元素的情况

这种情况一般用如果方法处理:

1、给父元素加overflow:hidden; 但这种你要保证父元素以后没有可显示的元素,不然显示不了哦。

  1. <style type="text/css">  
  2. .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}  
  3. .div2{background:#800080;border:1px solid red;height:100px;width:98%;}  
  4. .left{float:left;width:20%;height:200px;background:#DDD}  
  5. .right{float:right;width:30%;height:80px;background:#DDD}  
  6. </style>  
  7. <div class="div1">  
  8. <div class="left">Left</div>  
  9. <div class="right">Right</div>  
  10. </div>  
  11. <div class="div2">  
  12. div2  
  13. </div> 

2、在***一个浮动子元素的后面加一个清浮动的元素

  1. <style type="text/css">  
  2. .div1{background:#000080;border:1px solid red}  
  3. .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}  
  4. .left{float:left;width:20%;height:200px;background:#DDD}  
  5. .right{float:right;width:30%;height:80px;background:#DDD}  
  6. /*清除浮动代码*/  
  7. .clearfloat{clear:both}  
  8. </style>  
  9. <div class="div1">  
  10. <div class="left">Left</div>  
  11. <div class="right">Right</div>  
  12. <div class="clearfloat"></div>  
  13. </div>  
  14. <div class="div2">  
  15. div2  
  16. </div> 

3、父级div定义 伪类:after 和 zoom

/*清除浮动代码*/

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1} 

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题 4、父元素也浮动 5、父级div定义 overflow:auto 6、父级div定义 display:table

  1. <style type="text/css">  
  2. .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}  
  3. .div2{background:#800080;border:1px solid red;height:100px;width:98%;}  
  4. .left{float:left;width:20%;height:200px;background:#DDD}  
  5. .right{float:right;width:30%;height:80px;background:#DDD}  
  6. </style>  
  7. <div class="div1">  
  8. <div class="left">Left</div>  
  9. <div class="right">Right</div>  
  10. </div>  
  11. <div class="div2">  
  12. div2  
  13. </div> 

6、排版结构问题

要想网站兼容性好,就好比建立房子,要想房子建得牢固,框架牢固才是根本,所以说要想网站兼容性好,框架结构一定要好,这样扩展性也好,前台后台都一个道理。

前台的框架应该怎么建立呢,我觉得可以从如下方面注意:

  • 层次结构要浅析,就是有上、中、下、左、中、右层的概念

  • 结构应该是先做大的,再做小的,例如网页中间有左右,***有一个大的表示中间,然后再左,再右

  • 顺序***是先上后下,先左后右,先外后里,先整体再局部

7、关于定位浮动之类的

有些同学排版的时候,当结构出现偏差的时候,就随意给元素加定位或是浮动属性,突然间发现好了,只能说是达到他所认为是视觉效果了,但网页兼容性好不好呢,自己就不得而知了。

这就有点类似于用杀猪刀杀鸡,大材小用了,而且用得非常不合适,所以说,该用什么的什么再用什么,不要动不动就定位呀,浮动什么的。

8、CSS书写问题

尽量使用父子关系去定义,例如:#top .left img{},以后这样扩展性也好,不会出现新class="left"与这个left冲突,只要id不要定义重复就OK。

责任编辑:张燕妮 来源: 博客园
相关推荐

2023-04-17 19:43:54

兼容性测试软件测试

2020-07-15 08:17:16

代码

2010-08-17 16:08:29

IE8兼容性视图

2012-05-16 11:30:39

2012-01-04 10:45:01

2009-03-07 09:49:07

Windows 7兼容性

2016-11-25 13:50:15

React组件SFC

2017-03-15 13:41:16

数据库SQL调试

2013-06-07 14:00:23

代码维护

2020-05-11 15:23:58

CQRS代码命令

2021-09-01 08:55:20

JavaScript代码开发

2021-11-30 10:20:24

JavaScript代码前端

2011-10-18 10:34:53

ibmdwSQLCLPPlus

2014-11-04 14:33:33

WebService

2010-03-05 17:09:18

2023-03-24 07:31:58

Oracle兼容性产品

2011-08-16 15:17:44

IOS SDK

2021-12-27 16:22:19

鸿蒙HarmonyOS应用

2022-02-08 19:33:13

技巧代码格式

2022-02-17 10:05:21

CSS代码前端
点赞
收藏

51CTO技术栈公众号