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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 220 ::

收藏到网摘: n/a

input之怎么清除默认值推荐js实现商品分类到搜索栏友好提示（人机交互）

功能：
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" /> </div> </div> <div class="b1"> <img src="http://hiphotos.baidu.com/ouhee/pic/item/f731cccaa4a65d43f31fe752.jpg" alt="" /> </div> </div>
</div>
</td> </tr>
</table>
<a href="#">底部底部边边</a>
底部底部边边
底部底部边边
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

input之怎么清除默认值推荐js实现商品分类到搜索栏友好提示（人机交互）

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

评论 (0) All

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