[英]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
數量。 看來您可能有很多不必要的嵌套。
而且,如果您的目標之一是使事情變得更加敏感,那么最好使用網格框架(例如bootstrap或foundation )。
使用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.