zoukankan      html  css  js  c++  java
  • 如何写出兼容性很好的页面

    写出好的页面前首先你要把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; 但这种你要保证父元素以后没有可显示的元素,不然显示不了哦。

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

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

    <style type="text/css"> 
    .div1{background:#000080;border:1px solid red} 
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    /*清除浮动代码*/ 
    .clearfloat{clear:both} 
    </style> 
    <div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    <div class="clearfloat"></div> 
    </div> 
    <div class="div2"> 
    div2 
    </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

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

    6、排版结构问题

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

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

    • 层次结构要浅析,就是有上、中、下、左、中、右层的概念
    • 结构应该是先做大的,再做小的,例如网页中间有左右,最好有一个大的表示中间,然后再左,再右
    • 顺序最好是先上后下,先左后右,先外后里,先整体再局部

    7、关于定位浮动之类的

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

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

    8、CSS书写问题

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

    这多问题可直接跟我留言

  • 相关阅读:
    广域网(ppp协议、HDLC协议)
    0120. Triangle (M)
    0589. N-ary Tree Preorder Traversal (E)
    0377. Combination Sum IV (M)
    1074. Number of Submatrices That Sum to Target (H)
    1209. Remove All Adjacent Duplicates in String II (M)
    0509. Fibonacci Number (E)
    0086. Partition List (M)
    0667. Beautiful Arrangement II (M)
    1302. Deepest Leaves Sum (M)
  • 原文地址:https://www.cnblogs.com/top8/p/6202079.html
Copyright © 2011-2022 走看看