品优购项目静态页面应用中总结（京东）

1、line-height

• 行高=高度：垂直居中
• 行高<高度：文字偏上
• 行高>高度：文字偏下

2、添加字体图标

    1）将字体的font文件夹放入根目录下

    2）在样式里声明自定义字体（注意路径的正确）

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

    3）利用CSS3伪元素选择器给元素添加字体图标，利用子绝父相确定位置

	.shotcut .fr li {
    position: relative;
}
	.icomoon::after {
	/* 伪元素默认是行内元素 */
	display: inline-block;
    content: '\ea52';
    font-family: 'icomoon';
    font-size: 16px;
    position: absolute;
    top: -2px;
    right: -12px;
}

3、logo优化

    1）logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要

    2）h1里面在放一个a链接，可以返回首页的， 给a链接一个 大小 和 logo 的背景图片

    3）a链接里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来

• 方法一：要用 text-indent 移到盒子外面 （text-indent: -9999px) ，然后overflow:hidden，淘宝的做法
• 方法二：直接给font-size: 0; 就看不到文字了， 京东的做法。

    4）最后给 a链接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了