来谈谈：利用伪元从来完成图片交换的两种办法
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。破洛洛文章简介：伪元素与图片交换。
WeBrebuild年会上分享的一点内容，常识点的内容就不作过量论述了，假如你完整不懂得伪元素那末倡议先看一下官方伪元素选择器的材料，大概自行谷歌懂得，有乐趣能够往看下这篇文章：利用伪元素完成CSS图片交换（NIR），关于图片交换有对照具体的先容和追溯。
先看一下通用的图片交换办法：Demo1
甚么成绩呢，笔墨被埋没了，间接招致的了局就是当图片加载失利大概网速慢图片没法很快加载的时分，用户不晓得这块地区的内容是甚么，有甚么功效。
为了不呈现如许的情况，笔墨就不克不及被埋没，图片也不克不及间接界说成元素的背景图片，而必要别的一个标签来包括图片进而掩盖笔墨。
在IE67和低版本的chrome、FF等扫瞄器里的确是如许，但在对伪元素选择器完善撑持的扫瞄器下，我们只必要让伪元从来完成这个事情。
利用伪元从来完成图片交换有两种办法：
1、使用content将图片间接放到伪元素选择器里，看Demo2
2、相对定位伪元素，将图片界说成背景Demo3
两种办法的利害对照：
最初做了个针对IE67利用笔墨埋没，IE8和初级扫瞄器利用伪元素的渐进加强伪元素图片交换Demo
假如你的项目中有对IE别的誊写CSS文件能够把CSS分别开来，这里我间接利用hack完成了这个事情。
实践项目中仍是按照情形选择最优的办法来处置，关于对照主要的内容能够接纳增加空标签的办法，如许即便在低版本IE中图片加载呈现成绩了也能包管内容。
有乐趣也能够看下图片援用毛病的Demo：Demo-noimages
相干参考链接：
http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/demo
http://www.mezzoblue.com/tests/revised-image-replacement/
Pseudo-ElementsSelectors伪元素选择符
</p>
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。
页:
[1]