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数量。看来您可能有很多不必要的嵌套。

而且,如果您的目标之一是使事情变得更加敏感,那么使用网格框架(例如bootstrapfoundation)是个好主意。

使用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>

10-07 19:38
查看更多