给大家带来网页技能:摹拟百度搜刮了局网站小图标

目前我们的站就是div+CSS做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
破洛洛文章简介：小tip:外链地点网站标记图标API使用。
1、成绩引诱

我们常常会用到分享功效，把内容或链接分享到具有SNS性子的网站，如大家，豆瓣之类。

登录/注册后可看大图

登录/注册后可看大图

为了加强标示性，下降了解本钱，我们城市利用这些网站的标记图标（相似扫瞄器地点栏或标签页后面小图标）。

登录/注册后可看大图

那末发问：你是怎样完成这些小图标效果的？
我想，很年夜一部分偕行会这么完成：东找西找弄到这些小图标，然后（为了前端功能），花工夫制造一个小题目Sprite，相似上面如许的：

登录/注册后可看大图

然后再一个一个地写CSS举行定位。转头碰到网站logo图标变了（如之前校内酿成大家），还要从头编纂制造Sprite图片。
能够看到，功效虽小，贫苦很多。
那有无甚么更复杂轻松的办法呢？
恩，本文的次要内容就是回覆全部成绩的。
2、网站标示图标API

要凑合这些小图标，我们无需本人往找资本，然后再往做专门处置。
1.我们能够如许子猎取：

1. http://www.google.com/s2/u/0/favicons?domain=链接地点域名(eg.www.zhangxinxu.com)

复制代码

比方，以下HTML代码：

1. [/code]了局就是（仍旧非截图）：
2. http://g.etfv.co/这个API利用的参数能够就是一个完全的地点。并且，理论证实，其比Google猎取网站图标的才能要强些，这个上面行将展现的demo会表现。
3. [size=4]3、实践使用演示[/size]
5. 如今，演示怎样使用下面的API完成我们经常使用的分享功效。
6. 您能够狠狠地址击这里：网站标记图标API使用demo
7. 
   登录/注册后可看大图
8. 细心检察会发明，最初一个图标没有显现(share.renren.com)，我们如今切换单选按钮，选择上面的etfv.co的API，了局大家网的图标显现了，并且新浪微博的图标模样也是纷歧样的。
9. 
   登录/注册后可看大图
10. [b]注：[/b]实践上，两个微博的图标地点(v.t.*.com)，两个API都是显现不出图标的，demo中将v.t交换成的www，图标才得以显现。从可否显现share.renren.com这个域图标来看，etfv.co的API更强些。
11. 大抵中心CSS代码以下：
12. [code]element.style.backgroundImage="url(http://www.google.com/s2/u/0/favicons?domain="+element.hostname+")";

复制代码

1. element.style.backgroundImage="url(http://g.etfv.co/"+element.href+")";

复制代码

4、最后小结

利用API挪用最年夜的优点就是保护本钱低得惊人。不管外链网站的图标怎样变更，我们都能够充耳不闻——其会主动随着变。
实践上，链接地点网站标记图标API的使用不单单在分享上。举个使用场景，博客文章，大概个中有良多外链的地点。关于用户而言，一看看往，晓得的大概晓得这里有个链接（色彩或下划线之类的标示），可是，却不知其链接地点指向那边。
我们，就能够借助JS和本文的API让这些链接的后面或上标地位显现关于网站的favicon，文章的可读性立马就进步了！
比方上面这一堆地点（本例子间接在文章中，有JS剧本，假如您在RSS中或渣滓站浏览时看不到效果的，请移步这里，大概间接检察分别的demo页面）：
</p>
更好的控制页面布局。不用多说。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

仓酷云

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。