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.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
原始碼：
<!-- ================================================================== general xhtml 1.0 - Main style sheet - design 2007-05-18 Author - ouhee made by 相簿自適應寫法 ================================================================== --> <!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"> <!--1層-頂部邊框--> <div class="t2"> <!--2層-底部邊框--> <div class="b2"> <!--3-頂部邊框-左圖片--> <div class="t1"></div> <!--3-中間左邊框--> <div class="m1"> <!--4-中間內容右邊框--> <div class="m2"> </div> </div> <!--3-底部邊框-左圖片--> <div class="b1"> </div> </div> </div> </td> </tr> </table> <p>底部底部邊邊</p> <p>底部底部邊邊</p> <p>底部底部邊邊</p> </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
