欢迎光临
我的个人博客网站

WEB前端第十九课——雪碧图&滑动门

1.字体图标

  获取途径:

  ① 免费网站下载字体

  ② 收费网站购买字体使用权

  ③ 自己设计字体(要有设计背景)

2.阿里巴巴 IconFont图标库

  URL:https://www.iconfont.cn/home/index,需要注册账号后才能下载使用

  图标下载成功后,可以通过编辑器直接调用

  引用方式以下内容摘自iconfont使用说明):

  ① Unicode 引用,Unicode 是字体在网页端最原始的应用方式,特点:

    兼容性最好,支持 IE6+,及所有现代浏览器。

    支持按字体的方式去动态调整图标大小,颜色等等。

    但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

    注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

 

 

  

② 

font-class 引用,是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题,特点:

    兼容性良好,支持 IE8+,及所有现代浏览器。

    相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。

    因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

    不过因为本质上还是使用的字体,所以多色图标还是不支持的。

  ③ Symbol 引用,这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

    支持多色图标了,不再受单色限制。

    通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。

    兼容性较差,支持 IE9+,及现代浏览器。

    浏览器渲染 SVG 的性能一般,还不如 png。

3.Unicode引用 测试代码

/*  CSS代码 (来自iconfont)  */ @font-face {font-family: "iconfont";   src: url('iconfont.eot?t=1596700948491'); /* IE9 */   src: url('iconfont.eot?t=1596700948491#iefix') format('embedded-opentype'), /* IE6-IE8 */   url("data:application/x-font-woff2;charset=utf-8;") format('woff2'),   url('iconfont.woff?t=1596700948491') format('woff'),   url('iconfont.ttf?t=1596700948491') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */   url('iconfont.svg?t=1596700948491#iconfont') format('svg'); /* iOS 4.1- */ }  .iconfont {   font-family: "iconfont" !important;   font-size: 16px;   font-style: normal;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }  /*  HTML代码  */ <html> <head lang="en">     <meta charset="utf-8">     <link rel="stylesheet" href="images/icon/iconfont.css"/>     <title>CSS_iconfont</title> </head> <body>     <ul type="none">         <li><i class="iconfont">&# xe7ec;</i>新浪微博</li>         <li><i class="iconfont">&# xe63b;</i>QQ空间</li>         <li><i class="iconfont">&# xe615;</i>腾讯微博</li>         <li><i class="iconfont">&# xe630;</i>购物车</li>     </ul> </body> </html> 

4.font class引用 测试代码

<html> <head lang="en">     <meta charset="utf-8">     <link rel="stylesheet" href="images/icon/iconfont.css"/>     <title>CSS_iconfont</title> </head> <body>     <ul type="none">         <li class="iconfont icon-xinlangweibo1">新浪微博</li>         <li class="iconfont icon-QQkongjian1">QQ空间</li>         <li class="iconfont icon-tubiaozhizuomoban">腾讯微博</li>         <li class="iconfont icon-shopshoppingco">购物车</li>     </ul> </body> </html> 

5.symbol引用 测试代码  

/* 引用iconfont使用说明 */ <html> <head lang="en">     <meta charset="utf-8"> <!--    <link rel="stylesheet" href="images/icon/iconfont.css"/>-->     <title>CSS_iconfont</title>     <script src="Images/icon/iconfont.js"></script>     <style>         .icon {             width: 12em;             height: 2em;             vertical-align: -2.15em;             /*fill: currentColor;*/             /*overflow: hidden;*/         }     </style> </head> <body>     <svg class="icon" aria-hidden="true">         <use xlink:href="#icon-xinlangweibo"></use>         <text x="110" y="30" fill="red">新浪微博</text>     </svg> </body> </html> 

6.CSS sprites雪碧图,将多张图片、图标等合并为一张整图,然后通过 background-position 进行背景图片定位

  Sprites图片整合可以有效减少服务器请求次数,从而提高页面加载效率

  整合图片的小工具网上有很多,PC端和在线的都有,可以自动生成CSS代码,操作便捷

  sprites测试代码如下(通过Satyr Sprite工具整合图片,感谢工具作者http://shen.li/blog/post/C_sharp/CSS_Satyr.html

<html> <head lang="en">     <meta charset="utf-8">     <title>CSS_sprites</title>     <style>         div{             width: 200px;             height: 200px;             border: 1px solid #55a532;             background-image: url("images/number/compose.png");             float: left;             margin-left: 10px;         }         .pic_1 {background-position: -0px -0px; width: 200px; height: 200px; }         .pic_2 {background-position: -202px -0px; width: 200px; height: 200px; }         .pic_3 {background-position: -405px -0px; width: 200px; height: 200px; }         .pic_4 {background-position: -610px -0px; width: 200px; height: 200px; }         .pic_5 {background-position: -815px -0px; width: 200px; height: 200px; }     </style> </head> <body>     <div class="pic_1">壹</div>     <div class="pic_2">贰</div>     <div class="pic_3">叁</div>     <div class="pic_4">肆</div>     <div class="pic_5">伍</div> </body> </html> 

7.滑动门,利用CSS背景图像的可层叠性,通过元素宽度的可伸缩性创建特定的动态效果

  通过滑动门技术,设计的导航菜单兼具传统布局的呈现效果,但菜单的扩展性更强,可以根据内容多少自动调节

<html> <head lang="en">     <meta charset="utf-8">     <title>CSS_滑动门</title>     <style>         .left{             height: 36px;             /*不能设置元素宽度*/             margin: 100px 200px 0px;             text-decoration: none;             color: white;             display: inline-block;             background: url("images/tools/nav_cont.png") no-repeat;         }         .right{             height: 36px;             padding: 0px 10px;             line-height: 36px;             background: url("images/tools/nav_cont.png") right;         }     </style> </head> <body>     <a href="#" class="left">         <span class="right">联系我们</span>     </a> </body> </html> 

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB前端第十九课——雪碧图&滑动门
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏