技术贴
来黑马学前端快一个月了，跟着老王学习css和html，学习到了学校里学不到的知道，特别是老王每次讲实际开发中的该怎么样怎么样的，我都会记录下来比如写一个ul嵌套li再嵌套a的时候应该
css书写：
01、设置大的div的实体化宽高
02、设置li的样式：左浮动float:left;，设置li的固定高度，宽度分为两种情况：
情况1：如果导航里面的文字个数一致，我们就直接将li的宽度固定死；
情况2：如果导航里面的文字不一样多，那么就不要给li设置宽度，后面用a来撑开；
03、设置a的样式： 首先将a的显示模式用display:block;转化为块元素,然后设置a的宽和高，高和li的高度一致，宽度如果文字一样多我们就设置为固定的宽度，如果文字不一样多，宽度就不设置，用padding：0 20px;撑开，意思就是上下内边距为0，左右设置一个固定的值就可以撑开a；
学会了如何去利用photoShop去切图，知道了Cuttman切图神器的使用，利用精灵图的时候我们应该设置放置精灵图的盒子适当的宽和高，使用background-posion 去移动精灵图。
如何利用iconfont
01、将自己想要的图标加入到购物车
02、点击购物车，选择添加到项目（如果没有想要的项目就自己新建一个项目）--- 确定
03、图标管理 --- 我的项目 --- 我发起的项目 --- 选择对应的项目
04、下载图标字体包并且解压
05、打开demo_index.html 文件查看下载的图标
03 使用的话咱们常用前两种
第一种字体使用
Unicode 引用
Unicode 是字体在网页端最原始的应用方式，特点是：
o兼容性最好，支持 IE6+，及所有现代浏览器。
o支持按字体的方式去动态调整图标大小，颜色等等。
o但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
Unicode 使用步骤如下：
第一步：拷贝项目下面生成的 @font-face
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
第二步：定义使用 iconfont 的样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第三步：挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span>
font-class 引用（推荐使用）
使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span> |
|
收藏
淘帖
踩
