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

更新时间：2007年05月19日 00:00:00 作者：

功能：

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

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

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

结构：

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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> </head> <body> <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="" height="100" width="100" 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> <p>底部底部边边</p> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript JMap类定义与使用方法示例
这篇文章主要介绍了JavaScript JMap类定义与使用方法,涉及javascript类的定义、内部变量、函数的定义及使用相关操作技巧,需要的朋友可以参考下
2019-01-01
js实现接收表单的值并将值拼在表单action后面的方法
这篇文章主要介绍了js实现接收表单的值并将值拼在表单action后面的方法,涉及JavaScript动态操作字符串及表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
input file的默认value清空与赋值方法
出于安全性考虑，JS是不能直接设置File的value值的，下面是我总结出来的方法
2010-09-09
JavaScript基础教程之如何实现一个简单的promise
看了些promise的介绍，还是感觉不够深入，所以下面这篇文章主要给大家介绍了关于JavaScript基础教程之如何实现一个简单的promise的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2018-09-09
JavaScript中字符串的常用操作方法及特殊字符
这篇文章主要介绍了JavaScript中字符串的常用操作方法及js特殊字符,需要的朋友可以参考下
2018-03-03
使用ECharts进行数据可视化的代码详解
ECharts 是一个由百度开源的强大、灵活的 JavaScript 图表库,用于在 Web 页面上创建各种类型的数据可视化图表,它具有丰富的图表类型、强大的配置选项和良好的跨平台兼容性,本文介绍了如何使用ECharts进行数据可视化,需要的朋友可以参考下
2024-08-08
原生js+canvas实现下雪效果
这篇文章主要为大家详细介绍了原生js+canvas实现下雪效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
Javascript中Null和undefined的简单理解
在JavaScript中存在这样两种原始类型:Null与Undefined,这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined,下面这篇文章主要给大家介绍了关于Javascript中Null和undefined的相关资料,需要的朋友可以参考下
2022-04-04
快速学习JavaScript的6个思维技巧
在这篇文章中，我将介绍六个思维技巧来帮助你更快地学习JavaScript，并成为一个更快乐、更富有成效的程序员。
2015-10-10
用showModalDialog弹出页面后，提交表单总是弹出一个新窗口
用showModalDialog弹出页面后，提交表单总是弹出一个新窗口,其实解决方法很简单如下。
2009-07-07