返回顶部

收藏

完美倒排10000条数据

更多
<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <style>
        /*
        看到一道面试题:<ul>有 10000 个<li>子元素,如何将这 10000 个<li>颠倒顺序。
        -------------
        要求是效率尽量要高。不光是算法效率,还要考虑DOM元素操作的效率。大家有什么想法?
        还有就是遇到类似这种问题解题技巧?
        -------------
        答:以下利用了css3旋转属性,将li翻转,同时再ul翻转。完美的倒排!
        */
        ul,li{
            transform: rotate(180deg);
            -ms-transform: rotate(180deg);      /* IE 9 */
            -webkit-transform: rotate(180deg);  /* Safari and Chrome */
            -o-transform: rotate(180deg);       /* Opera */
            -moz-transform: rotate(180deg);     /* Firefox */
            list-style-type:none;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1行</li>
        <li>这是第2行</li>
        <li>这是第3行</li>
        <li>这是第4行</li>
        <li>这是第5行</li>
        <li>这是第6行</li>
        <li>这是第7行</li>
        <li>这是第8行</li>
        <li>这是第9行</li>
        <li>这是第10行</li>
        <li>这是第11行</li>
        <li>此处省略数千行</li>
        <li>。。。。。</li>
        <li>这是第9998行</li>
        <li>这是第9999行</li>
        <li>这是第10000行</li>
    </ul>
</body>
</html>

标签:css

收藏

0人收藏

支持

0

反对

0