自动伸缩效果.
| 以下是代码： <html> <head> <title>Nice and Free CSS Template 3</title> <style type="text/css" media="screen"><!-- /* body und schrift deffinitionen */ html { padding:0px; margin:0px; } body { background-color: #e1ddd9; font-size: 12px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; padding:0px; margin:0px; } a { color: #ff66cc; font-size: 11px; background-color:transparent; text-decoration: none; } pre { color: #564b47; font-size: 11px; background-color: #e1ddd9; font-family: Courier, Monaco, Monospace; } p,h1, h3, pre { padding: 5px 15px; margin: 0px; } h3 { font-size: 13px; text-transform:uppercase; color: #564b47; background-color: transparent; } /* positioning-layers dynamisch */ #logo { position: absolute; right: 2%; width: 96%; text-align: right; top: 20px; } #left { position: absolute; left: 2%; width: 22%; top: 106px; background-color: #ffffff; } #content { position: absolute; left: 25%; width: 50%; top: 106px; background-color: #ffffff; overflow: auto; } #right { position: absolute; left: 76%; width: 22%; top: 106px; background-color: #ffffff; overflow: auto; } #right, #content, #left { border: 1px solid #564b47; padding:0px; margin:0px; } --></style> </head> <body> <div id="left"> <h3>left</h3> <pre> #left { position: absolute; left: 2%; width: 22%; top: 106px; background-color: #ffffff; } </pre> <h3>Attention</h3> <p>These pages use certain CSS definitions that are unsupported by older browsers.<br /> <a href="/">more nice and free css templates</a></p> <p> <img src="xhtml10.gif" alt="" width="80" height="15" border="0"/><br/> <img src="css.gif" alt="css" width="80" height="15" border="0"/><br /> </p> <br /> <br /> </div> <div id="content"> <h3>middle right</h3> <pre> #content { position: absolute; left: 25%; width: 50%; top: 106px; background-color: #ffffff; overflow: auto; } </pre> <h3>overflow: auto;</h3> <p>With overflow: auto; With overflow: you can determine how overflowing content should be treated.</p> <h3>Values</h3> <pre> visible = The element gets expanded to show the entire content. hidden = The content will be cut if it overflows. scroll = The browser should offer scroll bars. auto = The browser should decide how to render the element. Scroll bars are allowed. </pre> <p>Older browsers do not know support this property.<br /> IE does not support overflow:visible</p> <br /> <br /> </div> <div id="right"> <h3>right</h3> <pre> #right { position: absolute; left: 76%; width: 22%; top: 106px; background-color: #ffffff; overflow: auto; } </pre> <h3>open code</h3> <p>Use of this code encouraged! (o_.)/</p> <br /> <br /> </div> </body> </html> |
以下是HTML脚本特效代码，点击运行按钮可查看效果：
以下是程序代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
