国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > 碳纤维风格的插入式导航菜单:HTML代码

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

来源:程序员人生   发布时间:2014-02-05 23:04:39 阅读次数:1627次

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

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生