<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>
实现如下布局：重点部分见代码标注。
