菜单详细制作教程一.doc

菜单一说明文档 效果图：如下： 今天我们来学习制作菜单一，菜单一是一种比较典型的菜单，各大网站用的都是这种菜单样式。 今天的教程我们一步步的来讲解。先通过效果实现。然后效果优化，添加特效 一，效果实现 第一步。新建html页面 ，并且添加菜单，代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title/title /head body div id=body_menuIndex ul id=body_menu_ul lia href=#站点首页/a/li li a href=/xiaowu668/article/article.jsp各类文章/a ul li a href=#JAVA文章/a ul lia href=#J2SE文章/a/li lia href=#J2ME文章/a/li li a href=#J2EE文章/a ul lia href=#JSP文章/a/li lia href=#SSH文章/a/li /ul /li /ul /li lia href=#ASP.NET文章/a/li lia href=#C++文章/a/li lia href=#VB文章/a/li lia href=#ASP文章/a/li lia href=#PHP文章/a/li lia href=#Delphi文章/a/li lia href=#其他文章/a/li /ul /li li a href=#软件下载/a ul lia href=#应用软件/a/li lia href=#系统软件/a/li lia href=#图形图像/a/li lia href=#多媒体类/a/li lia href=#行业软件/a/li lia href=#编程开发/a/li lia href=#编程开发/a/li lia href=#黑客软件/a/li /ul /li li a href=#动画频道/a ul lia href=#编程教程/a/li lia href=#其他教程/a/li /ul /li li a href=#源码下载/a ul lia href=#ASP源码/a/li lia href=#JSP源码/a/li lia href=#PHP源码/a/li lia href=#.NET源码/a/li lia href=#其他源码/a/li /ul /li lia href=#模板下载/a/li lia href=#我的相册/a/li /ul /div /body /html 图1.1 第二步：给div id=body_menuIndex 添加边框效果：代码如下： #body_menuIndex { margin:0; padding:0; width:100%; height:25px; border:solid 1px Red; border-width:5px 1px 1px; } 显示效果： 图1.2 第三步：让菜单横着显示： 添加代码如下： #body_menu_ul li { float: left; position: relative; } 上面这个样式的意思是: #body_menu_ul下面所有的li元素都是向左停靠，所以下面的所有的li菜单都是横着的。