用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]

Maha ·

更新时间:2024-09-20

· 559 次阅读

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.blueidea.com/attachments/2007/5/19/20070519_26707fa407132ea176d6MkdEZM9IABti.gif');}" alt="" src="http://bbs.blueidea.com/attachments/2007/5/19/20070519_26707fa407132ea176d6MkdEZM9IABti.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
功能：
1.图片可以缩放，外框也随之变动。
2.图片缩放后，居底对齐。
3.鼠标滑上去，边框有虚线。
结构：
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('http://bbs.blueidea.com/attachments/2007/5/19/20070519_50b43c575212e5b4b601sOWbnXxVHfW4.gif');}" alt="" src="http://bbs.blueidea.com/attachments/2007/5/19/20070519_50b43c575212e5b4b601sOWbnXxVHfW4.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
源代码：

<title>相册自适应写法 </title> 
/* 
================================================================== 
general xhtml 1.0 - Main style sheet - liquid design 2007-05-18 
Author - ouhee Backa made by 相册自适应写法 
================================================================== 
*/ 
* {margin:0px;padding:0px;font-size:12px;list-style:none;float:none;font-weight:normal; color:#727272;} 
html,body {height:100%;background:#fff;} 
body {text-align:center;margin:0px;padding:0px;background:#fff;} 
body > div{text-align:center; margin-right:auto; margin-left:auto;text-align:left;} 
div,form,img,a img,ul,ol,li,dl,dt,dd{border:0px; text-align:left;} 
h1,h2,h3,h4,h5,h6,p{text-align:left;} 
table,td,tr,th,br{font-size:12px;} 
img{vertical-align:middle;} 
strong{font-weight:bold;} 
.clear {clear: both;overflow: hidden;width: 1px;height: 1px;margin: 0px -1px -1px 0px;border: 0px;padding: 0px;font-size: 0px;line-height: 0px;} 
a{font-size:12px;color:#2d94ff;} 
a:link{text-decoration:underline;} 
a:visited{text-decoration:underline;} 
a:hover{text-decoration:none;color:#fe7bb9;} 
.sideBlock{float:left;width:150px;height:150x;padding:10px 0px;text-align:center;border:1px solid #fff;margin:10px;} 
.sideBlock p{height:24px;line-height:24px;text-align:center;} 
.sideBlock table{margin-bottom:3px;margin:0px auto;} 
.sideBlock table td{height:125px;} 
.sideBlock .t2{background:url(http://hiphotos.baidu.com/ouhee/pic/item/ce38fdcdfae7c9540eb34552.jpg) repeat-x right top;} 
.sideBlock .b2{background:url(http://hiphotos.baidu.com/ouhee/pic/item/2c0860cbea2ba51abf09e652.jpg) repeat-x right bottom;} 
.sideBlock .t1{height:6px;font-size:6px;} 
.sideBlock .m1{background:url(http://hiphotos.baidu.com/ouhee/pic/item/800911461372e90c6a63e552.jpg) repeat-y #fff;} 
.sideBlock .m2{background:url(http://hiphotos.baidu.com/ouhee/pic/item/6ce9cf074a94b1c87a894752.jpg) repeat-y top right;padding:2px 9px 3px 20px;} 
.sideBlock .m2 img{vertical-align:top;} 
.sideBlock .b1{height:7px;font-size:4px;} 
.sideBlock .b1 img{vertical-align:top!important;vertical-align/* */:bottom;} 
.borderColor{border:1px dashed #000;}/*边框滑动过颜色*/ 
.borderColorNone{border:1px solid #fff;}/*边框滑动后的颜色*/ 
 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 <tr> 
 <td align="center" valign="bottom"> 
 <img class="alignnone size-full wp-image-102410" src="/upload/wp-content/uploads/2020/01/fzzzqboqhon.gif" width="300" height="300" alt="" /> 
 <img class="alignnone size-full wp-image-102411" src="/upload/wp-content/uploads/2020/01/vyetjaepibq.gif" width="300" height="300" alt="" /> 
 <img class="alignnone size-full wp-image-102412" src="/upload/wp-content/uploads/2020/01/3m3w5b1wb2h.gif" width="300" height="300" alt="" /> 
</td> 
 </tr> 
</table> 
底部底部边边 
底部底部边边 
底部底部边边

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

兼容 ff IE7 IE6 ie 自适应 CSS