div+css浮在右上方的布局樣本
以下是代碼: <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Free CSS Template 8</title> <style type="text/css" media="screen"><!-- /* body and font definitions */ html { padding:0px; margin:0px; } body { background-color: #e1ddd9; font-size: 12px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; padding:0px 20px; margin:0px; } p, h2, pre { margin: 0px; padding: 10px; } h1 { font-size: 11px; text-transform:uppercase; text-align: right; color: #564b47; background-color: #90897a; padding:5px 15px; margin:0px } h2 { font-size:14px; padding-top:10px; text-transform:uppercase; color: #564b47; background-color: transparent; } 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; } /* positioning-layers static and absolute */ #content { border:1px solid #564b47; background-color:#fff; } #content #navi { border-left:1px dotted #000; border-bottom:1px dotted #000; float:right; width:250px; background-color:#ff99cc; margin:0px 0px 20px 20px; } --></style> </head> <body><div id="content"> <div id="navi"> <h2>MENU</h2> <pre> #content #navi { border-left:1px dotted #000; border-bottom:1px dotted #000; float:right; width:250px; background-color:#ff99cc; margin:0px 0px 20px 20px; } </pre> <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> </div> <h2>CONTENT</h2> <p>All templates are XHTML 1.0 and CSS2/ tableless.</p> <p>MENU floating<br /> layout grid with a floating menu on the left.<br /> The menu is fixed in it’s width. The height adjusts to the content.<br /> <a href="/">more nice and free css templates</a> <br /></p> <pre> html { padding:0px; margin:0px; } body { background-color: #e1ddd9; font-size: 12px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; padding:0px 20px; margin:0px; } #content { border:1px solid #564b47; background-color:#fff; } </pre> <br /> </div> </body> </html> |
以下是HTML指令碼特效代碼,點擊運行按鈕可查看效果:
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]