利用CSS同比例缩小图片方法 CSS 加载方式的优化

今天郑州网页设计培训为大家讲一讲利用CSS同比例缩小图片方法  CSS 加载方式的优化
、当然，生成缩略图这个工作如果交给程序来完成，效果会好很多，但是有时出于某种因素，例如服务器不支持GD之类的，难免就要请CSS代劳。
　　 把一副大图片按比例缩小到某个尺寸，对于现代浏览器，直接使用max-width和max-height两条CSS属性即可。
　　 对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：
　　 这固然能解决问题，但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善，我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了，既然IE支持通过Expression在CSS中放置一些脚本，而这段脚本又只是提供给IE 6.0及以下版本使用，那么把它写到Expression中再合适不过。
　　 最终，把一副大图片按比例缩小到50px*50px以内，可以参照以下这段CSS：
　　 .thumbImage{
　　 max-width:50px;
　　 max-height:50px;
　　 }
　　 *html.thumbImage{
　　 width:expression（this.width>50&&this.width>this.height?50:auto）；
　　 height:expression（this.height>50?50:auto）；
　　 }
另外为大家讲一讲CSS 加载方式的优化
 1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。
　　 导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。
　　 2、尽量使用 的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import。因为在IE里，@import 相当于将 放在页面尾部。
网页制作中“层”的精确定位
表格定位法
　　 步骤1：打开Dreamweaver，新建一个页面，使用快捷键“Ctrl+Alt+T”插入一个两行一列的表格，设置第二行的目的就是为了放置层，使其相对表格定位。输入文字同时设置表格属性。
　　 步骤2：将光标移入第二行表格中，在这行中插入一个层，打开其属性面板，将L、T值删除，使其为空。
　　 这两个参数绝对不能有数值，否则将不能实现层精确定位。当然这时的层参数已定，作为父层时该层是不能移动的，但可以使用光标改变其大小。
　　 步骤3：将光标定义在父层中，再次插入一个层并设置层内容。当你使用F2打开层控制面板时会看到位于父层底下的子层，作为子层是可以拖动的，因为它相对于父层定位。
　　 步骤4：为主菜单设置鼠标响应事件，显示当鼠标移到和离开该主菜单时层的显示方式就可以了。F12预览并改变分辨率，看看是否你的子菜单没有错置。
　　 招数二：CSS定位法
　　 上述方法毕竟不是专业设计师的期望，我们可以做一个CSS相对定位的定义方式，将相对定位模型（比如表格）定义为这个CSS属性。