簡體   English   中英

Divs在CSS / HTML中的位置

[英]Position of Divs in CSS/HTML

我正在建立的網站

您好,我想知道是否有人可以幫助我實現這張照片的布局? 我正在嘗試建立這個網站,而我目前的進展令人沮喪。 我已經創建了基本布局,但無法正常工作。

我不確定如何定位內容以匹配該圖像。 如果有人可以指出我的寫作方向,那就太好了。

<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 {background-color:#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;
}`

這是代碼筆的鏈接

我建議您定位/樣式化您創建的所有內容。 高質量的代碼可以確保減少使用不同瀏覽器和設備的問題。

僅使用您實際需要的容器(div),為它們提供一個類或ID,然后將所有內容正確放置在CSS中。 最少應浮動並為關鍵結構div賦予寬度,以便獲得可預測的結果。

您沒有明確說明要解決的特定問題。 但是我確實看到了代碼中應該改進的幾件事。 第一個是您擁有的divs數量。 看來您可能有很多不必要的嵌套。

而且,如果您的目標之一是使事情變得更加敏感,那么最好使用網格框架(例如bootstrapfoundation )。

使用Bootstrap,我創建了您想要實現的起點的線框 我建議仔細研究網格系統的工作方式。 那將會有很大的不同。

這是我的演示

的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>

這是一種可能的解決方案:

 $(document).ready(function() { feednami.load(urlToHT, getHeaderTagPost); feednami.load(urlToKX, getKXBlogPost); }); var firstPostImg = $("#firstPostImg"); var secondPostImg = $("#secondPostImg"); var firstPost = $("#firstPost"); var secondPost = $('#secondPost'); var firstPostURL = $("#firstPostLink"); var urlToImg = ""; var urlToArticle = ""; var urlToHT = 'http://wiki.headertag.com/feed'; var urlToKX = "http://kx.indexexchange.com/feed/"; var secondPostUrl = $("#secondPostURL"); function getHeaderTagPost(data) { if (data.error) { console.log(data.error); } else { var entries = data.feed.entries; console.log("Header Tag " + entries); urlToImg = removeCharacters(entries[0].image.url); urlToArticle = entries[0].link; firstPostImg.css("background-image","url("+ urlToImg +")"); console.log(urlToImg); // firstPost.attr("src", urlToImg); firstPostURL.attr("href", urlToArticle); } } function getKXBlogPost(data) { if (data.error) { console.log(data.error); } else { var entries = data.feed.entries; console.log("KX blog: " + entries); urlToImg = removeCharacters(entries[0].image.url); urlToArticle = entries[0].link; console.log(urlToImg); secondPostImg.css("background-image","url("+ urlToImg +")"); secondPostUrl.attr("href", urlToArticle); } } function removeCharacters(string) { return string.substring(0, string.indexOf('?')); } 
 @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css); body { background-color: #13253F; color: white; } a { text-decoration: none; color: #00AFE5; } hr { border: solid #6cc1d6; border-width: 5px; clear: both; margin: 10px 0; height: 0; width: 100%; position: relative; float: right; } h3.logo { margin-top: 110px; text-align: center; margin-bottom: 40px; } h2 { } label { color: #f0f0f0; } .form { margin-top: 100px; } .box { background-repeat: no-repeat; background-position: center center; background-size: cover; width: 100%; height: 300px; border:2px solid white; } .images { position:absolute; right: 0px; top:0; height:100%; } #firstPostImg { position:relative; } #secondPostImg{ position:relative; padding-bottom:0; } @media screen and (max-width: 992px) { form.form {margin-top:30px;} #firstPostImg {margin-top: 30px;} } 
 <div class="container"> <div class="col-md-8"> <div class="col-md-12"> <h3 class="logo">Index Exchange</h3></div> <div class="col-md-3"> <hr> <h2>Console</h2> </div> <div class="col-md-6"> <form class="form"> <div class="form-group"> <label>Email address</label> <input type="email" class="form-control" placeholder="Email"> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" placeholder="Password"> </div> <div class="row"> <div class="col-md-7"> <a href="#forgot">Forgot your password?</a> </div> <div class="col-md-5"> <button class="btn btn-info btn-block" type="submit">Log in</button> </div> </div> </form> </div> </div> <div class="col-md-4"> <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> <!-- end of .container --> <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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM