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

php中文网

发布时间：2016-05-16 19:13:21

1689人浏览过

来源于php中文网

原创

功能：

1.图片可以缩放，外框也随之变动。

2.图片缩放后，居底对齐。

3.鼠标滑上去，边框有虚线。

结构：

源代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="mapbar">
<meta name="keywords" content="mapbar">
<meta name="author" content="www.mapbar.com">
<meta name="robots" content="all">
<title>相册自适应写法 </title>
<style type="text/css"> 
/* 
================================================================== 
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;}/*边框滑动后的颜色*/

</style>
<script> 
function g_b_ccn(obj, addClass, delClass) { 
    var addReg = new RegExp("\\b" + addClass + "\\b"); 
    var delReg = new RegExp("\\b" + delClass + "\\b"); 
    obj.className = obj.className.replace(delReg, ''); 
    if (!obj.className.match(addReg)) { 
        if (obj.className != "") obj.className += (" "+addClass); 
        else obj.className += addClass; 
    } 
} 
</script><div class="sideBlock" onmouseover="g_b_ccn (this, 'borderColor', 'borderColorNone');" onmouseout="g_b_ccn (this, 'borderColorNone', 'borderColor');"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
<td align="center" valign="bottom"> 
 
<div class="t2"> 
            
           <div class="b2"> 
             
            <div class="t1"><img src="http://hiphotos.baidu.com/ouhee/pic/item/2fc52efa66a32c8c9f514652.jpg" alt=""></div> 
    
             
            <div class="m1"> 
              
             <div class="m2"> 
              <img src="http://hiphotos.baidu.com/ouhee/pic/item/56f64282bae68ba70df4d27d.jpg" alt=""    style="max-width:90%"  style="max-width:90%" onload="this.parentNode.parentNode.parentNode.parentNode.style.width=this.offsetWidth+30+'px';">
</div> 
            </div> 
             
            <div class="b1"> 
             <img src="http://hiphotos.baidu.com/ouhee/pic/item/f731cccaa4a65d43f31fe752.jpg" alt="">
</div> 
    
           </div> 
</div> 
</td> 
           </tr></table>
<p><a href="#">底部底部边边</a></p> 
<p>底部底部边边</p><div class="aritcle_card flexRow">
							<div class="artcardd flexRow">
								<a class="aritcle_card_img" href="/ai/1136" title="Booltool"><img
										src="https://img.php.cn/upload/ai_manual/001/246/273/68b6dbb9c84b7149.png" alt="Booltool"></a>
								<div class="aritcle_card_info flexColumn">
									<a href="/ai/1136" title="Booltool">Booltool</a>
									<p>常用AI图片图像处理工具箱</p>
								</div>
								<a href="/ai/1136" title="Booltool" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
							</div>
						</div> 
<p>底部底部边边</p> 
</div>

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

HTML、CSS和jQuery：创建一个流式布局的技术指南

JavaScript数字处理_大数运算精度控制

JavaScript中正则表达式分组匹配的实现：Python对应逻辑转换指南

javascript如何操作DOM元素？【教程】

javascript的jQuery是什么_它为何曾经如此流行？