登陆页面实验
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="styles.css" rel="stylesheet" /> </head> <body style="overflow:visible;"> <form id="form1" runat="server" style="width:auto"> <div style="height: 250px; background: #0094ff repeat; min-width:1000px;"></div> <div style="height: 200px; background-color: #dddddd; width: 300px; height:200px; position:relative; top:100px;right:-150px; border-right:1px solid silver;"> <p>*********************************</p> <br /> <p>*********************************</p> <br /> <p>*********************************</p> </div> <div id="login" style="position: relative; top: -250px; right: -550px; background-color: #0094ff; border: 1px solid white;"> <div id="wrappertop"></div> <div id="wrapper"> <div id="content"> <div id="header"> <h1><a href="http://www.freelancesuite.com/demo/"> <img alt="freelancesuite" src="logo.png"></a></h1> </div> <div class="banner320" id="darkbanner"> <h2>login</h2> </div> <div id="darkbannerwrap"></div> <fieldset class="form"> <p> <label for="user_name">username:</label> <input name="user_name" id="user_name" type="text"> </p> <p> <label for="user_password">password:</label> <input name="user_password" id="user_password" type="password"> </p> <button name="submit" class="positive" type="submit"> <img alt="announcement" src="key.png">login</button> <ul id="forgottenpassword"> <li class="boldtext">|</li> <li><a href="http://www.freelancesuite.com/demo/forgot.php">forgotten it?</a></li> </ul> </fieldset> </div> </div> <div id="wrapperbottom_branding"> <div id="wrapperbottom_branding_text"> by <a style="text-decoration: none;" href="http://www.freelancesuite.com/">freelance suite</a>. <a style="text-decoration: none;" href="http://www.freelancesuite.com/">project, client & billing management</a> </div> </div> </div> </form> </body> </html> 实现如下布局:重点部分见代码标注。