font-family: 'icomoon'
src:url('http://upimage-img.stor.sinaapp.com/icomoon.eot')
src:url('http://upimage-img.stor.sinaapp.com/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://upimage-img.stor.sinaapp.com/icomoon.woff') format('woff'),
url('http://upimage-img.stor.sinaapp.com/icomoon.ttf') format('truetype'),
url('http://upimage-img.stor.sinaapp.com/icomoon.svg#icomoon') format('svg')
font-weight: normal
font-style: normal
}
body {
background-color: #000
}
ul, li {
list-style: none
margin: 0
padding: 0
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
}
ul {
width: 704px
background: linear-gradient(60deg, rgba(158,180,185,1), rgba(222,157,193,1) 50%, rgba(169,156,173,1) 100%)
padding-left: 8px
border-radius: 5px
padding-top: 10px
}
ul::after {
content: ""
display: table
clear: both
}
li {
font-family: "Vrinda"
width: 54px
height: 50px
line-height: 50px
background-color: rgba(255,255,255,.9)
border-radius: 5px
float: left
text-align: center
font-size: 24px
vertical-align: text-top
margin-right: 10px
margin-bottom: 10px
box-shadow: 0 1px 0 rgba(0,0,0,.5)
cursor: pointer
position: relative
}
li:active {
box-shadow: inset 0 1px 0 rgba(0,0,0,.5)
top:1px
}
.icon {
font-family: "icomoon"
}
li:nth-child(11), li:nth-child(21), li:nth-child(22),
li:nth-child(32), li:nth-child(33), li:nth-child(35), li:nth-child(36) {
background: rgba(188,188,188,.5)
font-size: 20px
}
li:nth-child(12) {
margin-left: 20px
}
li:nth-child(21) {
width: 98px
}
li:nth-child(n+22) {
width: 52px
}
li:nth-child(32) {
width: 74px
}
li:nth-child(33) {
width: 176px
}
li:nth-child(34) {
width: 362px
}
li:nth-child(35) {
width: 74px
}
li:nth-child(31), li:nth-child(30) {
box-sizing: border-box
padding-top: 14px
}
li:nth-child(31) span, li:nth-child(30) span {
display: block
line-height: 0.5
}
还是用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 权威指南》
