divcss:DIV+CSS布局入门示例（四）页面顶部 列表<li>制作菜单

4、页面顶部列表<li>制作菜单
　　开始此节学习前请确认你已经参照的前几节内容写入了DIV、CSS到index.htm和css.css文件中
　　这节我将告诉大家如何用列表<li>来制作菜单



\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<divid=\"menu\">
<ul>
<li><ahref=\"#\">首页</a></li>
<li=\"menuDiv\"></li>
<li><ahref=\"#\">博客</a></li>
<li=\"menuDiv\"></li>
<li><ahref=\"#\">设计</a></li>
<li=\"menuDiv\"></li>
<li><ahref=\"#\">相册</a></li>
<li=\"menuDiv\"></li>
<li><ahref=\"#\">论坛</a></li>
<li=\"menuDiv\"></li>
<li><ahref=\"#\">有关</a></li>
</ul>
</div>


　　以上是这部分结构有有关<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关内容吧它们最主要作用就是在HTML中以列表形式来显示些信息

　　还有点需要大家定要分清楚当在HTML中定义为id=\"divID\"时在CSS对应设置语法则是#divID{}如果在HTML中定义为=\"divID\"时则在CSS中对应设置语法是.divID
　　如果id=\"divID\"这个层中包括了个<img></img>则这个img在CSS中对应设置语法应该是#divIDimg{}同样如果是包含在=\"divID\"这个层中时则设置语法应该是.divIDimg{}这点希望大家要分清楚了
　　另外HTML中切元素都是可以定义例如table、tr、td、th、form、img、input...等等如果你要在CSS中设置它们则直接写入元素名称加上对大括号{}就可以了所有CSS代码都应该写在大括号{}中

　　按照上面介绍我们先在css.css中写入以下代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#menuul{list-style:none;margin:0px;}
#menuulli{float:left;}


　　解释下:
　　#menuul{list-style:none;margin:0px;}
　　list-style:none这句是取消列表前点我们不需要这些点
　　margin:0px这句是删除UL缩进这样做可以使所有列表内容都不缩进

　　#menuulli{float:left;}
　　这里float:left左右是让内容都在同行显示因此使用了浮动属性(float)

　　到这步建议大家先保存预览下效果我们再添加下面内容效果如下:

\" border=\"0\" alt=\"\"/>

这时列表内容是排列在行我们在#menuulli{}再加入代码margin:010px:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#menuul{list-style:none;margin:0px;}
#menuulli{float:left;margin:010px}


　　margin:010px作用就是让列表内容的间产生个20像素距离(左:10px右:10px)预览效果如下:

\" border=\"0\" alt=\"\"/>



现在雏形已经出来了我们再来固定菜单位置把代码改成如下:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#menu{padding:20px20px00}
/*利用padding:20px20px00来固定菜单位置*/
#menuul{float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜单位于页面右侧*/
#menuulli{float:left;margin:010px}


　　这时位置已经确定了可是构思图中菜单选项的间还有条竖线如何办呢？
　　别忘了我们早就已经留好了个空<li=\"menuDiv\"></li>要想加入竖线就使用它了
　　按照上面说思路方法我们再添加以下代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
.menuDiv{width:1px;height:28px;background:#999}


　　保存预览下竖线是否已经出来了？有关这段代码就不多讲了应该是很容易理解

\" border=\"0\" alt=\"\"/>

　　不过菜单选项文字却在顶部我们再修改成以下代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#menuulli{float:left;margin:010px;display:block;line-height:28px}


　　有关display:block;line-height:28px大家可以去参阅下手册我就不多讲了

　　效果基本上已经实现了剩下就是修改菜单超链接样式在css.css中添加以下代码:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#menuullia:link,#menuullia:visited{font-weight:bold;color:#666}
#menuullia:hover{}


　　这个也不多说了没什么好说了最后效果如下:

\" border=\"0\" alt=\"\"/>

　　至此菜单制作就完毕了顺便把素材提供给大家:
　　构思图:\" alt=\"下载文件\" style=\"margin:0px 2px -4px 0px\"/> 点击下载此文件
　　HTML和CSS源文件:\" alt=\"下载文件\" style=\"margin:0px 2px -4px 0px\"/> 点击下载此文件
　　
　　→　◆◆◆　DIV+CSS布局入门举例(目录)　◆◆◆
　　

延伸阅读

• 2010-12-9-- divcss,Div+Css实现屏蔽效果
• 2010-11-24-- divcss,DivCSS网页布局中CSS无效的十个常见原因
• 2010-12-9-- divcss,DIV+CSS的叫法是不准确的
• 2010-12-9-- divcss,10个DIV+CSS需要注意的问题
• 2010-12-9-- divcss,Div+CSS 规则整理 提高效率
• 2010-12-9-- divcss,div+css在思路和流程上实现结构与表现的分离分析
• 2010-12-8-- divcss,10个DIV+CSS常见错误看看你犯了几个
• 2010-11-24-- divcss,根本不存在 DIV + CSS 布局这回事
• 2010-12-9-- seodiv,有利于SEO优化的DIV+CSS的命名规则小结
• 2010-12-9-- divcss,div+css 定位浅析