如果是渲染完再排序那么页面会发生”闪现“，严重点会出现页面短暂混乱，如果列表很长那么页面将”自己动起来“，很吓人的。比起页面”自己动起来“宁愿让它短暂的"转圈圈"一点点加载。
还是用js吧，用css肯能只能手动。对元素的一个列表按字母排序
<script>
function sortkids(e){
if(rypeof e=="string"){e = document.getElementById(e)}
var kids = []
for(var x = e.firstChildx!=nullx = x.nextSibling){
if(x.nodeType == 1/*Node.ELEMENT_NODE*/){
kids.push(x)
}
}
kids.sort(function(n,m){
var s=n.firstChild.data
var t=m.firstChild.data
if(s<t){return -1}
else if(s>t){return 1}
else{return 0}
})
for(var i=0i<kids.lengthi++){
e.appendChild(kdis[i])
}
}
</script>
<ul id="list">
<li>one</li><li>two</li><li>three</li><li>four</li>
</ul>
<button onclick="sortkids('list')">Sort list</button>
----------------------------------------------------------------------------------------------------
《Javascript 权威指南》
<body><div class="box">
<!-- 这里是你页面的代码 -->
</div>
</body>
.box{
width:900px
margin:0 auto
background: #0066FF url(../png/背景.png) repeat-y 0 -67px
}
把最上面的<html>替换成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">这个，如果不加这个的话，margin:0 atuo是不会实现居中的
