仓酷云

标题: 带来一篇css技能之PDF、ZIP、DOC链接的标注 [打印本页]

作者: 萌萌妈妈 时间: 2015-1-16 00:16
标题: 带来一篇css技能之PDF、ZIP、DOC链接的标注
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
原文：http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/
翻译：http://www.176so.com/past/2007/3/17/pdf_links_labeling/
css技能之PDF、ZIP、DOC链接的标注
偶然候我们但愿能明白的用小图标来标明我们的超链接的范例。是一个zip文档仍是一个pdf文件。如许会见者就晓得他所要点击的这个链接是下载而不是翻开另外一个页面了。假如一切的人都利用IE7大概FF的话。我们完整可使用[att$=val]属性选择器，寻觅以特定值（好比.zip和.doc）开头的属性。
a[href$=".pdf"]{padding-right:19px;background:url(pdf.gif)no-repeat100%.5em;}
a[href$=".zip"]{padding-right:17px;background:url(zip.gif)no-repeat100%.5em;}
不幸的是IE6以下扫瞄器不撑持属性选择器。幸亏，能够经由过程在每一个元素中增加类，利用JavaScript和DOM完成类似的效果。
上面给出了一个办理举措:
functionfileLinks(){
varfileLink;
if(document.getElementsByTagName(a)){
for(vari=0;(fileLink=document.getElementsByTagName(a)[i]);i++){
if(fileLink.href.indexOf(.pdf)!=-1){
fileLink.setAttribute(target,_blank);
fileLink.className=pdfLink;
}
if(fileLink.href.indexOf(.doc)!=-1){
fileLink.setAttribute(target,_blank);
fileLink.className=docLink;
}
if(fileLink.href.indexOf(.zip)!=-1){
fileLink.setAttribute(target,_blank);
fileLink.className=zipLink;
}
}
}
}
window.onload=function(){
fileLinks();
}
固然，你必要在你的css文件中，增添这几个css类：
.pdfLink{padding-right:19px;background:url(pdf.gif)no-repeat100%.5em;}
.docLink{padding-right:19px;background:url(doc.gif)no-repeat100%.5em;}
.zipLink{padding-right:17px;background:url(zip.gif)no-repeat100%.5em;}
最初一点倡议，你的小图标不要太过夺目，这会分离扫瞄者的注重力。

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

作者: 不帅 时间: 2015-1-18 05:52
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 第二个灵魂 时间: 2015-1-26 19:14
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 简单生活 时间: 2015-2-4 21:01
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 活着的死人 时间: 2015-2-10 11:34
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 因胸联盟 时间: 2015-3-1 13:13
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 山那边是海 时间: 2015-3-10 19:45
可以使用 CSS 检查工具进行设计。

作者: 金色的骷髅 时间: 2015-3-17 10:11
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 蒙在股里 时间: 2015-3-24 07:58
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

欢迎光临仓酷云 (http://www.ckuyun.com/)