实战拓展

1. 网站ico图标
2.网站优化三大标签
3. 图标字体
- 3.1 字体图标优点
- 3.2 字体图标使用流程
- 3.3 设计字体图标
- 3.4 上传生成字体包
- 3.5 下载兼容字体包
- 3.6 字体引入到HTML
- 3.7 追加字体图标
4. logo 优化
5. 过渡transition（css3）
6. 获取焦点元素

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

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

首先把 fonts文件夹放入我们根目录下。
html标签内里面添加结构

<span></span>

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

@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;
}

给盒子使用字体

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;
}

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

【HTML+CSS】网站TDK三大标签SEO优化
[HTML+CSS]网站TDK三大标签SEO优化 SEO(Search Engine Optimization) 搜索引擎优化 SEO是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式.其 ...
网站TDK三大标签SEO优化
1.title网站标题 title具有不可替代性,是我们页内的第一个重要标签,是搜索引擎了解网页的入口和网页主题归属的最佳判断点. 建议:网站名(产品名)-网站的介绍(尽量不要超过30个汉字) 例如: ...
网站三大标签是什么？网页三大标签在优化中分别有什么作用？
对于一个SEO人员来说,要做好网站优化,必须要彻底掌握和明白的一个问题就是网站三大标签的作用,即:网站TDK三大标签.首先要明白什么是网页的三大标签(TDK).然后再来讲述三大标签的作用.[SEO网站 ...
网站站内优化三大标签
SEO是由英文Search Engine Optimization缩写而来,意为"搜索引擎化",是一种利用搜索引擎的搜索规则来提高目前有关搜索引擎内的自然排名方式.通过对网站结构调 ...
SEO网站优化三大标签
SEO是由英文Search Engine Optimization缩写而来, 中文意译为"搜索引擎优化"! 常见的搜索引擎,比如百度,谷歌,雅虎,搜狗等等- SEO是指通过对网站进 ...
网站优化三大标签以及logo优化常用方法
网站优化的三大标签 SEO是由英文Search Engine Optimization缩写而来, 中文意译为"搜索引擎优化"!SEO是指通过对网站进行站内优化.网站结构调整.网站内 ...
初学前端收集的字体图标以及字体网站
抱歉,阿里和icomoon长久不使用,忘得差不多了. 一.字体图标 1.font-awesome 引入CSS: https://cdnjs.cloudflare.com/ajax/libs/font- ...
HTML 网站优化三大标签（title ，description ，keywords）
SEO是由英文Search Engine Optimization缩写,也就是搜索引擎优化. SEO中比较重要的地方: 网页title 标题 Description 网站说明 Keywords 关键字 ...
html 三大标签,网站三大标签的正确书写
成都seo蔡江博客和大家一起关注今日seo话题.对于一个网站来说三大标签(TDK)存在的意义非常重大,换句话说就是在站内优化当中tdk非常重要,因为在其中会出现网站的关键词和其他重要信息,是用户搜索的 ...
tdk怎么设置_网站TDK如何设置及优化？
一个好的站长不仅对自己的网站要很熟悉,还要优化好自己的网站.那么,网站TDK怎样写更利于SEO优化? 一.标题标签(Title) 1.独特且不重复:尽量使网站的标题与其他网站和其他网页相同.太多的重复 ...

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