您现在的位置是：网站首页> 编程资料编程资料

css 列表菜单的设计_CSS教程_CSS_网页制作_

2021-09-08 909人已围观

简介 这是一个很简单的教程,主要教你怎么用list的边框样式和背景图像来创建一个菜单出来.技巧在于使用list的相对定位,来转移边框的位置.

这个技巧非常灵活,你可以轻松的改变边框和背景的布局.它甚至可以让浏览器的字体逐渐变小(也可以增大).

1.认真的查看下面的html代码,并配合下面的示图,可以让你更加清楚这些代码的作用.

复制代码
代码如下:


  • CSS Design25095



2.给
  • postion:relative 并添加一个底边框样式.
    给 设 position:absolute 并使用负值让它们位于边框之下.

    注:使用相对值来控制padding的空间.

    复制代码
    代码如下:

    .menu {
    width: 500px;
    list-style: none;
    margin: 0 0 2em;
    padding: 0;
    font: 150%/100% Arial, Helvetica, sans-serif;
    }
    .menu li {
    clear: both;
    margin: 0;
    padding: 0 0 1.8em 0;
    position: relative;
    border-bottom: dotted 2px #999;
    }
    .menu strong {
    background: #fff;
    padding: 0 10px 0 0;
    font-weight: normal;
    position: absolute;
    bottom: -.3em;
    left: 0;
    }
    .menu em {
    background: #fff;
    padding: 0 0 0 5px;
    font: 110%/100% Georgia, "Times New Roman", Times, serif;
    position: absolute;
    bottom: -.2em;
    right: 0;
    }
    .menu sup {
    font-size: 60%;
    color: #666;
    margin-left: 3px;
    }

    3.现在来设置
  • 的CSS样式

    复制代码
    代码如下:

    li {
    border-bottom: dashed 1px #000;
    padding: 0 0 2.3em 0;

    4.也可以使用背景图片来做边界(见后面的演示)

    复制代码
    代码如下:

    li {
    background: url(images/circle.gif) repeat-x left bottom;
    }

    5.如果你仍在使用IE6以下版本或者buggier IE6,你可能会注意到布局显示不正常,要解决这个问题,只要添加clearfix 给
  • 元素.

    复制代码
    代码如下:

    /* clearfix */
    .menu li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .menu li {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .menu li {height: 1%;}
    .menu li {display: block;}
    /* End hide from IE-mac */

    源码下载

    上一篇：CSS 超出隐藏实现限制字数的功能代码(多浏览器)_CSS教程_CSS_网页制作_

    下一篇：网页中图片应用CSS的滤镜的效果_CSS教程_CSS_网页制作_

    • 相关内容

    点击排行

    本栏推荐

    猜你喜欢