碳纤维风格的插入式导航菜单: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代码，接下来开始分割导航图片。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠