我正在创建网页，但页面布局存在一些问题，尤其是对齐方式。问题是:
我的登录部分不能完全显示在页眉中，也不能很好地对齐。我希望它看起来像这个网站:http://www.seek.com.au
页面有两列布局，但现在它们看起来很丑。有没有更好的方式来设计它？例如这两列在页面中居中，并且它们周围有漂亮的边框。
如何将图像添加到背景和 Logo (在标题中)？
我想通过修改 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/
有人可以帮忙吗？
最佳答案
这是一个很大的变化，但假设您可以在页眉(和其他地方)制作您的元素 <div> s 而不是列表( <ul> 、 <li> 等)，试试这个:
CSS:
body {
background-color: #FFFFFF;
font-family: Helvetica,Arial,sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
.header {
margin: 0;
min-height: 70px;
overflow: hidden;
}
.hd-banner {
background-color: #FFFFCC;
height: 95px;
left: 0;
margin: 0;
max-width: 50%;
position: absolute;
text-align: center;
top: 0;
width: 1000px;
}
.login {
left: 50%;
margin: 0;
max-width: 50%;
position: relative;
top: 10px;
}
.hd-caption {
clear: both;
height: 35px;
}
.hd-login-top, .hd-login-bottom {
display: inline;
text-align: center;
}
.t1, .t2, .t3, .b1, .b2, .b3 {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 32%;
width: 400px;
}
.state-inp-sign-in {
height: 28px;
line-height: 24px;
outline: medium none;
width: 130px;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
}
ul.menu {
background-color: #98BF21;
clear: both;
list-style-type: none;
overflow: hidden;
padding: 1em;
text-align: center;
}
ul.menu li {
display: inline-block;
}
ul.menu li a:link, a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
ul.menu li a:hover, a:active {
background-color: #7A991A;
}
.content {
clear: both;
margin-top: 3em;
overflow: hidden;
width: 100%;
}
.sidebar {
float: left;
margin-right: 5%;
width: 30%;
}
.main {
float: left;
overflow: hidden;
width: 65%;
}
.footer {
clear: left;
margin-top: 1em;
overflow: hidden;
width: 100%;
}
ul.footer-menu {
background-color: #999999;
clear: both;
list-style-type: none;
overflow: hidden;
padding: 0;
text-align: center;
}
ul.footer-menu li {
display: inline-block;
}
ul.footer-menu li a:link, a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0 auto;
padding: 4px;
text-align: center;
text-decoration: none;
width: 120px;
}
ul.footer-menu li a:hover, a:active {
background-color: #7A991A;
}
.copyright {
text-align: center;
}
.sidebar form {
background-color: #D0E9F6;
border: 1px solid #666666;
border-radius: 10px;
box-shadow: 0.2em 0.2em 0.5em #999999;
padding: 1em;
width: 15em;
}
.sidebar legend {
font-size: 1.2em;
font-weight: bold;
text-align: left;
}
label {
color: #04699D;
text-align: left;
width: 8em;
}
input[type="submit"] {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #04699D;
border-radius: 4px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
font-size: inherit;
height: 1.8em;
width: 7em;
}
.main form {
background-color: #D0E9F6;
border: 1px solid #666666;
border-radius: 10px;
box-shadow: 0.2em 0.2em 0.5em #999999;
padding: 1em;
width: 30em;
}
.hd-login-bottom a {
color: #04699D;
text-decoration: none;
}
HTML:
<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">
<div class="hd-login-top t1">
<input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email" />
</div>
<div class="hd-login-top t2">
<input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password" />
</div>
<div class="hd-login-top t3">
<input type="submit" id="signIn" name="signIn" value="Sign in" />
</div>
</div>
<div class="hd-caption-2">
<div class="hd-login-bottom b1">
<label for="RememberMe"><input name="RememberMe" type="checkbox" value="true"> <input name="RememberMe" type="hidden" value="false" /> Remember me</label>
</div>
<div class="hd-login-bottom b2">
<a href="">Trouble signing in?</a>
</div>
<div class="hd-login-bottom b3">
<input type="submit" name="action" value="Register" />
</div>
</div>
</form>
</div>
</div>
<!-- end #header -->
<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 Layout对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19919968/