仓酷云

标题: 给大家带来网页技能:摹拟百度搜刮了局网站小图标 [打印本页]
作者: 逍遥一派    时间: 2015-1-15 22:53
标题: 给大家带来网页技能:摹拟百度搜刮了局网站小图标
目前我们的站就是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>
更好的控制页面布局。不用多说。
作者: 兰色精灵    时间: 2015-1-17 12:45
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。
作者: 灵魂腐蚀    时间: 2015-1-20 19:46
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
作者: 愤怒的大鸟    时间: 2015-1-29 18:10
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
作者: 透明    时间: 2015-2-6 03:25
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
作者: 变相怪杰    时间: 2015-2-15 13:59
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。
作者: 仓酷云    时间: 2015-3-4 11:35
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
作者: 精灵巫婆    时间: 2015-3-11 19:18
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
作者: 飘飘悠悠    时间: 2015-3-19 10:35
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
作者: 再见西城    时间: 2015-3-27 22:10
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。



欢迎光临 仓酷云 (http://www.ckuyun.com/) Powered by Discuz! X3.2