問題overflow：hide，隱藏超出部分的圖片,這里沒有實現(xiàn)了？？
???
???
? 圖片下部分沒有隱藏，這里全部顯示。
#box ul li{ width=164px;height:auto;float:left;margin:7px;border:1px solid gray;} //設置li樣式? .a-img{height:164px;width:164px;display:block;? overflow:hidden; }
?? ?p a,p span{
?? ??? ?display:block;
?? ??? ?line-height:23px;
?? ??? ?padding-left:10px;
?? ?}
2015-11-26
給一下頁面結構
2015-11-26
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01//EN"?"http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>無標題文檔</title> <style?type="text/css"> ????*{margin:0px;padding:0px;} ????body{font:"微軟雅黑";font-size:14px;} ????a{text-decoration:none;} ????ul,li{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://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg)?no-repeat?-38px?0px;?}?? ????.btn-car-on{background:#fff?url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg)?no-repeat?-21px?-34px;} ????.btn-list-on{background:#fff?url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg)?no-repeat?-21px?0px;} ????.btn-car-off{background:#fff?url(http://img1.sycdn.imooc.com//53ab7e86000153cc00710057.jpg)?no-repeat?-38px?-32px;} ???? ????#box?ul?li{?width=164px;height:auto;float:left;margin:7px;border:1px?solid?gray;}?//設置li樣式,就是每一個人的信息塊=文字和照片 ????.a-img{height:164px;width:164px;display:block;??overflow:hidden;?} ????p?a,p?span{ ????????display:block; ????????line-height:23px; ????????padding-left:10px; ????} ????.bottom{height:40px;line-height:40px;text-align:center;background-color:#ccc;} ????.small{height:50px;width:50px;margin:5px;??float:left;} </style> </head> <body> <div?id="box"> ????<div?class="top"> ????????<a?href="#"?title="列表模式"?id="btn1"?class="btn-list-off"></a> ????????<a?href="#"?title="卡片模式"?id="btn2"?class="btn-car-on"></a> ????</div> ????<ul> ????????<li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img?"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"?/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li> ????????? ?????????<li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li><li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li> ????????<li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li><li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li><li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li> ????</ul> </div> </body> </html>對不起！我吧代碼貼錯了！
2015-11-26
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01//EN"?"http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>無標題文檔</title> ? <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01//EN"?"http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>無標題文檔</title> <style?type="text/css"> ????*{margin:0px;padding:0px;} ????body{font:"微軟雅黑";font-size:14px;} ????a{text-decoration:none;} ????ul,li{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://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg)?no-repeat?-38px?0px;} ????.btn-car-on{background:#fff?url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg)?no-repeat?-21px?-34px;} ????.btn-list-on{background:#fff?url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg)?no-repeat?-21px?0px;} ????.btn-car-off{background:#fff?url(http://img1.sycdn.imooc.com//53352d61000153cc00710057.jpg)?no-repeat?-38px?-32px;} ???? ????#box?ul?li{height:auto;width:164px;border:1px?solid?#aaa;float:left;margin:7px;} ????.a-img{height:164px;width:164px;display:block;overflow:hidden;} ????p?a,p?span{ ????????display:block; ????????line-height:23px; ????????padding-left:10px; ????} ????.bottom{height:40px;line-height:40px;text-align:center;background-color:#ccc;} ????.small{height:50px;width:50px;float:left;margin:5px;} </style> <script?type="text/javascript">? ??? ???????//?添加頁面加載完成時的事件,然后執(zhí)行以下代碼。 ????window.onload=function(){ ????????var?listBtn?=?document.getElementById("btn1"); ????????var?carBtn?=?document.getElementById("btn2");??????? ????????//?獲取多個圖片對象???????? ?????????var?imgs?=?document.getElementsByTagName("img"); ????????listBtn.onclick?=?function(){ ????????????? ????????//?改變按鈕的class的值 ????????listBtn.className?="btn-list-on"; ????????carBtn.className?=?"btn-car-off"; ????????//?改變每一個圖片的路徑以及它的對應的父節(jié)點的class的值 ????????for(var?i=0;i<imgs.length;i++){ ????????????imgs[i].src="http://img1.sycdn.imooc.com//53ab7cf4000196c000500050.jpg"; ????????????imgs[i].parentNode.className="small"; ????????} ? ????????} ????????carBtn.onclick?=?function(){? ????????????listBtn.className??=?"btn-list-off";? ????????????carBtn.className?=?"btn-car-on";?????? ????????????for(var?i=0;i<imgs.length;i++) ????????????{ ????????????????imgs[i].src?=?"http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"; ????????????????imgs[i].parentNode.className?=?"a-img"; ????????????} ????????}?? ????} </script> </head> ? <body> <div?id="box"> ????<div?class="top"> ????????<a?href="#"?title="列表模式"?id="btn1"?class="btn-list-off"></a> ????????<a?href="#"?title="卡片模式"?id="btn2"?class="btn-car-on"></a> ????</div> ????<ul> ????????<li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img?"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"?/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li> ????????? ?????????<li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li><li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li> ????????<li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li><li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li><li> ????????????<div?class="con"> ????????????<a?href="#"?class="a-img"> ????????????????<img?src="http://img1.sycdn.imooc.com//53ab7d16000159a801640236.jpg"/> ????????????</a> ????????????<p> ????????????????<a?href="#">白陽</a> ????????????????<span>遼寧</span> ????????????????<span>21個共同好友</span> ?????????????</p>? ?????????????</div> ?????????????<div?class="bottom"> ?????????????????未分組的好友 ?????????????</div> ????????</li> ????</ul> </div> </body> </html>