0
我有這個代碼，它允許我將各種內容放入固定放置的CSS定義的div塊中，它可以很好地工作 - 但有時候我需要這樣的頁面來響應 - 你認爲它可以是做了什麼？ 我已經包括了代碼：使CSS DIV塊響應
#page_content {
min-height: 2000px;
}
#rectangle1 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle1.gif); */
margin-top: 0px;
margin-left: 0px;
height: 153px;
width: 479px;
z-index: 4;
top: 48px;
left: 29px;
position: absolute;
}
#rectangle2 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle2.gif); */
margin-top: 0px;
margin-left: 0px;
height: 153px;
width: 856px;
z-index: 4;
top: 48px;
left: 524px;
position: absolute;
}
#rectangle3 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
margin-top: 0px;
margin-left: 0px;
height: 884px;
width: 520px;
z-index: 4;
top: 48px;
left: 1403px;
position: absolute;
}
#rectangle4 {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
margin-top: 0px;
margin-left: 0px;
height: 701px;
width: 1351px;
z-index: 4;
top: 229px;
left: 29px;
position: absolute;
}
#background {
background-repeat: no-repeat;
/* [disabled]background-image: url(sg_prototype_media/background.gif); */
margin-top: 0px;
margin-left: 0px;
height: 2000px;
width: 2000px;
z-index: 3;
top: 0px;
left: 0px;
position: absolute;
background-color: rgb(0,0,0);
}
.page_content_bkg {
width: 2000px;
height: 2000px;
left: 0px;
top: 0px;
display: block;
}
.container_div {
position: relative;
width: 2000px;
margin-bottom: 0px;
margin-right: auto;
margin-top: 0px;
margin-left: auto;
}
.spacing_div {
min-height: 0px;
height: 0px;
}
*:focus {
outline-style: none;
}
.full_width {
position: relative;
padding: 0px;
margin: 0px;
min-width: 2000px;
}
ains {
text-decoration: none;
}
html, body {
height: 100%;
background-color: #FFFFFF;
}
body {
-webkit-text-size-adjust: none;
height: 100%;
padding-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- (sg_cms) -->
<!-- -->
<!-- (sg_emit "sg_prototype_content/title.xml") -->
</head>
<body>
<div id="page_div">
<div class="full_width" id="page_content">
<div class="container_div">
<div id="background" class=""></div>
<div id="rectangle1" class="">
<iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe>
</div>
<div id="rectangle2" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
<div id="rectangle3" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
<div id="rectangle4" class=""><iframe src="https://www.ubs.com/global/en.html"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
<div id="pagesize_gap" style="height:2000px;"></div>
<div id="clear_footer"></div>
</div><!-- /prototype container_div -->
</div><!-- /page_content:full_width -->
</div><!-- /page_div -->
<!-- (sg_chau) -->
<!-- (sg_suppress --> <!--) -->
</body>
</html>
「*你認爲可以做嗎？*」 - 是的。您將不得不對標記和樣式進行很多更改。開始繪製紙張，你希望你的網站看起來像不同的屏幕尺寸。完成之後，閱讀有關響應式設計的教程。嘗試一個一個的做事。看看像Bootstrap這樣的庫。 – Abhitalks
感謝您的回覆...我希望通過添加一些插件或代碼可以快速實現此目的）通過將每個塊視爲圖庫圖片和使用響應式圖庫腳本？ – Gabriel
:)生活@gabriel中沒有捷徑。但是，您可能需要花時間閱讀Bootstrap文檔以瞭解它如何幫助您以最小的努力來實現這一目標。不要指望它比這更容易。 – Abhitalks