ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> CSS教程 >> 纯css实现刻度尺列表样式

纯css实现刻度尺列表样式

来源:网络整理     时间:2015-02-28     关键词:

本篇文章主要介绍了"纯css实现刻度尺列表样式",主要涉及到方面的内容,对于CSS教程感兴趣的同学可以参考一下: 首先看看效果图其实这个 刻度尺 就是用border实现的通过将li设置为固定大小,只显示部分border即可达到效果同时li的内容要设置绝对定位,脱离li的限制...

首先看看效果图

其实这个 刻度尺 就是用border实现的

通过将li设置为固定大小,只显示部分border即可达到效果

同时li的内容要设置绝对定位,脱离li的限制

然后看看html内容

<body>
    <ul>
        <li><a href="#">content</a></li>
        <li><a href="#">content</a></li>
        <li><a href="#">content</a></li>
        <li><a href="#">content</a></li>
        <li><a href="#">content</a></li>
    </ul>
</body>

就是一个很简单的列表,那么我们来看看样式是怎么写的
<style>
    a {
        text-decoration: none;
    }

    ul {
        list-style: none;
    }

        ul > li {
            position: relative;
            width: 10px;
            height: 20px;
            border-bottom: 1px solid gray;
            border-left: 1px solid transparent;
        }

            ul > li + li {
                border-left-color: gray;
            }

            ul > li > a {
                display: block;
                position: absolute;
                height: 20px;
                line-height: 20px;
                margin-left: 20px;
                margin-top: 10px;
            }
</style>

以上就介绍了纯css实现刻度尺列表样式,包括了方面的内容,希望对CSS教程有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_114860.html

相关图片

相关文章