Website I'm building
您好,我想知道是否有人可以帮助我实现这张照片的布局?我正在尝试建立这个网站,而我目前的进展令人沮丧。我已经创建了基本布局,但无法正常工作。
我不确定如何定位内容以匹配该图像。如果有人可以指出我的写作方向,那就太好了。
<body>
<div>
<div>
<div>
<div>
<h3>LOGO</h3>
</div>
<div>
<hr>
<h2>Console</h2>
</div>
<div class="form">
<form>
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
<a href="#forgot">Forgot your password?</a>
<button type="submit">Log in</button>
</form>
</div>
<div class="images">
<a id="firstPostLink" target="_blank">
<div class="box" id="firstPostImg">
</div>
</a>
<a id="secondPostURL" target="_blank">
<div class="box" id="secondPostImg">
</div>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
这是CSS`body {
背景颜色:#13253F;
白颜色;
}
a {
text-decoration: none;
color: white;
}
hr {
border: solid #6cc1d6;
border-width: 5px 5px 5px 5px;
clear: both;
margin: 10px 0;
height: 0;
width: 160px;
position: relative;
left: 100px;
}
h3 {
text-align: center;
}
h2 {
margin-left: 100px;
margin-top: -15px;
}
label {
color: #f0f0f0;
}
.form {
padding: 20px;
margin: 0 auto;
position:relative
}
.box {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 600px;
height: 600px;
border:2px solid white;
}
.images {
position:absolute;
left:200px;
height:100%;
}
#firstPostImg {
position:relative;
left:1100px;
top:-300px;
}
#secondPostImg{
position:relative;
left:1100px;
top:-300px;
padding-bottom:0;
}`
这是codepen的链接
最佳答案
您没有明确说明要解决的特定问题。但是我确实看到了代码中应该改进的几件事。第一个是您拥有的divs
数量。看来您可能有很多不必要的嵌套。
而且,如果您的目标之一是使事情变得更加敏感,那么使用网格框架(例如bootstrap或foundation)是个好主意。
使用Bootstrap,我created a wireframe列出了您想要实现的目标。我建议仔细研究grid系统的工作方式。那将会有很大的不同。
Here's my demo。
的HTML
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<!-- Logo here-->
<img src="http://placehold.it/335x115" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<!-- Console -->
<h2>Console</h2>
</div>
</div>
<form class="row">
<!-- Form -->
<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-2">
<div class="row">
<div class="col-md-12 form-group">
<label for="email" class="control-label">Email Address: </label><br>
<input type="email" name="email" id="email">
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label for="password" class="control-label">Password: </label><br>
<input type="text" name="password" id="password">
</div>
</div>
<div class="row">
<div class="col-md-8">
<a href="#forgot">Forgot your password?</a>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
</div>
</div>
</form>
</div>
<sidebar class="col-md-3 col-sm-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-6">
<img src="http://placehold.it/275x290" class="img-responsive">
</div>
<div class="col-lg-12 col-md-12 col-xs-6">
<img src="http://placehold.it/275x290" class="img-responsive">
</div>
</div>
</sidebar>
</div>