如何用CSS制作横向菜单 让ul li横向排列及圆点处理.doc

如何用CSS制作横向菜单让ulli横向排列及圆点处理我们先建立一个无序列表，来建立强化美术培训学校导航菜单的结构。代码是：
<divclass="test"><ul>
<li><ahref="http://qianghuaart.com/index.asp">首页</a></li>
<li><ahref="http://qianghuaart.com/djq.asp?id=11">杜建奇</a></li>
<li><ahref="http://qianghuaart.com/xxjj.asp?id=1">走进强化</a></li>
<li><ahref="http://qianghuaart.com/qhjs.asp">师资力量</a></li>
<li><ahref="http://qianghuaart.com/zszx.asp?id=7">招生资讯</a></li>
<li><ahref="http://qianghuaart.com/yxzp.asp?id=8">优秀作品</a></li>
<li><ahref="http://qianghuaart.com/lq.asp?id=11">录取过线</a></li>
<li><ahref="http://qianghuaart.com/xwy.asp?id=3">资讯中心</a></li>
<li><ahref="http://qianghuaart.com/spy.asp">视频中心</a></li>
<li><ahref="http://qianghuaart.com/contact.asp?id=4">联系我们</a></li>
</ul></div>
效果是：

• 首页
• 杜建奇
• 走进强化
• 师资力量
• 招生资讯
• 优秀作品
• 录取过线
• 资讯中心
• 视频中心
• 联系我们

第二步：隐藏li的默认样式，去掉圆点因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。
当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成：
<divclass="test"><ul>
<li><ahref="http://qianghuaart.com/index.asp">首页</a></li>
<li><ahref="http://qianghuaart.com/djq.asp?id=11">杜建奇</a></li>
<li><ahref="http://qianghuaart.com/xxjj.asp?id=1">走进强化</a></li>
<li><ahref="http://qianghuaart.com/qhjs.asp">师资力量</a></li>
<li><ahref="http://qianghuaart.com/zszx.asp?id=7">招生资讯</a></li>
<li><ahref="http://qianghuaart.com/yxzp.asp?id=8">优秀作品</a></li>
<li><ahref="http://qianghuaart.com/lq.asp?id=11">录取过线</a></li>
<li><ahref="http://qianghuaart.com/xwy.asp?id=3">资讯中心</a></li>
<li><ahref="http://qianghuaart.com/spy.asp">视频中心</a></li>
<li><ahref="http://qianghuaart.com/contact.asp?id=4">联系我们</a></li>
</ul></div>CSS定义为：
.testul{list-style:none;}说明：“.testul”表示我要定义的样式将作用在test的层里的ul标签上。
现在的效果是没有圆点了：
• 首页
• 杜建奇
• 走进强化
• 师资力量
• 招生资讯
• 优秀作品
• 录取过线
• 资讯中心
• 视频中心
• 联系我们
第三步：关键的浮动这里是菜单变成横向的关键，我们给li元素加上一个“float:left;”属性，让每个li浮动在前面一个li的左面
。
CSS定义为：
.testli{float:left;}效果是：
•首页•杜建奇•走进强化•师资力量•招生资讯•优秀作品•录取过线•资讯中心•视频中心•联系我们
看，菜单变横向了。就这么简单！下面需要做的就是优化细节了。