【前端】【html/css】前端学习之路（十四）（制作京东项目心得）（完）

1.事前准备

（1）工具使用的是 Webstrom的最新版 和  Fireworks 8 作为切图的辅助工具。

（2）准备CSS Reset类库（normalize.css），为跨浏览器兼容做准备（也可以直接使用京东网站的初始化）

normalize.css   只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。   - 保护有用的浏览器默认样式而不是完全去掉它们 - 一般化的样式：为大部分HTML元素提供 - 修复浏览器自身的bug并保证各浏览器的一致性 - 优化CSS可用性：用一些小技巧 - 解释代码：用注释和详细的文档来

（3）获取ico图标

在每个网页上都有一个标志：

我们可以通过在其链接后加上  favicon.ico  也就是：

 同时将取得的ico文件放置于项目的根目录，也就是：

然后将下列代码置于中

代码：

另外也可以通过 http://www.bitbug.net/  将自己制作的图片转为ico格式。

2.网站优化三大标签

（1）网页标题（Title） 

title是内页的第一个重要标签，是搜索引擎了解网页的入口，也是对网页归属的最佳判断点。

建议命名格式：网站名（产品名）- 网站的介绍

（2）网站说明（Description） 

对比关键词没有那么重要，但是很多搜索引擎都会直接采用meta标签中的网站说明部分作为搜索结果的“内容摘要”，也就是简要说明网页的目的。

格式：

如搜索“小米”结果如下：

而在其源代码中：

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

（3）关键词（Keyword）

Keyword是页面关键字，是搜索引擎的关注重点之一，应该限制在6-8个词左右。

格式：

3.网页布局小知识点

（1）网页布局稳定性

网页制作要善于用F12来检查网页，使用

使用该标志就可以对网页的布局进行查看，检查各个部分是否出错，而各个部分颜色代表部分如下： 

（2）宽度剩余法

 

知识点	说明
浮动元素特性	1. 浮动可以让多个元素同一行显示 2. 浮动的元素是顶部对齐
logo优化	text-indent: -20000px; 隐藏文字（文字必须存在，方便搜索引擎查询）， 背景图片
清除浮动	清除浮动的目的就是为了解决父亲高度为0（导致下方盒子往上走）的问题
鼠标样式	cursor: pointer;   小手 cursor: move;     四角箭头 cursor: text;        插入光标 cursor: default;   小白
不允许换行	white-space: nowrap;

 （3）nav导航栏所用知识点

知识点	说明
边框底侧	border-bottom: 2px solid #ccc;
定位重点	绝对定位不占位置 相对定位占有位置
标签语义化dl	dl也是块级元素 dt 是 定义标题 dd 是定义描述，dd是围绕这dt来描述的，也就是说，dd算是dt 的解释说明详细分解。
标题标签h	尽量少用h1，可以多用h2和h3等标签

 （4）页面底部所用知识点

知识点	说明
绝对定位的盒子居中对齐	盒子 left 50% 然后通过 margin 负值自己的宽度一半（固定定位也是如此）

（5）背景半透明

（6）CSS压缩

在CSS代码完成后可以去网站 http://tool.chinaz.com/Tools/CssFormat.aspx  进行代码压缩，以节省空间。

另外可以在网站  http://validator.w3.org/unicorn/   进行代码的有效性验证。