首页 > 清新学堂 > 利用CSS同比例缩小图片方法 CSS 加载方式的优化
  • 利用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属性。
     

  • 本文TAG关键词: CSS 加载方式优化 随机推荐:
  • 上一篇 上一篇:中文域名的访问 中文域名体系
    下一篇 下一篇:什么叫动态网站?什么是网站优化什么是搜索引擎优化