• 在网页中画Icon小图标


    在网页中画Icon小图标。 现代网页中,绝大部分都采用了Icon小图标的方式。其积分大致分为三类,CSS Sprite,font+HTML,font+CSS。

    CSS Sprite:又称为CSS雪碧,把网页中零星背景图片整合在一张图片文件夹中,再利用CSS的背景图片技术定位到要显示的位置。优点:减少文本体积和服务器请求次数,从而提高效率。 知识点:background-image background-position(向下向右取的是负值)。 特点:1,相对单个图标,节省文本体积和服务器请求次数。 2,一般情况下保存为PNG-24格式,这样图片质量。 3,可以自己设计多种多样的图标。 难点:事先确定好每个小图标的大小,还有就是细心+耐心。

    Icon Fonts 优点:1,灵活性:可以改变颜色或或其他CSS效果。 2,可扩展:改变图标的大小 3,矢量性,缩放大小不失真 4,兼容性:支持所有现代浏览器 5,本地使用。

    字体图标工具网站 IcoMoon  https://icomoon.io eot IE专用字体(兼容IE678) WOFF 被推荐为标准(支持度比较好) TTF IE9以上以及所有浏览器支持(支持度比较好) svg 兼容低版本的Safari和opera。

    font+HTML

    在CSS里设置

    @font-face{  
          font-family
    :"font-name";
          src
    :url("***.eot") format("embedded-opentype"),
            url("***.ttf") format("...");
            font-weigth:normal
    ;
            font-style
    :normal; }

    .imooc-icon{

          font-family:"font-name";  

          font-size:77px; } //在HTML使用十六进制编码表示图标

    <span class="imooc-icon">&#xf048;</span>//需要加&#x前缀

    在IE9兼容模式下 CSS中这样设置

    @font-face{  
          font-family
    :"font-name";
          src
    :url("***.eot");/* IE9兼容模式*/
          src
    :url("***.eot") format("embedded-opentype"),
            url("***.ttf") format("...")
            font-weigth:normal
    ;
            font-style
    :normal; }

    font+CSS 主要技术点是在CSS中设置特定class类的:before伪类的content属性。 也是先通过@font-face引入字体文件,

     .classname:before{  
        content:"16进制编码";}        
  • 相关阅读:
    2015.4.16-C#中ref和out的区别
    2015.4.10-SQL 高级查询(二)
    2015.4.10-C#入门基础(三)
    2015.4.8-C#入门基础(二)
    2015.4.7-C#入门基础(一)
    2015.4.2-SQL 简单语句(一)
    对GridView的某一列行进行操作。。
    jquery获取GridView中RadioButton选中的数据
    Ajax获取前台的数据
    前台验证
  • 原文地址:https://www.cnblogs.com/kirinchang/p/4331463.html
Copyright © 2020-2023  润新知