当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML Symbol Entities美化网页小图标

HTML/XHTML教程
CSS样式表设计的十条技巧
什么样的界面算是好界面-7个案例
CSS+JS实现的选项卡效果
用CSS设计高体验的表单显示效果示例
利用css和js实现firefox和IE都支持的页面局部打印
针对各种版本的浏览器隐藏CSS的九大技巧
Div+CSS布局入门教程
在DIV+CSS排版中新闻列表的制作方法
实践DIV+CSS网页布局入门指南
HTML中meta详解
有关HTML代码的另类应用技巧
彻底弄懂CSS盒子模式(DIV布局)
页面制作人员的修练之道
注意:HTML文件也能格式化硬盘
小技巧:让广告代码不再影响你的网页加载速度
进阶:彻底弄懂CSS盒子模式之二
彻底弄懂CSS盒子模式之三
详解css定位与定位应用
ASP生成静态Html文件技术杂谈
CSS的倡导者:学习CSS的10大理由

HTML/XHTML教程 中的 HTML Symbol Entities美化网页小图标


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-30   浏览: 142 ::
收藏到网摘: n/a

  ©<>这几个字符您一定不陌生吧,下面这几个呢? ›»«如果您还知道那再看这几个呢?☎☠✎ ✓下面来看看他们的在网页中的真面目吧 

  & nbsp;& copy;& lt;<& gt;& rsaquo;& raquo;& laquo;& #9742;& #9760;& #9998;& #10003;依次为空格©<<>›»«☎☠✎✓


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




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

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

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

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

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

下面用☎做个demo,

正常情况:


以下为引用的内容:

<p>正常电话图标:☎</p>

正常电话图标:☎


改变字体大小:

以下为引用的内容:

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

大号电话图标:☎


改变颜色:

以下为引用的内容:

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

大号红色图标:☎


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

原文地址:http://www.cnblogs.com/gudao119/archive/2010/01/05/1639447.html