韩顺平_php从入门到精通_视频教程_第17讲_div-css作业评讲③_学习笔记_源代码图解_PPT文档整理

来源：互联网发布：淘宝大连六本木黑店编辑：程序博客网时间：2024/04/29 14:18

文西马龙：http://blog.csdn.net/wenximalong/

IETester 多版本IE测试工具

这是个相当神奇的小软体，可以帮我们模拟网页在IE5.5、IE6、IE7与IE8、IE9等浏览器的相容性，让我们看一下辛苦作好的CSS样式或网站版面是否可以在各个主要浏览器正常显示。
理论上，IE版本越高，向下兼容越好，IE5.5不可能去兼容IE8。
网页兼容性调试，需要更多的经验，专业的前端设计师。
不是专业前端，有一种浏览器能调过就行，剩下的浏览器让专业前端再调试。

IE的5 6 7最难调，经验：只要IE 5 6 7调的过去，其他的几乎没有问题。

非专业前端，不要在浏览器兼容性上耗费太多精力，术业有专攻，什么都会，就是什么都不会。

素材

home2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link rel="stylesheet" type="text/css" href="home2.css" /><title>home2</title></head><body><!--这是最外层的div--><div class="div1"><!--这是第一个单元--><div class="div2"><span class="span1"><font class="font1">优酷牛人</font><a href="#">更多牛人</a></span><ul class="faceul"><li><img src="m4.jpg" /><br/><a href="#">小猫</a></li><li><img src="m4.jpg" /><br/><a href="#">小猫</a></li><li><img src="m4.jpg" /><br/><a href="#">小猫</a></li></ul></div></div></body></html>

home2.css

*{padding: 0px;}body{margin: 0 auto;width: 800px;height: 800px;border: 1px solid blue;font-size: 12px;}.div1{width: 300px;height: 250px;border: 1px solid silver;}/*定义几个常用的字体样式*/.font1{font-weight: bold;font-size:20px;margin: 2px 0 0 2px;}.span1{background-color: pink;display: block;}.span1 a{margin-top: 4px;float: right;}/*盒子的外观样式*/.faceul{width: 300px;height: 80px;background-color: green;list-style-type: none;/*ul和li间距*/padding: 0;/*ie7中就清除不了*/margin-left: 0px;/*在ie 5 6 7上ul有一个默认的margin-let值*/}.faceul li{float: left;width: 70px;height: 70px;margin-left: 6px;text-align: center; /*text-align 表示放在该元素的其他元素会左右居中*/}.faceul li img{width: 60px;height: 60px;}

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录