软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > 碳纤维风格的插入式导航菜单:HTML代码

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

相关阅读
网友评论
栏目导航
推荐软件