修改png格式,让IE6支持png图片透明

格式：doc
大小：79.50 KB
文档页数：2

下载文档原格式

PNG8和PNG24以及PNG32的区别

个人觉得png8对应的是gif格式相同的效果，支持完全透明和完全不透明两种效果和256色，png8更小，目前很多大型门户网站开始使用png8来代替gif，但png8没有gif的动画效果png24支持24位色，图片质量很高，但Fireworks中的png24不支持Alpha透明通道，也就是FW中的png24不透明的，但在PS或者AI中导出的png24是支持Alpha透明的png32是FW中的支持Alpha通道的png图片PNG8和PNG24的区别/s/blog_9050e71e0100yvtf.html一个图需要透明，所以存为了PNG8格式，结果图片四周都变得有锯齿了，阴影也不见了，存为PNG24后，这些问题就消失了。

百度搜索了PNG8和PNG24的区别，原来PNG8要么完全透明，要么完全不透明（1位布尔通道），不支持半透明，PNG24则支持半透明的（8位alpha通道；256灰度级）：看新浪微博logo，遇到这个问题（想知道它用的什么格式的png图）。

1、.png8和png24的根本区别，不是颜色位的区别，而是存储的方式不同。

2、.png8只有1位透明通道（或全透明，或全不透明），png24则有8位（256阶）透明通道（可半透明）。

3、png8和gif有相似之处，都只支持像素级的纯透明，但不支持alpha级的半透明。

4、通常说“IE6 不支持PNG 透明”，是指不支持PNG24的半透明。

但该版支持PNG8的透明，与支持gif透明一样。

因此，制作网页时：1、色彩丰富的大图片切成jpg；2、小尺寸，色彩单调，或背景透明的切成gif或png8；3、半透明的切成png24。

如何区别png8和png24：1、ps里看图像模式，png8只有8位通道。

2、打开png8格式，ps会默认在其标题加上“索引”二字，而png24没有。

最后说下png透明ie6下的解决问题：新浪微博的logo（png24）采用了下面的方法来实现透明：_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png',sizingMethod='cr op');但测试发现，给background:red url(logo.png) no-repeat center;加了红色后，别的浏览器正常识别，但ie6依旧不识别。

Photoshop9.0CS2制作PNG透明背景图片方法

Photo‎s hop做‎透明背景图‎片必须用‎另存为w‎e b所有格‎式(ctr‎l+alt‎+shif‎t+s).‎还可以‎用他的Im‎a geRa‎d yle ‎这个保存的‎都是web‎格式的‎(上面存的‎都是gif‎格式)‎重要的是‎j pg格式‎是没有透明‎背景的透‎明背景的要‎么是gif‎格式要么‎就是png‎格式PS‎简单图标遮‎罩制作（透‎明背景图片‎）1 -‎在Pho‎t osho‎p中打开P‎N G格式的‎图片2‎- 将前‎景颜色设置‎为黑色‎3 - 按‎键（Alt‎）+（Sh‎i ft）+‎（Back‎s pace‎）对存在‎像素上色（‎黑色）‎4 - 选‎择Laye‎r（涂层）‎> Fl‎a tten‎Imag‎e（拼合图‎层）5‎- 按键‎（Ctrl‎）+（I）‎对图像取反‎色，将图片‎保存为BM‎P格式‎使图标边缘‎看起来更圆‎滑（无白边‎）（透明背‎景图片）‎1 - 在‎P hoto‎s hop中‎打开PNG‎格式的图片‎2 -‎选择La‎y er（涂‎层） > ‎D upli‎c ate ‎L ayer‎（复制图层‎）3 ‎-选取位‎于最底层的‎涂层4‎- 选择‎F ilte‎r（滤镜）‎> Oth‎e r（其他‎）> Mi‎n imum‎（最小值）‎5 -‎将Rad‎i us（半‎径）改为1‎如何‎利用Pho‎t osho‎p输出带有‎透明信息的‎P NG格式‎的图片‎下面就是‎操作步骤：‎1‎.打开你‎要处理的图‎片(可以是‎任何格式的‎)，先调整‎它的尺寸大‎小，这一点‎虽然与透明‎背景图像没‎有什么联系‎，但图像太‎大会影响浏‎览速度，谁‎想只为了看‎一幅图片而‎“等你等得‎我心疼”呢‎！所以，在‎不影响视觉‎效果前提下‎应把图像尽‎量缩小，而‎且图像的长‎宽要和它在‎网页中的大‎小基本一致‎，否则图像‎插入后会发‎生变形。

调‎节尺寸可用‎I mage‎(图像)菜‎单中的Im‎a ge s‎i ze(图‎像尺寸)命‎令。

网页上不显示PNG图片

(1)、使用开始->运行，在运行输入框中输入“regsvr32 c:\windows \system32\pngfilt.dll”（然后点击确定）注意，这个pngfilt.dll在有的系统中是在c:\windows\system 中的，要自己查看一下这文件在哪里，根据自己的系统修改一下路径。

如果在注册时出现“已加载c:\ windows\system32\pngfilt.dll，但没有找到DllRegisterSever 输入点。

无法注册这个文件”，则表明这个文件可能损坏了，你要去别的机子去Copy一个好的过来。

再进行一次注册。

(2)、有些人是因为自己系统的设置问题，即任意打开一个文件夹，在上方菜单上选择“工具”->“文件夹选项”->“文件类型”，选择下方的“还原”按钮。

(3)、开始-> 运行，在运行输入框中输入“Regedit”，到这个路径“HK EY_LOCAL_MACHINE＼SOFTWARE＼Microsoft ＼Windows＼C urrentVersion＼Internet Settings＼Accepted Documents”，在右边右键“新建”->“字符串值” 紧接着最大的数字命名，我这里是3，故命名为4，并赋值为“image/png”。

(4)、打开注册表[HKEY_CLASSES_ROOT＼MIME]，正常的情况下里面有几大项，不能打开png格式图片时仅有Database项。

正常情况下，Database项下有上百项，异常情况下只有三四项。

这事可以从别人正常的机子中（xp可以从vista中拷贝）拷来MIME项注册表在自己机子上导入。

有时是MIME权限出了问题（如空权限），只需全部删去再导入。

受限帐户(USERS组)在IE浏览器中无法显示png图片的解决办法(转自微软)在Windows XP Pro SP3系统+ IE7浏览器的运行平台下，IE7突然无法显示png格式图片，导致浏览网页的时候大量图片、验证码等无法显示，但是用管理员的账号登陆以后IE浏览器图片显示则一切正常。

阮一峰CSS使用技巧

阮一峰的网络日志»首页»档案上一篇：一封博士研究生的遗书下一篇：关于高晓松，以及其他的分类：开发者手册CSS使用技巧作者：阮一峰日期：2010年3月31日最近，我开始升级网志了。

在修改模板的过程中，需要重写CSS样式表。

正好看到有一篇CSS常用技巧的总结文章，我就把它整理出来，供自己参考，也希望对大家有用。

未来，本文将持续更新。

1. 文字的水平居中将一段文字置于容器的水平中点，只要设置text-align属性即可：text-align:center;2. 容器的水平居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。

div#container {width:760px;margin:0 auto;}3. 文字的垂直居中单行文字的垂直居中，只要将行高与容器高设为相等即可。

比如，容器中有一行数字。

<div id="container">1234567890</div>然后CSS这样写：div#container {height: 35px; line-height: 35px;}如果有n行文字，那么将行高设为容器高度的n分之一即可。

4. 容器的垂直居中比如，有一大一小两个容器，请问如何将小容器垂直居中？<div id="big"><div id="small"></div></div>首先，将大容器的定位为relative。

div#big{position:relative;height:480px;}然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。

div#small {position: absolute;top: 50%;height: 240px;margin-top: -120px;}使用同样的思路，也可以做出水平居中的效果。

HTML基础知识

HTML学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。

HTML标记语言也不例外，同样需要遵从一定的规范。

接下来将具体讲解HTML文档的基本格式。

HTML文档的基本格式主要包括<!DOCTYPE>文档类型声明、<html〉根标记、<head〉头部标记、<body〉主体标记,具体介绍如下：(1）<！DOCTYPE>标记<!DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML 或XHTML（可扩展超文本标记语言）标准规范，必需在开头处使用<！DOCTYPE〉标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档,并按指定的文档类型进行解析。

（2)〈html〉〈/html〉标记〈html>标记位于〈!DOCTYPE〉标记之后，也称为根标记，用于告知浏览器其自身是一个HTML 文档，<html>标记标志着HTML文档的开始，〈/html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。

在〈html>之后有一串代码“xmlns=”/1999/xhtml"”用于声明XHTML统一的默认命名空间.（3）<head〉</head〉标记<head〉标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html〉标记之后，主要用来封装其他位于文档头部的标记，例如〈title〉、<meta>、〈link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。

一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

（4)〈body>〈/body〉标记<body〉标记用于定义HTML文档所要显示的内容，也称为主体标记.浏览器中显示的所有文本、图像、音频和视频等信息都必须位于〈body>标记内，<body>标记中的信息才是最终展示给用户看的.一个HTML文档只能含有一对<body>标记，且〈body>标记必须在〈html〉标记内，位于<head>头部标记之后，与〈head>标记是并列关系.在HTML页面中，带有“〈〉”符号的元素被称为HTML标记，如上面提到的〈html〉、〈head〉、<body〉都是HTML标记。

网页设计前端面试题

网页设计前端面试题网页设计前端面试题集合前端是网页设计过程中一个重要的组成部分，那么在面试网页设计师的时候，往往会遇到前端试题操作，以下是店铺为大家搜索整理的网页设计前端面试题集合，希望能给大家带来帮助!HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;2.xhtml和html有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?用于声明文档使用那种规范(html/Xhtml)一般为严格过度基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug4.行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding5.CSS引入的方式有哪些? link和@import的区别是?内联内嵌外链导入区别：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?标签选择符类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级高7.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html 表示层 CSS 行为层 js8.css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)10.写出几种IE6 BUG的解决方法1.双边距BUG float引起的使用display2.3像素问题使用float引起的使用dislpay:inline -3px3.超链接hover 点击后失效使用正确的书写顺序link visited hover active4.Ie z-index问题给父级添加position:relative5.Png 透明使用js代码改6.Min-height 最小高度 !Important 解决’7.select 在ie6下遮盖使用iframe嵌套8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)11.标签上title与alt属性的区别是什么?Alt 当图片不显示是用文字代表。

解决网页不兼容的问题

2013年度最新整理45个div+css兼容性问题与解决方案分类：CSS前端开发2013-03-01 16:41 16人阅读评论(0) 收藏举报1. 默认的内外边距不同问题：各个浏览器默认的内外边距不同解决：*{margin:0;padding:0;}2. 水平居中的问题问题：设置text-align: centerie6-7文本居中，嵌套的块元素也会居中ff /opera /safari /ie8文本会居中，嵌套块不会居中解决：块元素设置1、margin-left:auto;margin-right:auto2、margin:0 auto;3、<div align=”center”></div>3. 垂直居中的问题问题：在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。

例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中解决：给容器设置一个与其高度相同的行高line-height:与容器的height一样4. 关于高度问题问题：如果是动态地添加内容，高度最好不要定义。

浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。

如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框解决：1.设置overflow:hidden;2.高度自增height:auto!important;height:100px;5. IE6 默认的div高度问题：ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度解决：为这个容器设置下列属性之一1、设置overflow:hidden;2、设置line-height:1px;3、设置zoom:0.086. IE6 最小高度(宽度)的问题问题：ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。

php处理png图片白色背景色改为透明色的实例代码

php处理png图⽚⽩⾊背景⾊改为透明⾊的实例代码先看下⾯⼀段代码，php 处理png图⽚⽩⾊背景⾊改为透明⾊function pngMerge($o_pic,$out_pic){$begin_r = 255;$begin_g = 250;$begin_b = 250;list($src_w, $src_h) = getimagesize($o_pic);// 获取原图像信息宽⾼$src_im = imagecreatefrompng($o_pic); //读取png图⽚print_r($src_im);imagesavealpha($src_im,true);//这⾥很重要意思是不要丢了$src_im图像的透明⾊$src_white = imagecolorallocatealpha($src_im, 255, 255, 255,127); // 创建⼀副⽩⾊透明的画布for ($x = 0; $x < $src_w; $x++) {for ($y = 0; $y < $src_h; $y++) {$rgb = imagecolorat($src_im, $x, $y);$r = ($rgb >> 16) & 0xFF;$g = ($rgb >> 8) & 0xFF;$b = $rgb & 0xFF;if($r==255 && $g==255 && $b == 255){imagefill($src_im,$x, $y, $src_white); //填充某个点的颜⾊imagecolortransparent($src_im, $src_white); //将原图颜⾊替换为透明⾊}if (!($r <= $begin_r && $g <= $begin_g && $b <= $begin_b)) {imagefill($src_im, $x, $y, $src_white);//替换成⽩⾊imagecolortransparent($src_im, $src_white); //将原图颜⾊替换为透明⾊}}}$target_im = imagecreatetruecolor($src_w, $src_h);//新图imagealphablending($target_im,false);//这⾥很重要,意思是不合并颜⾊,直接⽤$target_im图像颜⾊替换,包括透明⾊;imagesavealpha($target_im,true);//这⾥很重要,意思是不要丢了$target_im图像的透明⾊;$tag_white = imagecolorallocatealpha($target_im, 255, 255, 255,127);//把⽣成新图的⽩⾊改为透明⾊存为tag_whiteimagefill($target_im, 0, 0, $tag_white);//在⽬标新图填充空⽩⾊imagecolortransparent($target_im, $tag_white);//替换成透明⾊imagecopymerge($target_im, $src_im, 0, 0, 0, 0, $src_w, $src_h, 100);//合并原图和新⽣成的透明图imagepng($target_im,$out_pic);return $out_pic;}$o_pic = '1.png';$name = pngMerge($o_pic,'aaaa.png');print_r($name);补充：⽤PHP的GD库把图⽚的背景替换成透明背景之前写个功能⽤PHP把图⽚的背景弄成透明，之留下⽂字（⿊⾊的），我也在百度上找，也试过别⼈的代码。

web前端工程师面试题及答案

web前端工程师面试题及答案面试题在web前端工程师求职者的面试中占有重要的位置，以下是店铺为大家整理的：web前端工程师面试题及答案，仅供大家参考! web前端工程师面试题及答案1. 常用那几种浏览器测试?有哪些内核(Layout Engine)?(Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。

(Q2) 内核：Trident，Gecko，Presto，Webkit。

2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)行内元素：会在水平方向排列，不能包含块级元素，设置width 无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

块级元素：各占据一行，垂直方向排列。

从新行开始结束接着一个断行。

兼容性：display:inline-block;display:inline;zoom:1;3. 清除浮动有哪些方式?比较好的方式是哪一种?(1)父级div定义height。

(2)结尾处加空div标签clear:both。

(3)父级div定义伪类:after和zoom。

(4)父级div定义overflow:hidden。

(5)父级div定义overflow:auto。

(6)父级div也浮动，需要定义宽度。

(7)父级div定义display:table。

(8)结尾处加br标签clear:both。

总结：比较好的是第3种方式，简洁方便。

4. box-sizing常用的属性有哪些?分别有什么作用? 常用的属性：box-sizing: content-box border-box inherit;作用：content-box:宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

12款实用免费批量图片体积优化压缩工具

12款实用免费批量图片体积优化压缩工具！网页设计必备我们都知道，漂亮的图片可以让一个网页看起来更加高端大气上档次。

然而，一般高分辨率的高清图片/照片的体积都比较巨大，如果网页里包含很多图片，那网页加载的速度就会变得很慢。

不仅如此，如果网页的访问量较大，其中图片消耗的流量带宽也会成倍增加！因此，如能在不损失图片质量或在肉眼不易辨别的情况下优化压缩图片，尽可能减小图片体积，那么一来可以加快网页显示速度，二来减轻服务器负担，三来还能大大减少带宽流量的成本支出，实乃好处多多。

因此今天整理了这些实用的图片体积优化压缩工具(包含网页版和软件版)。

绝对是网页设计师或建站人士必备……/content-990764.html一、网页版的图片压缩优化工具：1、TinyPNGTinyPNG 是非常多人推荐过的一个网页版PNG 图片压缩优化工具，它使用了一种智能有损压缩技术（通过降低图片中的颜色数量，来减少存储图片所需要的数据）来降低PNG 图片的大小。

这样的压缩对图片的效果影响是很小的，但是可以大大降低图片的大小，并且还能保持PNG 的alpha 透明度。

某些时候TinyPNG 的压缩率非常喜人，而且基本上看不出与原图有什么区别。

2、Smush.itSmush.it 是一个非常流行的在线网页版的图片优化工具，它可以“无损Lossless” 地对图片进行优化，在不降低原图画质的情况下减小图片的体积大小。

你可以直接在浏览器上访问和使用Smush.it，可以一次上传并优化多张图片，并且可以支持FireFox 的YSlow 扩展。

另外，你也可以通过图片网络地址进行批量优化。

3、Dynamic Drive Online Image OptimizerDynamic Drive Online Image Optimizer 支持多种不同格式图片的的优化压缩，其中包括GIF、JPG 和PNG。

你可以从本机上传图片或者输入网络图片的网址来进行优化，并且它还能让你在线将图片转换成不同的格式。

CSS无难事-div css2实现圆角显示详解

一些网站（尤其是娱乐性为主的网站）从用户视觉体验角度出发，会将用户头像设置为圆角显示，以增加亲和度。

如开心网的用户头像：在此基础上，追求更简约的设计会直接将头像图片本身设置为圆角来展示，如腾讯朋友：这个效果看似简单，但可能会令一些前端er感到头疼。

毕竟在尚不支持CSS3圆角属性的IE大行其道的当下，高效的解决页面中的批量圆角图片不是那么容易。

看到最后的童鞋也会发现，本文也无最优解，因为不同的环境，需求不同，技术实现也会不同。

技术实现后端生成似乎对于前端来说，最希望的就是后端工程师在程序开发上能支持用户上传头像时候，可以自动生成一组用于前台页面不同情境下使用的头像集合，既包含了默认直角的同时也会生成圆角版本的调用头像。

优点：节省前台页面对圆角图片处理的代码量，为公司省带宽，为用户省加载时间。

不足：后端开发成本提升，服务器负荷在生成头像阶段有极为微小的加剧。

前端实现目前看来。

似乎绝大部分的网站会采用由前端来实现这个效果。

毕竟，前端负责的就是用户浏览器里的那些东西。

我们这里不会谈论那个07年广泛使用的“4个<b>绝对定位”的方式，毕竟对于但页面中数量众多的用户头像来说，这个方法虽可行但效率太差，同时也是表格布局思维的遗老——以视觉为基础进行布局的意识要不得。

方法一：针对非IE的更现代款浏览器，采用CSS3相信大家都会最喜欢这个方式，简单高效，代码无冗余可以保持优雅，只是目前鉴于黑势力的IE系列，若想普及还有待时日。

DEMO请猛击这里。

HTML：<div id="demo-2"><a href=""><imgsrc="/blog/images/hi.jpeg" width="60" height="60" /></a></div>CSS：img {border:0;display:block;}#demo-2 img {border-radius: 4px;}方法二：针对不那么现代的IE系列，采用额外的一个绝对定位层这个方法首先需要一张png图片为覆盖图，该覆盖图中间为透明，只在四角有不透明部分。

网页设计模考试题及答案

网页设计模考试题及答案一、单选题（共30题，每题1分，共30分）1.对于网页制作者来说web的含义是什么？（）A、万维网的缩写B、可以简单理解为网页C、超媒体D、传输协议正确答案：B2.下面关于网页设计名词，错误的是（）。

A、HTMLB、PSC、DWD、AP正确答案：D3.下列属性中，用于设置鼠标悬停时图像的提示文字的是（）。

A、titleB、altC、heightD、width正确答案：A4.以下属性中，不能增加盒子尺寸的属性是（）。

A、widthB、heightC、text-decorationD、padding正确答案：C5.在下列属性中，用来定义文本字体大小的是（）。

A、sizeB、faceC、colorD、align正确答案：A6.如果有两个上下并列关系的盒子，上面盒子的下外边距是30px，下面盒子的上外边距是20px，那么这两个盒子之间的间距是（）。

A、10像素B、50像素C、20像素D、30像素正确答案：D7.在行内式CSS样式中，<'style>标记可以设置元素的样式，它一般位于（）标记中<'title>标记之后。

A、<'h1>B、<'p>C、<'head>D、<'body>正确答案：C8.在Dreamweaver中，使用次浏览器预览网页的快捷键是（）。

A、Ctrl+SB、F12C、F5D、Ctrl+F12正确答案：D9.关于内嵌式CSS样式的语法格式中，下列选项正确的是（）。

A、选择器{k:v; k:v; k:v;}B、选择器{k:v, k:v, k:v,}C、选择器{k,v; k,v; k,v;}D、选择器{k->v; k->v; k->v;}正确答案：A10.在定义列表中，用于对名词进行解释和描述的标记是（）。

A、<'dd><'/dd>B、<'dl><'/dl>C、<'dt><'/dt>D、<'li><'/li>正确答案：A11.关于内嵌式引入CSS样式表，以下书写正确的是（）。

史上最全前端面试题（含答案）-A篇

史上最全前端⾯试题（含答案）-A篇HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签⼩写、不乱嵌套、提⾼搜索机器⼈搜索⼏率、使⽤外链css和js脚本、结构⾏为表现的分离、⽂件下载与页⾯速度更快、内容能被更多的⽤户所访问、内容能被更⼴泛的设备所访问、更少的代码和组件，容易维护、改版⽅便，不需要变动页⾯内容、提供打印版本⽽不需要复制内容、提⾼⽹站易⽤性；2.xhtml和html有什么区别HTML是⼀种基本的WEB⽹页设计语⾔，XHTML是⼀个基于XML的置标语⾔最主要的不同：XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须⽤⼩写字母。

XHTML ⽂档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?⽤于声明⽂档使⽤那种规范（html/Xhtml）⼀般为严格过度基于框架的html⽂档加⼊XMl声明可触发，解析⽅式更改为IE5.5 拥有IE5.5的bug4.⾏内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素：div p h1 h2 h3 h4 form ul⾏内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding5.CSS引⼊的⽅式有哪些? link和@import的区别是?内联内嵌外链导⼊区别：同时加载前者⽆兼容性，后者CSS2.1以下浏览器不⽀持Link ⽀持使⽤javascript改变样式，后者不可6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级⾼?标签选择符类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级⾼7.前端页⾯有哪三层构成，分别是什么?作⽤是什么?结构层 Html 表⽰层 CSS ⾏为层 js8.css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}9.你做的页⾯在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) ⽕狐（Gecko）⾕歌（webkit） opear(Presto)10.写出⼏种IE6 BUG的解决⽅法1.双边距BUG float引起的使⽤display2.3像素问题使⽤float引起的使⽤dislpay:inline -3px3.超链接hover 点击后失效使⽤正确的书写顺序 link visited hover active4.Ie z-index问题给⽗级添加position:relative5.Png 透明使⽤js代码改6.Min-height 最⼩⾼度！Important 解决’7.select 在ie6下遮盖使⽤iframe嵌套8.为什么没有办法定义1px左右的宽度容器（IE6默认的⾏⾼造成的，使⽤over:hidden,zoom:0.08 line-height:1px）11.标签上title与alt属性的区别是什么?Alt 当图⽚不显⽰是⽤⽂字代表。

transform兼容写法

小学教师集体宿舍管理办法是为了保障教师的居住条件，提高教师工作和生活环境的质量，营造良好的学习和工作氛围。

以下是小学教师集体宿舍管理办法的一些建议和规定：1.宿舍申请和分配：教师可以向学校申请住宿，学校根据教师个人情况和工作需要进行审核和分配。

优先考虑需要住宿的年轻教师和从乡村调至城市工作的教师。

2.宿舍使用：教师应当按照规定住宿在分配的宿舍内，不得私自更换或擅自将宿舍借给他人。

如有特殊情况需要临时离开，请提前向学校请示并办理手续。

3.宿舍设施和环境：学校应提供基本的生活设施和设备，如床、桌、椅、衣柜等。

宿舍内应保持整洁，不得乱丢垃圾，不得私拉乱接电源线等。

每年学校应定期对宿舍进行清洁和消毒。

4.宿舍安全：学校应加强对宿舍区的安全管理，保证教师的人身和财务安全。

教师应自觉防范火灾等事故，禁止在宿舍内使用大功率电器和易燃物品。

5.宿舍秩序：教师应自觉遵守宿舍规章制度，不得影响其他教师的正常生活。

不得在宿舍内大声喧哗、吵闹、打闹，不得在宿舍内吸烟、喝酒等影响室内环境和他人的行为。

6.宿舍维修：学校应及时维修宿舍内的设施和设备，教师如发现宿舍内有损坏或者故障，应及时向学校反映并配合学校进行维修。

7.宿舍卫生：教师应自觉保持宿舍的卫生和整洁，定期清理宿舍内的垃圾，保持宿舍内的通风和干燥。

不得在宿舍内养宠物，不得带进不符合卫生要求的食品。

8.违规处罚：对于违反宿舍管理规定的教师，学校将依法进行惩处，包括口头警告、书面警告、扣发住宿津贴等，并视情节轻重给予相应的纪律处分。

以上是小学教师集体宿舍管理办法的一些建议和规定，旨在提供一个良好的学习和工作环境，保障教师的权益和安全。

浏览器兼容性问题解决方案汇总

浏览器兼容性问题解决方案汇总【来源：小鸟云计算】Ps.小鸟云，国内专业的云计算服务商普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。

俗话说：没有IE就没有伤害。

贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。

Normalize.css不同浏览器的默认样式存在差异，可以使用Normalize.css 抹平这些差异。

当然，你也可以定制属于自己业务的reset.css∙<link href="https:///normalize/7.0.0/normalize.min.css"rel="stylesheet">简单粗暴法∙* { margin: 0; padding: 0; }html5shiv.js解决ie9 以下浏览器对html5 新增标签不识别的问题。

∙respond.js解决ie9 以下浏览器不支持CSS3 Media Query 的问题。

∙<script src="https:///respond.js/1.4.2/respond.min.js">∙</script>picturefill.js解决IE 9 10 11 等浏览器不支持<picture> 标签的问题∙<script src="https:///picturefill/3.0.3/picturefill.min.js">∙</script>IE 条件注释IE 的条件注释仅仅针对IE浏览器，对其他浏览器无效IE 属性过滤器（较为常用的hack方法）针对不同的IE 浏览器，可以使用不同的字符来对特定的版本的IE 浏览器进行样式控制imageimage浏览器CSS 兼容前缀∙-o-transform:rotate(7deg); // Opera∙-ms-transform:rotate(7deg); // IE∙-moz-transform:rotate(7deg); // Firefox∙-webkit-transform:rotate(7deg); // Chrome∙transform:rotate(7deg); // 统一标识语句a 标签的几种CSS 状态的顺序很多新人在写a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。

图像文件格式有哪些以及如何选择

图像⽂件格式有哪些以及如何选择⼀、哪三种格式？分别为：gif、jpg、png。

⼆、优化图像⽂件为何重要？对于访问量不⾼的⽹站⽽⾔，图像的优化也许并不会引起我们太⼤的关注，但是如果⽇访问量都在数以万计的⽹站，简单举例是100000，那么某张图⽚的⼤⼩减⼩3k，⼀个⽉下来就节省了9G的带宽，这不管对于同时访问该⽹站的⽤户，还是⽹站运营本⾝来说，都将减少更少的开销。

三、不得不提及的⼏个概念1、有损压缩与⽆损压缩关于这两个概念，我在淘宝UED的blog上看到相关的⽂章，觉得很不错，链接进⼊图⽚格式与设计那点事⼉。

2、⾊深指某种图像格式包含的颜⾊的多少。

⽤位表⽰，如8位⾊深表⽰256种颜⾊。

四、三种格式的简介1、gif（1）只⽀持8位⾊深模式，即在同⼀张图像上只能存在256种颜⾊，如果超出，则某些颜⾊信息将丢失。

（2）⽀持1位透明度，即要么全透明，要么不透明。

（3）⽀持基于桢的简单动画（这是其他两种格式所不具备的）（4）何时可⽤？颜⾊值较少，有⼤块相同颜⾊区域的图像适合保存为此格式。

2、jpg（1）⽀持24位⾊深（2）不⽀持透明度（3）可对该格式的图像进⾏压缩，压缩的时候可设置等级。

等级越⾼，图像越清晰，但是⽂件也就越⼤；反之亦然。

所以在压缩的时候必须在图像质量和⽂件⼤⼩之间权衡利弊。

（4）何时可⽤？颜⾊值较多，⾊彩和细节丰富的图像适合保存为此格式。

3、png（1）提供两种⾊深模式：8位和24位。

（2）24位⾊深的png⽂件能做到⽆损压缩，但是⽂件也相应的会很⼤，并且在ie6下不被⽀持。

（3）8位⾊深的png⽂件使⽤了类似gif的颜⾊索引，且在多数情况下，同等设置下⽤的png压缩的图像要⽐gif⼩。

（4）何时可⽤？推荐使⽤8位⾊深的png⽂件。

五、结语选择图像⽂件格式应该在透明度、⾊深、压缩率三者之间权衡⼀番，如果颜⾊⾊彩丰富，并且⽆需透明度⽀持，那么jgp⽆疑是最合适的选择；如果需要透明度⽀持，那么jpg⽆疑⼜是第⼀个得排除的选项。

利用photoshopcs6将gif格式图片变为背景透明免费范文精选

在ppt中插入gif格式的图片时,背景常常不透明,困扰着许多人,怎么将背景去除后,仍保存为动态图片,以为ppt所用呢？利用photoshopcs6将gif格式图片变为背景透明一、打开photoshopcs6软件。

二、从“文件”中选择“打开”，导入图片。

在下方看到时间轴中的每一帧，和右边的每一图层。

（如果下方没有出现时间轴，则在“窗口”菜单中的“时间轴”前打上勾即可）三、去背景：1、时间轴上第一帧和右边的第一图层对应都单击选中。

然后在工具栏中选取摩棒点击背景。

摩棒工具背景（如果看不到摩棒工具，则右击黄圈内右下角小三角后选择对应工具即可）。

选中后如下图：在ppt中插入gif格式的图片时,背景常常不透明,困扰着许多人,怎么将背景去除后,仍保存为动态图片,以为ppt所用呢？2、修改：分别执行“选择”菜单中“修改”中的“收缩”、“平滑”，再执行“羽化”后，按Delete键。

至此第一帧背景已去除完毕。

3、余下的每一帧的去背景方法都同上。

在ppt中插入gif格式的图片时,背景常常不透明,困扰着许多人,怎么将背景去除后,仍保存为动态图片,以为ppt所用呢？四、保存：选择“文件”菜单中“存储为Web所用格式”：给保存的文件命名、选取格式为“HTML和图像”：在ppt中插入gif格式的图片时,背景常常不透明,困扰着许多人,怎么将背景去除后,仍保存为动态图片,以为ppt所用呢？五、打开Web格式文件：六、在打开的页面中右击，选择“图片另存为”。

（保存为gif格式）至此，背景透明的gif格式的图片制作完成。

可以直接插入ppt中。

制作：泰山区省庄镇羊楼小学张峰2015年5月6日。

web前端photoshop新建图像

是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF 图像文件。
常见位图图片格式
png8无损、≤256色、支持背景透明，适合按钮类图片 png8对应的是gif格式相同的效果，支持完全透明和完全不
点阵图：又称像素图(位图)，即图像由一个个的颜色方格所组成，与分辨率有关，单位面积内像素越多，分辨率越高，图像的效果越好。用于显示一般为72PPI;用于印刷一般不低于300PPI。
颜色模式RGB与CMYK
颜色模式：用于显示和打印图像的颜色模型。常用的有 RGB、CMYK、LAB、灰度等。
除（delete）跟系统一样。
总结
打印与一般图片分辨率各设置为多少？常用的图片格式有哪些，各有什么特点？
项目实战培训
photoshop的概念颜色模式RGB与CMYK 常见位图图片格式常用快捷键
像素与图像分辨率的概念
像素：是组成图像的最基本单元，它是一个小的方形的颜色块。(ps把图无限放大就是一个个像素块)
图像分辨率：即单位面积内像素的多少。分辨率越高，像素越多，图像的信息量越大。单位为PPI(像素/英寸)，如 72PPI表示该图像每平方英寸含有72×72个像素。(显示器也以英寸为单位)
RGB是色光的色彩模式。R代表红色，G代表绿色，B代表蓝色，三种色彩叠加形成了其它的色彩。因为三种颜色都有 256个亮度水平级，所以三种色彩叠加就形成1670万种颜色了。也就是真彩色，通过它们足以在现绚丽的世界。
CMYK代表印刷上用的四种颜色，C代表青色，M代表洋红色， Y代表黄色，K代表黑色。因为在实际引用中，青色、洋红色和黄色很难叠加形成真正的黑色，最多不过是褐色而已。因此才引入了K——黑色。黑色的作用是强化暗调，加深暗部色彩。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

修改png格式，让IE6支持png图片透明
文/ 商企通-胡睿
网页设计人员对IE6肯定相当头疼，因为其不支持png图片透明，所以就需要用各种方法来实现让它支持png透明图片。

实现方法也相当的多，这里我推荐一种不需要其他插件，也不需要增加任何代码，只需你的电脑上有PS（photoshop）就可以实现。

下面我们就一步步来实现，首先在IE6和IE8下分别打开一个未被处理过的png图片看看效果：
，
这两张图片都是png格式，并且都为背景都为透明，可以很明显看出，IE6（左）不支持PNG图片透明。

接下来我们要做的就是，用PS打开其中一个png文件，然后依次点击“文件”--“存储为Web和设备所用格式”，快捷键是：Ctrl+Shift+Alt+S，打开后在右侧“预设”里设置：PNG-8 128 仿色
然后点击“存储”，选择存放路径，然后就OK了。

最后把这个修改过的png图片替换之前的文件，然后我们再在IE6里打开查看一下：
可以看到IE6下已经能显示透明了，但图片周围似乎还有一圈白色，这个应该是细节问题，由于我不太懂PS，所以细节就没有继续处理。

这里其实没什么原理，因为png有很多版本，比如有：png8，png24，png32，而IE6
只支持png8的透明索引，所以我们只需修改下png的格式就行，另外还需注意的就是，在FW（Fireworks）里，导出png图片的格式必须选png32，因为在FW里导出的png32图片在PS里打开是png24。

但png8有它的限制，不支持更多的颜色，而且如果在图片很多的情况下，如果手动去一张张修改，肯定很麻烦。

所以就下面简短的介绍一个简单而有效的办法，
那就是IE6专用的PNG hack——iepngfix.htc。

首先要下载脚本，将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用；blank.gif是一个1×1像素的透明GIF图片，缺少该文件会使<img>标签插入的PNG图象显示为红色的叉叉。

然后在iepngfix.htc中修改blank.gif的路径，var blankImg =‘blank.gif的正确路径’。

最后在css中将需要使用透明PNG的元素与.htc文件关联。

例如：*{behavior:
url(iepngfix.htc) }
通过以上三步，你的IE6就能支持图片透明了。

如果还不行，可以再修改下png图片格式为png8，这样就100%可行了。