day08,iconfont的使用,精灵技术,css小箭头制作

day 08

一、iconfont

官网：https://www.iconfont.cn/

1、unicode的使用方式

Unicode 是字体在网页端最原始的应用方式，特点是：

• 兼容性最好，支持 IE6+，及所有现代浏览器。
• a支持按字体的方式去动态调整图标大小，颜色等等。
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

<div class="iconfont location">&#xe61e;</div>
<div class="iconfont ">&#xe61e;</div>

.location {
    font-size: 50px;
    color: aqua;
}

2、font class的使用方式

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

与 Unicode 使用方式相比，具有如下特点：

• 兼容性良好，支持 IE8+，及所有现代浏览器。
• 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
• 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
• 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

<!-- font-class -->
<div class="iconfont icon-jiantouarrow491-copy"></div>
<div class="iconfont icon-sanjiao"></div>

二、精灵技术

css sprites，雪碧图、精灵图、css贴图技术、css贴图定位

1、精灵技术原理

将很多个小图片拼合到一张大图上，配合"background-image"、"background-repeat"、"background-position"等属性来控制图片的位置

2、精灵技术的适用场景

适合小图标，不适合大背景大布局

3、精灵技术的优缺点

（1）优点

• 减少网页http的请求次数，从而大大提高页面性能
• 减少页面中图片命名困扰
• 更换风格方便

（2）缺点

必须限制容器的大小，让容器正好装下需要显示的图片，需要计算

三、css小箭头

1、基本思路

• 需要用css绘制两个三角形
• 通过定位让两个三角形完全重叠到一起
• 调整两个三角形的偏移量，让第一个三角形和第二个三角形之间产生小间距
• 让上面的三角形边框颜色调整为大的背景颜色即可

 <div class="arrow">
    <div class="arrow1"></div>
    <div class="arrow2"></div>
</div>

<style>
    .arrow {
        position: relative;
    }
    .arrow1 {
        position: absolute;
        left: 0;
        top: 0;
         0;
        height: 0;
        border: 100px solid;
        border-color:  transparent red transparent transparent;
        font-size: 0;
        line-height: 0;
    }
    .arrow2 {
        position: absolute;
        left: 2px;
        top: 0;
         0;
        height: 0;
        border: 100px solid;
        border-color:  transparent red transparent transparent;
        font-size: 0;
        line-height: 0;
        border-right-color: white;
    }
</style>

四、命名参考

登录条：loginBar

标志：logo

侧边栏：sideBar

广告：banner

导航：nav

子导航：subNav

菜单：menu

子菜单：subMenu

搜索：search

滚动：scroll

页面主体：main内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

按钮：btn

投票：vote

状态：status

合作伙伴：partner

外 套：wrap

商 标：label

标 题：title

顶导航：topnav

左导航：leftsideBar

右导航：rightsideBar

横幅：banner

菜单内容： menuContent

菜单容器： menuContainer

子菜单： subMenu

边导航图标：sidebarIcon

注释： note

版 权：copyRight

友情链接：friendLink

容器：container

页脚：footer

当前：current

激活：active

购物车：shop

搜索：search

登陆：login

注册：register

下载：download

面包屑：breadCrumb