上下固定中间自适应的div布局 

  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>

 

posted @ 2013-04-13 01:34  Ganler1988  阅读(573)  评论(0)    收藏  举报