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
<!--[if IE]> 这里是ie 识别 <![endif]-->
<!--[if !ie]><!--> 这里是非ie识别 <!--<![endif]-->
<!--[if ie 6]> <link rel="stylesheet" href="2.css" type="text/css" /> <![endif]-->
<!--[if ie 7]> <link rel="stylesheet" href="3.css" type="text/css" /> <![endif]-->
<!--[if ie 8]> <link rel="stylesheet" href="1.css" type="text/css" /> <![endif]-->
<!--[if !ie]><!--><link rel="stylesheet" href="4.css" type="text/css" /><!-- <![endif]-->
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; 具有换行
------------
图片与文字左右排版
<div style="width: 600px; height: 400px; border: 1px solid red;">
<img src="1.png" />
傅告诉对方公司的风格的师傅告诉对方公司的风格的施工队sgs的风格发到公司的风格上的风格
</div>
<style type="text/css">
img{float: left;} /*将img 左浮动就可以了*/
</style>
------------
文字自动换行
<div style="width: 120px; height: 300px; border: 1px solid #FF8040;">
<span>这是</span>
<span>一个</span>
<span>测试阿蒂芬</span>
<span>页面哈</span>
<span>看看</span>
</div>
<style type="text/css">
span{word-break:keep-all;word-spacing: normal; display: block; float: left; }
/*关键代码在这里: word-break:keep-all;word-spacing: normal;*/
</style>
-----------------
文字在图片的上面
<div style="width: 600px; height: 400px; border: 1px solid red;">
<img src="1.png" />
<p>sadfsdafsdfasdfasfdasfdasdfasdfasdvxzvzxcv告诉对方公司的到公司</p>
</div>
<style type="text/css">
img{z-index: -1; position: absolute; left: 100px;}
p{z-index: 2;}
/*要使用z-index 就必须使用 position--其实就是层次关系 */
</style>
----------------
小精灵技术:同一张图片合并多张图片,通过坐标调用
<div class="navBox">
<ul>
<li><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">产品介绍</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">招贤纳仕</a></li>
</ul>
</div>
<style type="text/css">
.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; } /*向上为正,向下为负数*/
</style>
-----------------------------
纯css 实现导航