上下固定中间自适应的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>

 

你可能感兴趣的:(div)