1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>无标题页</title> 5 <style type="text/css"> 6 *{ 7 margin:0px;padding:0px;} 8 #boss{ 9 text-align:center; 10 width:800px; 11 margin:0px auto; 12 } 13 #top{ 14 width:100%; 15 border:solid 1px black; 16 height:130px; 17 margin-bottom:5px; 18 } 19 #content{ 20 float:left; 21 width:100%; 22 border:solid 1px black; 23 height:auto !important; 24 height:480px; 25 min-height:480px; 26 margin-bottom:5px; 27 } 28 #foot{ 29 width:100%; 30 border:solid 1px black; 31 height:60px; 32 clear:both; 33 } 34 #left{ 35 width:195px; 36 float:left; 37 height:436px; 38 border:solid 1px black; 39 margin-left:4px; 40 margin-top:5px; 41 margin-bottom:4px; 42 margin-right:0px; 43 } 44 #right{ 45 margin:5px; 46 padding:3px; 47 width:570px; 48 float:right; 49 border:solid 1px black; 50 text-align:left; 51 margin-left:0px; 52 margin-right:3px; 53 } 54 #xiangce{ 55 width:100%; 56 margin:0px auto; 57 float:left; 58 margin-left:3px; 59 } 60 #xiangce ul li img{ 61 width:164px; 62 height:120px; 63 margin:10px; 64 margin-left:7px; 65 margin-right:7px; 66 margin-bottom:3px; 67 `box-shadow: 3px 3px 14px gray; 68 -moz-box-shadow: 3px 3px 14px gray; 69 -webkit-box-shadow: 3px 3px 14px gray; 70 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='gray'); 71 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='gray')"; 72 cursor: hand; 73 } 74 #xiangce ul li{ 75 text-align:center; 76 align:center; 77 float:left; 78 list-style:none; 79 width:189px; 80 cursor:hand; 81 } 82 span{ 83 font-size:12px; 84 text-align:left; 85 margin-left:0px; 86 font-family: Georgia,Courier New,宋体; 87 } 88 .li-shadow{ 89 background-color:#DEDDE3; 90 } 91 </style> 92 <script type="text/javascript"> 93 window.onload = function() { 94 var list = document.getElementsByTagName("li"); 95 for (var i = 0; i < list.length; i++) { 96 list[i].onmouseover = function() { 97 for (var j = 0; j < list.length; j++) { 98 list[j].className = ''; 99 } 100 this.className = 'li-shadow'; 101 } 102 } 103 } 104 </script> 105 </head> 106 <body> 107 <div id="boss"> 108 <div id="top"> 109 </div> 110 <div id="content"> 111 <div id="left"> 112 </div> 113 <div id="right"> 114 <div id="title" style="margin: 0px auto; 200px;"> 115 此div自动适应高度 116 </div> 117 <div id="xiangce"> 118 <ul> 119 <li> 120 <img src="img/050123092821050122141023003.jpg" /><span>共20张照片</span></li> 121 <li> 122 <img src="img/2bd9ecd5e492d16b9a502737.jpg" /><span>共12张照片</span></li> 123 <li> 124 <img src="img/30200db3f12301bed9335af6.jpg" /><span>共32张照片</span></li> 125 <li> 126 <img src="img/87e20b04b71ca542738b6537.jpg" /><span>共111张照片</span></li> 127 <li> 128 <img src="img/2009127144154516.jpg" /><span>共33333张照片</span></li> 129 <li> 130 <img src="img/2bd9ecd5e492d16b9a502737.jpg" /><span>共5234523张照片</span></li> 131 <li> 132 <img src="img/30200db3f12301bed9335af6.jpg" /><span>共2232340张照片</span></li> 133 <li> 134 <img src="img/050123092821050122141023003.jpg" /><span>共20张照片</span></li> 135 136 <li> 137 <img src="img/2009127144154516.jpg" /><span>共20张照片</span></li> 138 <li> 139 <img src="img/2bd9ecd5e492d16b9a502737.jpg" /><span>共20张照片</span></li> 140 <li> 141 <img src="img/30200db3f12301bed9335af6.jpg" /><span>共20张照片</span></li> 142 <li> 143 <img src="img/87e20b04b71ca542738b6537.jpg" /><span>共20张照片</span></li> 144 </ul> 145 </div> 146 </div> 147 </div> 148 <div id="foot"> 149 </div> 150 </div> 151 </body> 152 </html>