我正在创建一个网页，但页面布局存在一些问题，尤其是对齐方式。问题是：
我的登录部分无法完全显示在标题中，并且无法很好地对齐。我希望它看起来像这个网站：http ://www.seek.com.au
该页面有两列布局，但现在它们看起来很难看。有没有更好的方法来设计它？例如这两列位于页面中心，并且它们周围有漂亮的边框。
如何将图像添加到背景和徽标（在标题中）？
我想通过修改 CSS 或 HTML 来使页面布局更好，我尝试了几个小时但仍然没有弄明白。请给我一些建议，谢谢。
这是HTML和CSS：
<body>
<!-- begin #header -->
<div class="header">
<div class="hd-banner">
<h1>Marryland Learning Center</h1>
</div>
<div class="login">
<form id="loginForm" action="/" method="post">
<div class="hd-caption">
<ul class="hd-login">
<li>
<ul>
<li class="l-column">
<input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email">
</li>
<li class="l-column">
<input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password">
</li>
<li class="l-column">
<input type="submit" id="signIn" name="signIn" value="Sign in">
</li>
</ul>
</li>
<li>
<ul>
<li class="l-column">
<input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
<label>Remember me</label>
</li>
<li class="l-column">
<a href="">Trouble signing in?</a>
</li>
<li class="l-column">
<input type="submit" name="action" value="Register">
</li>
</ul>
</li>
</ul>
</div>
</form>
</div>
<!-- end #header --></div>
<div class="nav">
<ul class="menu">
<li><a href="">Students</a></li>
<li><a href="">Teachers</a></li>
<li><a href="">Training</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<!-- end #nav --></div>
<div class="content">
<!-- begin #extra -->
<div class="sidebar">
<form name="search" action="/" method="post">
<fieldset><legend>Quick Search</legend>
<p><label>Key Words <input type="text" name="keywords" id="keywords" class="textinput"></label></p>
<p><label>Class <input type="text" name="class" id="country1" class="textinput"></label></p>
<p><input type="submit" name="search" id="search" value="Search"></p>
</fieldset>
</form>
<!-- end #extra --></div>
<div class="main">
<h2>Implementing Responsive Design</h2>
<p>New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced
with this volatile landscape we
can either struggle for control or we can embrace the inherent flexibility of the web.
Responsive design is not just another technique--it is the beginning of the maturation of a medium and a fundamental
shift in the way we think about the web.</p>
<!-- end #main --></div>
<!-- end #content --></div>
<div class="footer">
<ul class="footer-menu">
<li><a href="">Site Terms</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Disclaimer</a></li>
<li><a href="">Site Map</a></li>
<li><a href="">Discrimination</a></li>
</ul>
<p class="copyright">Copyright © </p>
<!-- end #footer --></div>
</body>
</html>
这是CSS：
body
{
margin: 0;
padding: 0;
font-family: Helvetica,Arial,sans-serif;
font-size: 100%; /* em best practice, target size ÷ size of content = result */
background-color: rgba(255,255,255,1);
}
/** Header Div **/
/* style .header div: floating the 3-column elements to the left, and giving them width seperately*/
.header
{
margin: 0;
overflow: hidden;
}
.hd-banner
{
float: left;
width: 50%;
margin: 0;
background-color: #FFC;
}
.login
{
position: relative;
}
.hd-caption
{
position: absolute;
top: 30%;
right: 20px;
}
.hd-login
{
display: inline-block;
margin-top: 30px;
list-style: none;
}
ul
{
margin: 10px 0;
}
.hd-login li
{
height: 33px;
list-style: none;
}
.l-column
{
margin-left: 18px;
overflow: hidden;
float: left;
}
.state-inp-sign-in
{
-moz-outline: none;
outline: none;
width: 130px;
height: 28px;
line-height: 24px;
}
button, input, select, textarea
{
font-size: 100%;
margin: 0;
vertical-align: baseline;
}
/** Nav Div **/
ul.menu
{
list-style-type: none;
padding: 1em;
clear: both; /* starts the nav below the floated header */
overflow:hidden;
text-align:center;
background-color:#98bf21;
}
ul.menu li
{
display:inline-block;
}
ul.menu li a:link, a:visited
{
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
ul.menu li a:hover, a:active
{
background-color:#7A991A;
}
/** Content Div **/
.content
{
clear: both; /* clear #nav ul li's following elements */
width: 100%; /* set the width of #content to 100% */
overflow: hidden; /* make it stretch to contain the floated elements */
margin-top: 3em;
}
.sidebar
{
float: left;
width: 30%;
margin-right: 5%;
}
.main
{
float: left;
width: 65%;
overflow: hidden; /* make it stretch to contain the floated elements */
}
/** Footer Div **/
.footer
{
clear: left; /* starts the footer below the floated content */
overflow: hidden; /* make it stretch to contain the floated elements */
width: 100%; /* fix float containment fail */
margin-top: 1em;
}
ul.footer-menu
{
list-style-type: none;
padding: 0;
clear: both; /* starts the nav below the floated header */
overflow:hidden;
text-align:center;
background-color:#999;
}
ul.footer-menu li
{
display:inline-block;
}
ul.footer-menu li a:link, a:visited
{
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
/* text-transform:uppercase;*/
}
ul.footer-menu li a:hover, a:active
{
background-color:#7A991A;
}
.copyright
{
text-align: center;
}
/** forms styling **/
.sidebar form
{
width: 15em;
border: 1px solid #666;
border-radius: 10px;
box-shadow: .2em .2em .5em #999;
background-color: #d0e9f6;
padding:1em;
}
.sidebar legend
{
text-align: left;
font-weight: bold;
font-size: 1.2em;
}
label {
display: block;
width: 8em;
text-align: left;
color: #04699d;
}
input[type="submit"]
{
display: block;
width: 7em;
height: 1.8em;
background: white;
font-size: inherit;
border: 1px solid #04699d;
border-radius: 4px;
box-shadow: 2px 2px 3px rgba(0,0,0,.5);
text-align: center;
}
.main form {
width: 30em;
border: 1px solid #666;
border-radius: 10px;
box-shadow: .2em .2em .5em #999;
background-color: #d0e9f6;
padding:1em;
}
我也做了一个jsfiddle：http: //jsfiddle.net/JA3x9/
任何人都可以帮忙吗？