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; width: 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>
