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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。