嗨伙計們,
我想用CSS做一個網站。但是,我對這個設計有問題。我有不同的領域。獨立的標題。然后是& quot主要區域& quot,由左框架、中框架和右框架組成。正如您在代碼中看到的,我已經將距離定義為“1.75%”。正如我在這里展示的,它(在我看來)已經近乎完美了。
我現在有以下問題:
我想關注一個遞歸設計。如果我按原樣使用這個頁面,并向左收縮瀏覽器窗口,直到它不再可能,所有的間距都是正確的。 如你所見,中間的框架之間沒有空間。 當我試圖用“邊距-頂部”或“邊距-底部”在這三者之間獲得相同的距離“1.75%”時,它會在縮小時改變距離。
你能幫我看一下嗎?
* {
box-sizing: border-box;
height: 95%;
}
body {
background-image: url(Pics/XXX.jpg);
background-color: #FFFFFF;
color: white;
font-weight: normal;
font-family: Arial;
font-size: 100%;
}
body {
font: 100.01% Verdana, Arial, Helvetica, sans-serif;
background-color: #ff0;
margin: 0;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #B58900;
}
a:active {
color: red;
}
.Site {
border: 0px dotted #192F3D;
width: 70%;
height: 100%;
margin-left: 15%;
margin-top: 4%;
display: block;
overflow: hidden;
}
.Site_Container {
border: 1px dotted #192F3D;
height: 75%;
display: block;
overflow: hidden;
}
/* --------------------------------------------------------- */
.Site_Container_L {
float: left;
position: relative;
border: 1px dotted #192F3D;
width: 15.5%;
height: 100%;
background-color: #FFFFFF;
}
.Site_Container_M {
float: left;
border: 0px dotted #192F3D;
width: 67%;
height: 100%;
margin-right: 1%;
margin-left: 1%;
}
.Site_Container_R {
float: left;
border: 1px dotted #192F3D;
width: 15.5%;
height: 100%;
background-color: #FFFFFF;
}
/* --------------------------------------------------------- */
.Header {
border: 1px dotted #192F3D;
height: 15%;
display: block;
background-color: #ffffff;
margin-bottom: 1%;
}
/* --------------------------------------------------------- */
.Links {
border: 1px dotted #192F3D;
height: 12%;
background-color: #FFFFFF;
}
/* --------------------------------------------------------- */
.Container {
border: 1px dotted #192F3D;
height: 76%;
background-color: #FFFFFF;
}
/* --------------------------------------------------------- */
.Border {
border: 1px dotted #192F3D;
height: 12%;
background-color: #FFFFFF;
}
/* --------------------------------------------------------- */
.Seperator {
border: 0px dotted #192F3D;
height: 1.75%;
background-color: #FFFFFF;
}
<div class="Site">
<div class="Header">
</div>
<div class="Site_Container">
<div class="Site_Container_L">
</div>
<div class="Site_Container_M">
<div class="Links">
</div>
<div class="Container">
</div>
<div class="Border">
</div>
</div>
<div class="Site_Container_R">
</div>
</div>
</div>