<!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>
XHTMT|
HTML5|
CSS|
HTML DOM|
jQuery|
JSON|
AJAX|
LESS|
HTML|
Bootstrap|
Foundation|
AngularJS|
Ember.js|
TypeScript|
AngularJS2|
React|
jQuery UI|
jQuery EasyUI|
Node.js|
Highcharts|
Echarts|
Vue.js|
CoffeeScript|
Ext.js|
Meteor|
SASS|
Omi|
Markdown|
前端开发规范|
浏览器|
webpack|
JavaScript|
CSS3|
用户登录
还没有账号?立即注册
用户注册
投稿取消
文章分类: |
|
还能输入300字
上传中....