一款两栏式DIV+CSS标准布局代码,详细如下:
| 代码如下： <html> <head> <title>Nice and Free CSS Template 1</title> <style type="text/css" media="screen"><!-- /* body und schrift deffinitionen */ html, body{ padding:0px; margin:0px; } body { background-color: #e1ddd9; font-size: 12px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; } a { color: #ff66cc; font-size: 11px; background-color:transparent; text-decoration: none; } pre { color: #564b47; font-size: 11px; background-color:transparent; font-family: Courier, Monaco, Monospace; } h1 { font-size:14px; padding-top:50px; text-transform:uppercase; color: #564b47; background-color: transparent; } p,h1,pre { margin:0px 30px 10px 30px; } /* positioning-layers dynamisch */ #content { float:left; width:70%; left: 0px; background:#fff; border-right:2px solid #564b47; border-bottom:2px solid #564b47; margin-right:15px; } #menu { } #menu p { font-size:11px; margin-left:0px;/* fuer den geliebten ie */ } --></style> </head> <body> <div id="content"> <h1>left column</h1> <p>All templates are XHTML 1.0 and CSS2/ tableless.</p> <p><b>2 columns / menu and content dynamic</b><br /> 2 column layout grid. Both columns are dynamic and adjust themselves procentually to the browser window.</p> <br /> <p><a href="/">more nice and free css templates</a></p> <br /> <pre> body { background-color: #8b4513; font-size: 11px; font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif; padding:0px; margin:0px; } #content { float:left; width:70%; background:#fff; border-right:2px solid #996666; border-bottom:2px solid #996666; margin-right:15px; padding-bottom:20px; }</pre> <br /> <br /> </div> <div id="menu"> <h1>right column</h1> <p>the most known site with this layout is<br /> <a href="../../../www.alistapart.com/stories/journey/default.htm">www.alistapart.com</a>. oh, that site has changed its layout. Nevertheless is the site a very important resource and should be mentioned. </p> <p>more info and templates can be found <br /> <a href="/">here</a><br /> <br/> <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> </div> </body> </html> |
以下是HTML脚本特效代码，点击运行按钮可查看效果：
以下是程序代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
