碳纤维风格的插入式导航菜单:HTML…

继上篇”​​碳纤维风格的插入式导航菜单​​“，Richard Carpenter把菜单图片转化为CSS/HTML文档了。我们就一起接着学习吧！

查看CSS/HTML完整版，请点击​​这里​​：

​​

​​

布署文件

在我们开始切割图片之前，先在本地web服务器上布署文件，创建文件夹，在新建的文件夹中新建空白HTML文件”index.html”，空白CSS文件”styles.css”，styles.css放在另一个文件夹”stylesheets”中，最后再新建文件夹”images”存放图片。

创建HTML元素

用代码编辑器打开html文件，在标签”BODY”内新建DIV，设置ID属性为”container”，此DIV将是所有元素的容器，代码如下：

在”container “DIV内创建另外一个DIV，ID属性为”nav”，是包含所有导航元素的容器，代码如下：

在”nav”DIV内创建一个简单的UL无序列表，设置UL的class属性为”navigation”，每个列表元素（LI）也设置不同的class属性，根据class属性来设置LI的样式。代码如下：

以上是主要的HTML代码，接下来开始分割导航图片。

准备导航图片

不管你相不相信，我们只需要一张大图片，呈现正常和激活的状态，然后巧用CSS改变背景图片位置，这种技术称为”​​样式表贴图定位（CSS Sprites）​​“。

这么cool的技术的目的就是通过整合图片（只要加载一次图片，在激活状态下运行也是正常的），减少对服务器的请求次数，提高页面加载速度。整个图片大小是80kb。图片如下：

在photoshop中打开PSD文件，选取”矩形选框”工具，选中整个导航。

然后去往菜单”图像>裁剪”，裁剪后，你将注意到画布变短了，所以要增加画布高度，记住当前画布的高度，乘以2，画布高度将是当前画布的一倍。我的179px，增加一倍后是358px，去往菜单”图像>画布大小”。如下图进行设置：

效果如下：

复制导航菜单

在复制之前，移除激活状态效果。

选择所有导航图层并进行复制，选中复制的图层，垂直往下移，位于原图的正下方，保证两图之间没有缝隙。如下图所示：

上方的导航是浏览器一加载的正常状态，下方的是鼠标激活的状态，所以要给下方的每个按钮增加激活的效果，在此过程中不要移动按钮文字和球体。浏览器会因为一小点的移动而失去原有的效果。

在保存图片之前，移除背景图层，这样两个导航的背景层是透明的，把图片”navigation.png”保存到文件夹”images”中。同时我们还要保存一张拉丝金属背景图”bg.gif”到”images”中。

CSS样式设置

打开”styles.css”，开始编辑HTML元素body和container DIV的样式，代码如下：

对于body，只是简单的增加背景图片，并重复出现。对于container，设置margin为auto，是能让导航图片居中显示，宽度正是导航图片的宽度。

接下来设置nav DIV的样式，代码如下：

我们必须意识到nav DIV的高度和宽度都是固定的，正是导航图片的高度和宽度，而且文本要缩进到-9999px，这样是为了隐藏文本。

接下来设置每个无序列表LI的样式：

背景图片都是一样的，但是宽度和位置不一样。宽度可以在photoshop中测量出来，如下所示：