html最美观的卡片列表,信息列表效果：卡片、列表切换（HTML+CSS+JS案例）

涉及知识点：HTML+CSS+JS DOM

案例效果：

列表模式-卡片模式互换.gif

案例源码：

*{margin:0px;padding: 0px;}

body{font: "微软雅黑";font-size: 14px;}

a{text-decoration: none;}

ul{list-style: none;}

#box{height: auto;width: 550px;border: 1px solid #aaa;margin: 0 auto;overflow: hidden;}

.top{height: 40px;}

.top a{height: 16px;width: 16px;display: block;float: right;margin: 5px;}

.btn-list-off{background:#fff url(http://img.mukewang.com/53ab7e86000153cc00710057.jpg) no-repeat -38px 0px;}

.btn-car-on{background: #fff url(http://