慕课网上学习的简单的信息排列效果
源码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 *{margin:0;padding:0;} 9 body{ 10 font-family: "微软雅黑"; 11 font-size:13px; 12 } 13 a{ 14 text-decoration: none; 15 } 16 ul{ 17 list-style:none; 18 } 19 #box{ 20 height:auto; 21 550px; 22 border:1px solid #aaa; 23 margin:0 auto; 24 overflow:hidden; 25 } 26 .top{ 27 height:40px; 28 } 29 .top a{ 30 height:16px; 31 16px; 32 display:block; 33 float:right; 34 margin:5px; 35 } 36 .btn-list-off{ 37 background:#fff url(images/btns.jpg) no-repeat -38px 0px; 38 } 39 .btn-list-on{ 40 background:#fff url(images/btns.jpg) no-repeat -21px 0px; 41 } 42 .btn-car-on{ 43 background:#fff url(images/btns.jpg) no-repeat -21px -34px; 44 } 45 .btn-car-off{ 46 background:#fff url(images/btns.jpg) no-repeat -38px -32px; 47 } 48 #box ul li{ 49 height:auto; 50 164px; 51 border:1px solid #aaa; 52 float:left; 53 margin:7px; 54 55 } 56 #clearfloat{ 57 clear:both; 58 } 59 .a-img{ 60 display:block; 61 height:164px; 62 164px; 63 overflow: hidden; 64 } 65 p a,p span{ 66 display:block; 67 line-height:23px; 68 padding-left:10px; 69 } 70 #bottom{ 71 height:40px; 72 line-height:40px; 73 text-align: center; 74 background-color: #ccc; 75 } 76 .small{ 77 display:block; 78 45px; 79 height: 50px; 80 float:left; 81 margin:4px; 82 } 83 </style> 84 <script type="text/javascript"> 85 window.onload =function(){ 86 //获取按钮 87 var listBtn = document.getElementById("btn1"); 88 var carBtn = document.getElementById("btn2"); 89 var imgs = document.getElementsByTagName("img"); 90 91 listBtn.onclick = function(){ 92 //改变按钮的class的值 93 listBtn.className = "btn-list-on"; 94 carBtn.className = "btn-car-off"; 95 //改变每一个图片的路径以及它的对应的父节点的class的值 96 for(var i=0;i<imgs.length;i++) 97 { 98 imgs[i].src = "./images/small.jpg"; 99 imgs[i].parentNode.className = "a-img small"; 100 } 101 } 102 carBtn.onclick = function(){ 103 //改变按钮的class 104 listBtn.className = "btn-list-off"; 105 carBtn.className = "btn-car-on"; 106 //改变每一个图片的路径以及它的对应的父节点的class的值 107 for(var i=0;i<imgs.length;i++) 108 { 109 imgs[i].src = "./images/big.jpg"; 110 imgs[i].parentNode.className = "a-img"; 111 } 112 } 113 } 114 115 </script> 116 </head> 117 118 <body> 119 120 <div id="box"> 121 <div class="top"> 122 <a href="#" title="列表模式" id="btn1" class="btn-list-off"></a> 123 <a href="#" title="卡片模式" id="btn2" class="btn-car-on"></a> 124 </div> 125 <ul> 126 <li> 127 <div class="con"> 128 <a href="#" class="a-img "> 129 <img src="images/big.jpg" /> 130 </a> 131 <p> 132 <a href="#">白阳</a> 133 <span>辽宁</span> 134 <span>21个共同好友</span> 135 </p> 136 </div> 137 <div class="bottom"> 138 未分组的好友 139 </div> 140 </li> 141 <li> 142 <div class="con"> 143 <a href="#" class="a-img"> 144 <img src="images/big.jpg"/> 145 </a> 146 <p> 147 <a href="#">白阳</a> 148 <span>辽宁</span> 149 <span>21个共同好友</span> 150 </p> 151 </div> 152 <div class="bottom"> 153 未分组的好友 154 </div> 155 </li> 156 <li> 157 <div class="con"> 158 <a href="#" class="a-img"> 159 <img src="images/big.jpg"/> 160 </a> 161 <p> 162 <a href="#">白阳</a> 163 <span>辽宁</span> 164 <span>21个共同好友</span> 165 </p> 166 </div> 167 <div class="bottom"> 168 未分组的好友 169 </div> 170 </li> 171 <li> 172 <div class="con"> 173 <a href="#" class="a-img"> 174 <img src="images/big.jpg"/> 175 </a> 176 <p> 177 <a href="#">白阳</a> 178 <span>辽宁</span> 179 <span>21个共同好友</span> 180 </p> 181 </div> 182 <div class="bottom"> 183 未分组的好友 184 </div> 185 </li> 186 <li> 187 <div class="con"> 188 <a href="#" class="a-img"> 189 <img src="images/big.jpg"/> 190 </a> 191 <p> 192 <a href="#">白阳</a> 193 <span>辽宁</span> 194 <span>21个共同好友</span> 195 </p> 196 </div> 197 <div class="bottom"> 198 未分组的好友 199 </div> 200 </li> 201 <li> 202 <div class="con"> 203 <a href="#" class="a-img"> 204 <img src="images/big.jpg"/> 205 </a> 206 <p> 207 <a href="#">白阳</a> 208 <span>辽宁</span> 209 <span>21个共同好友</span> 210 </p> 211 </div> 212 <div class="bottom"> 213 未分组的好友 214 </div> 215 </li> 216 </ul> 217 </div> 218 </body> 219 </html>
慕课网原课程：http://www.imooc.com/learn/62