这是咋们需要完成的图片
首先新建一个文件夹，把所需要的素材放进去（个人习惯同一种类型文件放入一个文件夹）
里边所需要的文件夹有css，images，uploads，index.html还有咋们网页头标favicon.ico
给大家看一下我的
咋们先来完成项目的基础公共样式
场景：一般项目开始前，首先会去除掉浏览器默认样式，设置为当前项目需要的初始化样式。
作用：防止不同浏览器中的默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续开发。
要求：已经准备好base.css代码，这个代码在后续项目开发中很常用，只用link引入即可。
给大家看下。
里边代码的作用我用标签给大家标注出来了，有的不懂的看标签提示。
其中浮动以及双伪元素清楚法先写上固定的类名需要用的时候直接给元素加上类名比较方便。
下来是项目结构的搭建
接下来比较易懂我给大家以代码的方式呈现。
现在网页的上部样是这样的
header部分开发
以下就是网页的header部分
先分析，从外往里，分别有两个部分上方的黑框子以及下部导航模块
上方黑色框子取类名为xtx-shortcut，下方模块包含了网页的logo，搜索区域以及购物车，我称它为主导航模块类名取他为xtx-main-nav。
对于这个部分有个习惯比较提倡在每个模块前边加个注释写清楚这是网页的那个模块方便查找。
快捷菜单模块xtx-shourtcut 布局分析
这个模块将浏览器直接沾满咋们称他为通栏，直接不同设置宽度只需设置高度；
导航区域：导航区域位置是当前宽度固定平且水平居中的盒子中。称之为版心。
版心的代码为.container: 版心 这是一个公共类。
实际导航中应该是ul标签中放li标签 li标签中放a标签
他的位置在版心的右侧，所以直接用float：right 右浮动 设置fr这个类就ok了
代码为：
nav标签的代码
总common.css的代码
其中精灵图的素材我就不提供了，想做的人自己去网上搜索素材叭。
