您的位置 >>> 星想互联 >>> 编程技术 >>> HTML+CSS
水平菜单的另一种制作方法。
点击数:2659  发布时间2012-03-10 15:24:41

下面介绍水平菜单的另一种制作方法。
  【制作要点】
  ·用项目列表的列表项表示水平菜单项;
  ·设置列表项的定位方式;
  ·定义多级的超链接标记<A>的样式menu ul li a及伪类样式menu ul li a

hover。
  【源代码】访问http://www.WtlStWZX.com/webdesign/sj02—16aa.html。
    <htmI>
    <head>
    <title>纯CSS制作的水平菜单</title>
    <style type。”text/css”’
    t{/t星号表示所有元素t/
    margin:0j/t外填充t/
    padding:O;/t内填充’/)
    .menu ulli{
    font-size:14px;/·设定主菜单文字大小t/
    float:left;/·实现项目列表的列表项的水平放置t/J
    .menu ul li af
    display:blockj
    border:ipx solid●aaaj
    background:red;/t主菜单的背景。/
    padding:2px 10px;
    margin:3pxjCOlor:#fff,
    text—decoration:none,}
    .menu 1i a:hover{
    background:If2cdbOj
    color:ff00;
    border:Ipx;text—decoration:underline,
    s01id redj}
    </style>
    (/head>
    <body>
    <div class=”menu’’>
    <ul><!—-菜单被看作为一个项目列表—·>
    <li><a href=…t>超文本标记与样式基础</a></li>
    (1i><a href=…·>客户端脚本</a></li>
    <li><a href=…·>建站技术<la></li>
    (/ul’
    </div’
    </body>
    (/html’

来源:星想互联