html 和css总结 — 品优购再html里面， head 之间引入代码。 2. 制作ico图标我们可以自己做的

1 使用ico图标

字体图标在网址后面输入 favicon.ico 即可 www.jd.com/favicon.ico

再html里面， head 之间引入代码。

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

2. 制作ico图标

我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。

方法步骤：

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

3.网站优化

 <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
 <meta name="description"
 content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />

制作小竖线的方法：使用一个小盒子，盒子width：1px，高度量取，左右用margin撑开

4. 上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。

推荐网站： icomoon.io

icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

阿里icon font字库

www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！

5. 下载兼容字体包

刚才上传完毕，网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了

当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了，直接到刚才的网站上找喜欢的下载使用吧。

6. 字体引入到HTML

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

1498032122244

最后一步，是最重要的一步了，就是字体文件已经有了，我们需要引入到我们页面中。

首先把 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";
	}

7. 追加字体图标

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

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

11. logo 优化

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

两个表单元素之间会有缝隙，使用浮动解决比如input和button

去掉边框：border:0

取消蓝色的轮廓线（button和input） outline: none;

count 小图标字是从左往右写的，因此要使用left定位

定位会相对于父级元素

重点：字体图标使用

a 元素不能继承父元素的字体和颜色

打开计算器 calc

i是行内元素，不能设置大小

但浮动的盒子可以设置大小

定位的盒子也可以设置大小

解决margin引起的外边距塌陷的问题

在父元素加 overflow:hiddern

img 和input 行内块元素可以使用text-align:center居中，还可以设置margin

a标签是行内元素，不能设置width，height。可以设置margin，padding，但是margin，padding属性只对左右有效。

a 标签为不能继承父类的颜色，所以给a 设置颜色，不能设置在父元素上，他无法继承，要写在自己样式里面

ul 里面的li浮动,ul会没有高度，然后给ul加margin就没有作用了，可以使用 overflow:hiddern清除浮动

固定定位到版心左侧：

position:fixed;
top:100px;
left:50%;//对齐浏览器的一半
margin-left:-版心的一半
margin-left:-固定的盒子的宽度

ctrl+0 恢复网页原来大小

css过度动画

语法格式

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

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

			width: 600px;
			height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

删除线标签：

display: inline-block; 行内块元素 (input button img) 不独占一行可以设置宽度高度上下padding margin

vertical-align: middle; 行内块元素和文字在一条水平线上

长方形的圆角：border-radiius:高度的一半

cursor:not-allowed 禁止点击

html 和css总结 — 品优购