day08,iconfont的使用,精灵技术,css小箭头制作
day 08
一、iconfont
1、unicode的使用方式
Unicode 是字体在网页端最原始的应用方式，特点是：
- 兼容性最好，支持 IE6+，及所有现代浏览器。
- a支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
<div class="iconfont location"></div>
<div class="iconfont "></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;
width: 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;
width: 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
