关于品优购项目的一些笔记和心得体会（一）

关于品优购项目的一些笔记和心得体会（一）

项目名称：品优购
项目描述：品优购是一个电商网站，我们要完成首页、列表页、详情页、注册页面的制作
项目目的：复习、总结、提高前面所学布局技术。

【1】SDO优化

要做好一个成功的网站，一定要注意代码中的SDO优化，以下是我在品优购项目中所涉及到的SDO优化部分

网站TDK三大标签的SDO优化

2、logo模块的SDO优化方法

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

【2】字体图标的引入

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，用字体图标来完成会更好。

1. 字体图标优点

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

2、字体图标获取

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

​ 推荐网站： http://icomoon.io

• icomoon字库

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

• 阿里icon font字库

http://www.iconfont.cn/

3. 下载兼容字体包

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

3. 字体引入到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";
   	}
   

4. 追加字体图标

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

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

【3】品优购首页布局

命名集合：

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwrods
导航	nav
导航左侧	dorpdown 包含 .dd .dt
导航右侧	navitems