程序员人生 网站导航

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

栏目:htmlcss时间:2014-02-05 23:04:39

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

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐