Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • 改善网页加载

    post by onelong / 2010-11-8 18:52 Monday [html+css]

    事实上浏览器加载网页并不是多线程的,我做个小测试啦!看看下面代码啦!

    代码一:

    阅读全文>>

  • 怎样自定义html标签呢?

    post by onelong / 2010-10-17 6:58 Sunday [html+css]

    看到html5新增了<header>,可惜呀ie不支持,又是一大遗憾呀!下面看看怎样自定义html标签的吧

    先看代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...

    阅读全文>>

  • html5 progress初体验

    post by onelong / 2010-10-15 21:01 Friday [html+css]

    先看看progress的效果吧!

    点击查看原图

    很漂亮吧!的确是这样,这就是Html5的progress

    那么怎样实现的呢?看看下面简单的代码啦!

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; ...

    阅读全文>>

    附件下载:
    progress.rar 394字节

  • Css优先级的原理

    post by onelong / 2010-10-14 5:00 Thursday [html+css]

     

     

    废话不多说,首先看看下面的代码吧

    //demo.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html...

    阅读全文>>

  • 网页盒子模型

    post by onelong / 2010-3-31 21:27 Wednesday [html+css]

    网页盒子模型存在两种:
          1:标准W3C盒子模型; 2:IE盒子模型(IE浏览器默认的模型)。
           在两种不同模型网页里,定义了相同CSS属性的元素显示效果是不一样的,下面就用公式来区分这两种不同的盒子模型。
          1:标准W3C盒子模型
           宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)
            高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)
            2: IE盒子模型
            宽=width+(border-left)+(border-right)            
            高=height+(border-top)+(border-bottom)
            该模型是IE浏览器默认的盒子模型,当然也可以对其进行更改,在页面最上方加如下代码:
           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • li的背景问题

    post by onelong / 2009-12-1 20:53 Tuesday [html+css]

    ie6不支持li标签的背景设定是总所周知的事啦!事实上可以让你的ie6支持这项功能的!这样在你做导航栏的时候就很方便拉!
    怎样让你的ie6支持li的背景呢?
    这个兼容问题当然要用javascript来解决拉
    li.style.background="url(images/links_h.gif) no-repeat #C9E0EC";
    当然你可以写一个函数来实现解决这个问题啦!

  • overflow的使用

    post by onelong / 2009-12-1 20:44 Tuesday [html+css]

    最近在搞那个可爱的档案馆网站,也是第一次使用div的overflow属性,原来overflow很有用.

    overflow属性有四个值:visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x,它们很少被采用。
    原来可以对水平和垂直方向都分别设定的
    hidden是ie6不支持的
    其他的都兼容
     

    阅读全文>>

  • IE6/IE7/IE8三个版本的CSS兼容速查手册

    post by onelong / 2009-11-17 21:23 Tuesday [html+css]

  • css技巧

    post by onelong / 2009-10-8 17:35 Thursday [html+css]

    1.vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。
    2.设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
    #float{
    float:left;
    margin:5px;/*IE下理解为10px*/
    display:inline;/*IE下再理解为5px*/
    }
    3.IE不认得min-这个定义
    4.float的div闭合;清除浮动;自适应高度。.clear{ clear:both;}
    5.a链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。
    6.如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略。div{margin:30px!important;margin:28px;}
    7.使用IE专用的条件注释
    <link rel=”stylesheet” type=”text/css” href=”css.css” />
    <!–[if IE 7]>
    <link rel=”stylesheet” type=”text/css” href=”ie7.css” />
    <![endif]–>

    <!–[if lte IE 6]>
    <link rel=”stylesheet” type=”text/css” href=”ie.css” />
    <![endif]–>
     

  • CSS HACK

    post by onelong / 2009-10-8 15:01 Thursday [html+css]

    .class{
    color:#FFF;/* FF,OP,IE8 */
    [;color:#0F0;]/* Sa,CH */
    *color:#FF0;/* IE7 */
    _color:#F00;/* IE6 */
    }
    .class{
    background-color:#332200;/* 所有浏览器*/
    }
    html* .class{
    background-color:#FF00FF;/* Sa IE7 CH */

    *+html .class{
    *background-color:#0000FF;/* IE7 */
    }

    * html .class{
    background-color:#00FFFF;/* IE6 */
    }

    html*~/**/body .class{
    background-color:#055000;/* IE8 */
    }

    @media all and(min-width:0){
    .class{
     background-color:#FF5500;/* OP10版本以上无效  */
       }
    }

  • css兼容总结

    post by onelong / 2009-10-5 6:47 Monday [html+css]

    1.ul标签中FF中有个padding值,却没有margin值,而在IE中正好相反 
    解决办法:将ul的padding和margin都设为0(也可以不是0)如:padding:0;margin:0;list-style:none; 
    另外form默认在IE中也会有margin值,所以最好也将其margin和padding设为0
    在很多时候我们会这样设置
    *{padding:0px;
       margin:0px}
    为什么呢?由于各种浏览器对标签的解析的默认值不同,以上定义可以格式化html,实现兼容!
    2.ie中cursor:hand可以将鼠标设为手形,FF不行,
    解决:都用cursor:pointer 
    3.居中问题 
    ie需要将父窗口:text-align:center;而ff则是margin-left:auto;margin-right:auto;
    4.IE和FF盒模型有区别,所以有需要特殊设置 
    IE Box的总宽度是: width+padding+border+margin宽度总和
    FF Box的总宽度就是 width的宽度,padding+border+margin的宽度在含在width内。
    FF: 支持 !important(优先解析), IE 则忽略, 可用 !important 为 FF 特别设置样式
    width:600px !important;//这个要放在前面才行 
    width:598px; 
    另外:传说IE7会奇怪的支持!important,试过却不行;
    5. IE6中在设置float的div中margin会加倍,解决办法:div里面加上display:inline;
    6.透明滤镜:
    IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=30); 
    FF:opacity:0.3; 
    或者: 
    IE:filter:alpha(opacity=60);  
    FF:-moz-opacity:0.6;/*已过时,用上面的opacity代替*/ 
    7.禁用选择
    IE:使用js,onselectstart="return false;"; 
    FF:使用CSS,-moz-user-select:none
    8:圆角:
    FF中:-moz-border-radius:4px;