css hack 与案例

css 样式:

 

浏览器兼容性：

 

浏览器厂商:

 

w3c： ie9   遵循w3c 标准

 

ie6 ie7 ie8 firfox opera

 

hack: css的hack  

 

1.手型解决方案：

  在ie 里面  cursor:hand; 在w3c cursor:pointer

 

2.div 内容溢出

 

  overflow: auto | hidden | scroll 

 

  overflow-x: 横向

  

  overflow-y: 纵向

 

3.css属性浏览器兼容性 hacK 解决方案：

先调试符合w3c标准样式兼容性：

 

firfox  opera  ie8 ie7  ie6

 

css hack:

 

在css 属性前面 

 

_ 表示该属性样式 ie6 识别 

 

* 表示该属性样式 ie6 ie7 识别

 

*+ 表示该属性样式 ie6 ie7 识别

 

在css值后面加\9 表示 ie识别

 

在 css 属性值后添加!important  表示优先应用哪个属性

 

4.html依据浏览器显示不同的样式或html

 

 

 这里是非ie识别 

 

 

4.显示和隐藏解决方案：

 

display:block 显示

display:none 不占位隐藏

 

visibility: visible; 显示

visibility: hidden;  占位隐藏

 

 

5.定位解决方案：

 position:absolute ; 表示把当前元素从文档流拖出 所以 需要重新定位 left right  top   bottom 

当前元素对象在浏览器的x  y 等于0 

  

 

6position:relative  ; 表示把当前元素对象从正常的文档流中偏移到浏览器最左端；需要重新定位 left right  top   bottom  

相对于当前的正常位置进行流动； 需要使用left right  top   bottom  重新定位

 

 

7.div自动居中解决方案：

  margin: 0 auto;

 

8.将普通元素标签转换成块状元素对象

    display: inline-block;  横向不换行

   display: block;   具有换行

 

 

 

 

 

 

 

 

 

 

 

 

------------

图片与文字左右排版

    

    傅告诉对方公司的风格的师傅告诉对方公司的风格的施工队sgs的风格发到公司的风格上的风格

 

       img{float: left;}  /*将img 左浮动就可以了*/

 

------------

文字自动换行

 

    这是

    一个

    测试阿蒂芬 

    页面哈 

    看看

 

        span{word-break:keep-all;word-spacing: normal; display: block; float: left; }

/*关键代码在这里: word-break:keep-all;word-spacing: normal;*/

-----------------

文字在图片的上面

 

 

sadfsdafsdfasdfasfdasfdasdfasdfasdvxzvzxcv告诉对方公司的到公司

      img{z-index: -1; position: absolute; left: 100px;}

      p{z-index: 2;}

/*要使用z-index 就必须使用 position--其实就是层次关系 */

 

 

 

 

 

 

----------------

小精灵技术:同一张图片合并多张图片,通过坐标调用

 

   

     

• 首页

      

• 关于我们

       

• 产品介绍

        

• 联系我们

       

• 招贤纳仕

   

 

 

       .navBox{width: 600px; height: 42px; border: 0px solid #400040;}

        ul{margin: 0; padding: 0;}

        ul li{list-style: none; float: left; display: inline-block; width: 80px; height: 100%; line-height: 42px; margin-left: 32px; text-align: center;}

         a{text-decoration: none; font-size: 14px; font-family: inherit; font-weight: bold; width: 80px; height: 42px; line-height:42px ; display: inline-block;}

        

        .navBox ul li a{background: url('nav.gif') 0px 0px  no-repeat; }

        .navBox ul li a:hover{background: url('nav.gif') 0px -42px  no-repeat; } /*向上为正,向下为负数*/

-----------------------------

纯css 实现导航