首页 > 代码库 > 简单的信息排列效果
简单的信息排列效果
慕课网上学习的简单的信息排列效果
源码：
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 width: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 width: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 width: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 width: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 width: 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 = "http://www.mamicode.com/images/small.jpg"; 99 imgs[i].parentNode.className = "a-img small"; 100 }101 }102 carBtn.onclick = function(){103 //改变按钮的class104 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 = "http://www.mamicode.com/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="http://www.mamicode.com/#" title="列表模式" id="btn1" class="btn-list-off"></a>123 <a href="http://www.mamicode.com/#" title="卡片模式" id="btn2" class="btn-car-on"></a>124 </div>125 <ul>126 <li>127 <div class="con">128 <a href="http://www.mamicode.com/#" class="a-img ">129 <img src="http://www.mamicode.com/images/big.jpg" />130 </a>131 <p>132 <a href="http://www.mamicode.com/#">白阳</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="http://www.mamicode.com/#" class="a-img">144 <img src="http://www.mamicode.com/images/big.jpg"/>145 </a>146 <p>147 <a href="http://www.mamicode.com/#">白阳</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="http://www.mamicode.com/#" class="a-img">159 <img src="http://www.mamicode.com/images/big.jpg"/>160 </a>161 <p>162 <a href="http://www.mamicode.com/#">白阳</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="http://www.mamicode.com/#" class="a-img">174 <img src="http://www.mamicode.com/images/big.jpg"/>175 </a>176 <p>177 <a href="http://www.mamicode.com/#">白阳</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="http://www.mamicode.com/#" class="a-img">189 <img src="http://www.mamicode.com/images/big.jpg"/>190 </a>191 <p>192 <a href="http://www.mamicode.com/#">白阳</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="http://www.mamicode.com/#" class="a-img">204 <img src="http://www.mamicode.com/images/big.jpg"/>205 </a>206 <p>207 <a href="http://www.mamicode.com/#">白阳</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
简单的信息排列效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。