电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
[组图]网页美化你还用小图标吗
网页美化你还用小图标吗
2010-1-12 9:11:02  文/古道天堂   出处:电脑软硬件应用网   

&nbsp;&copy;&lt;&gt;这几个字符您一定不陌生吧,下面这几个呢?&rsaquo;&raquo;&laquo;如果您还知道那再看这几个呢?&#9742;&#9760;&#9998; &#10003;下面来看看他们的在网页中的真面目吧&nbsp;&copy;&lt;<&gt;&rsaquo;&raquo;&laquo;&#9742;&#9760;&#9998;&#10003;依次为空格©<<>›»«☎☠✎✓

看到这您是不是有点晕,不知道我在什么,下面贴几张图您就明白了

 

breadcrumb-examples breadcrumb separator

您发现了没有,图中的文字中用到了许多修饰的小图标,是不是给界面的美观增色不少?是的,合理的运用这些小图标既可以使轻松指引读者还可以从细节上为网页整体增色,何乐而不为呢?那么是不是要去搜集一些类似的小图标呢?答案是不用。那些事只有美工才需要,我们一向比较懒,所以我们就…

今天的主角闪亮登场HTML Symbol Entities。那么为什么要使用字符而不使用小图标呢好处有哪些呢?

1.它比图标加载速度快;

2.它的大小可以随字体的大小而变化;

3.它可以随意改变颜色。

下面用&#9742;做个demo,

正常情况:

<p>正常电话图标:&#9742;</p>

正常电话图标:☎

 改变字体大小:

<style="font-size:26px;">大号电话图标:&#9742;</p>

大号电话图标:☎

 改变颜色:

<style="color:Red;font-size:26px;">大号红色图标:&#9742;</p>

大号红色图标:☎

是不是很简单,用起来很爽呢?但是有人又会问:“这么多字符我怎么记得住每个对应的代码是什么?”如果您是观察仔细的人,可能会发现其实基本上每个字符都有对应的名字,而且都是英文的缩写如:&copy;就是copyright的缩写,&larr;就是left arrow的缩写,是不是很好记呢?如果您还是懒的记,那就什么时候用,什么时候来这里(w3schools)这里(Character Entity Reference HTML 4)看吧,很详细而且比较权威。

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    页面自动跳转的几种实现方法
    网站内容的四种分类形式 或多或少的…
    如何指定规范网页?rel="canonical"
    浅谈网站评论体系设计的不足之处
    网页中“上一篇”“下一篇”设计思考
    网页设计进度指示器帮助用户预测步骤
    网页用户体验:网页注册表单设计分析
    网页设计常出现8大问题
    网页设计的形象思维归纳
    彻底去掉动易内容页顶部的“改变图片…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号