0
Я создаю веб-страницу, но имею некоторые проблемы с макетом страницы, особенно выравнивание. Возможны следующие проблемы:Проблемы с раскладкой CSS Layout
Моя часть входа не может быть полностью показана в заголовке и не может быть выровнена правильно. Я бы хотел, чтобы это выглядело так: http://www.seek.com.au
Страница имеет двухстоечный макет, но сейчас они выглядят уродливыми. Есть ли лучший способ его стилизации? Например, эти два столбца сосредоточены на странице, и вокруг них есть хорошие границы.
Как добавить изображения в фон и логотип (в заголовке)?
Я хотел бы сделать макет страницы лучше, изменяя CSS или HTML, я пытался часы и часы, но до сих пор не понять, что out.please дать мне несколько советов, спасибо.
Вот 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/
Может кто-нибудь помочь?
Вы думали о создании [JSFiddle] (http://jsfiddle.net/)? –
Я также сделал jsfiddle: http://jsfiddle.net/JA3x9/ – user2967661
Вы хотите, чтобы это было отзывчивым? –