四栏标准DIV+CSS布局示例
|
以下是代码： <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Nice and Free CSS Template 4</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: 19%; top: 106px; background-color: #ffffff; } #middleleft { position: absolute; left: 22%; width: 28%; top: 106px; background-color: #ffffff; } #middleright { position: absolute; left: 51%; width: 28%; top: 106px; background-color: #ffffff; overflow: auto; } #right { position: absolute; left: 80%; width: 18%; top: 106px; background-color: #ffffff; overflow: auto; } #right, #middleright, #middleleft, #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: 19%; top: 106px; background-color: #ffffff; } </pre> <h3>Warning</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 /> <br /> <br /> </p> </div> <div id="middleleft"> <h3>middleleft</h3> <pre> #middleleft { position: absolute; left: 22%; width: 28%; top: 106px; background-color: #ffffff; } </pre> <h3>Calculations in your head</h3> <p>This example requires some calculations. The sum of the widths yields 98%. The distance from the border of body to the first box plus its width plu the distance yields the left position of the next box. <p>If you want boxes of different width you need to adjust these values accordingly.</p> <p>Use of this code is encouraged! </p> <p>Try it with 2 or 3 columns</p> <br /> <br /> </div> <div id="middleright"> <h3>middleright</h3> <pre> #middleright { position: absolute; left: 51%; width: 28%; top: 106px; background-color: #ffffff; } </pre> <h3>box border</h3> <p>Borders, pading and margin are defined in</p> <pre> #right,#middleright,#middleleft,#left{ border: 1px solid #564b47; padding:0px; margin:0px; } </pre> <h3>Font definitions</h3> <p>Padding are passed to p, h1 and h3.</p> <pre> p,h1, h3, pre { padding: 5px 15px; margin: 0px; } </pre> <br /> <br /> </div> <div id="right"> <h3>right</h3> <pre> #right { position: absolute; left: 80%; width: 18%; top: 106px; background-color: #ffffff; } </pre> <h3>open code</h3> <p>Use of this code is encouraged! (o_.)/</p> <br /> <br /> </div> </body> </html> |
以下是HTML脚本特效代码，点击运行按钮可查看效果：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
时间： 2024-11-08 19:13:11