品优购项目笔记

- favicon图标
下载：在网址后面输入/favicon.ico
使用：把图标放到根目录下 在html里 head之间引入代码

  <link rel="shortcut icon" href="favicon.ico">

制作：取消背景，切图，存储为web格式。
转换为ico图标 利用第三方转换网站：比特虫http://www.bitbug.net/
常用尺寸：16✖16 32✖32 48✖48

- 网站优化三大标签
1. 网页title 标题
建议：
首页标题：网站名（产品名）- 网站的介绍
例如：
品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

2. Description 网站说明

对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。

我们提倡，Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句。

3. Keywords 关键字

Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。

导航栏通常用ul>li来 根据相关性来分模块
细线：竖线 外边框 盒子
i属于行内元素 没有上下内外边距 可以用line-height来调整

logo用背景图片做

通过input和button的大小来撑开search即可，同时需要浮动（行内块元素之间有缝隙，浮动之后没有缝隙）
i是行内元素没有大小

小技巧：切片横向全部选中—>“切片选择工具”---->上面有一个"划分"

通过ps测精灵图：“窗口”—>“信息面板”

产品图切图时用jpg格式。
div>ul>li 当li一行装不下时 可以将li的父元素ul修改的宽一些，但可能会有溢出的内容（li的边框） 加overflow:hidden即可

如果鼠标所在范围为a的区域很大 就让a的大小和父元素一样。

tab栏切换用ul li来做。

margin和padding一般给a加。
鼠标经过图片 让图片在盒子内移动：给盒子加overflow:hidden

固定定位到版心最右边（左边）margin-left:版心宽度的一半。如果是往左走还需要盒子加上自身的宽度

引入初始化样式/favicon图标/公共样式（html和css）/自身样式

定位的盒子自适应，可以只给高度。

有inline-block出现时：通常加vertical-align:middle。
定位的盒子要有宽和高。

通常去掉边框的效果，我们将边框设置为透明，而不是直接去掉。
input和button可以设置宽和高。

文字类盒子可以直接给高度，文字默认贴着最上沿显示，这样就不用给margin值了。

em是行内元素
行内块元素(button)没有和文字对齐时，用vertical-align:middle;