09-实战拓展（ico图标、图标字体、网站优化三大标签、logo优化、过渡transition、:focus获取元素焦点）

1. 网站ico图标

使用ico图标

• 首先把favicon.ico 这个图标放到根目录下。
• 再html里面， head 之间 引入 代码。

<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>  

制作ico图标

• 首先把我们想要的切成图片。
• 要把图片转换为 ico 图标，我们借助于第三方转换网站： http://www.bitbug.net/ 。 比特虫

2.网站优化三大标签

网页title标签
首页标题：网站名（产品名）- 网站的介绍

description 网站说明
遵循简短原则，字符数含空格在内不要超过 120 个汉字。补充在 title 和 keywords 中未能充分表述的说明。

<meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX、小米Note 2，红米手机系列红米Note 4、红米4，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />

keywords 关键字
用英文逗号 关键词1,关键词2

<meta name="keywords" content="小米,小米6,红米Note4,小米MIX,小米商城" />

3. 图标字体

3.1 字体图标优点

可以做出跟图片一样可以做的事情,改变透明度、旋转度，等…
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小，但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备必备良药…

3.2 字体图标使用流程

3.3 设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作， 他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标， 比如下图：

之后保存为svg格式，然后给我们前端人员就好了。

其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。

3.4 上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。
​ 推荐网站： http://icomoon.io

• icomoon字库
  IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
• 阿里icon font字库
  http://www.iconfont.cn/
  这个是阿里巴巴M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里巴巴图标库。可以使用AI制作图标上传生成。免费！！

3.5 下载兼容字体包

3.6 字体引入到HTML

得到压缩包之后，我们得知字体图标 本质就是 字体文件。 注意这个压缩包不要删掉，后面还有用的。

1. 首先把 fonts文件夹放入我们 根目录下 。
   

2. html标签内里面添加结构

   

<span></span>  

3. 在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

@font-face {
	  font-family: 'icomoon';
	  src:  url('fonts/icomoon.eot?7kkyc2');
	  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
		    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
		    url('fonts/icomoon.woff?7kkyc2') format('woff'),
		    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
	  font-weight: normal;
	  font-style: normal;
}

4. 给盒子使用字体

span {
   		font-family: "icomoon";
}

3.7 追加字体图标

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。

4. logo 优化

• logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
• h1里面在放一个连接，可以返回首页的， 给连接一个 大小 和 logo 的背景图片
• 连接 里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来
  • 要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法
  • 直接给font-size: 0; 就看不到文字了， 京东的做法。
• 最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了

<!-- logo -->
<div class="logo">
	<h1><a href="index.html" title="网站名称">网站名称</a></h1>
</div>

.logo a {
	display: block;
	width: 175px;
	height: 56px;
	background: url(../img/logo.png) no-repeat;
	font-size: 0;
}

5. 过渡transition（css3）

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

• 属性:想要变化的 css 属性
• 花费时间：单位为s
• 运动曲线：默认为ease
• 何时开始 ：默认0s

关于transition-timing-function时间曲线：

• ease - 逐渐慢下来，规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear - 匀速，规定从开始到结束具有相同速度的过渡效果
• ease-in -加速，规定缓慢开始的过渡效果
• ease-out - 减速，规定缓慢结束的过渡效果
• ease-in-out - 先加速后减速，规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

div {
	width: 200px;
	height: 100px;
	/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
	transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
	/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
  
			
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */
	width: 600px;
	height: 300px
}

6. 获取焦点元素

:focus 伪类 选择器用于选取获得焦点的元素 。主要针对的是 表单元素

.total input {
	border: 1px solid #ccc;
	height: 30px;
	width: 40px;
	transition: all .5s;
}
/*这个input 获得了焦点*/
.total input:focus {
	width: 80px;
	border: 1px solid skyblue;
}