步驟二：
現在我們開始用一些基本的 CSS 來給頁面添加樣式。把以下代碼放入在我們的 html 頁面頂部被引入的 style.css。
html, body {
margin:0; padding:0;
height:100%;
}
body {
background:url('page_bg.jpg') 50% 50% no-repeat #FC3;
font-family:Georgia, Times, serifs;
}
#floater {
position:relative; float:left;
height:50%; margin-bottom:-200px;
width:1px;
}
#centered {
position:relative; clear:left;
height:400px; width:80%; max-width:800px; min-width:400px;
margin:0 auto;
background:#fff;
border:4px solid #666;
}
#bottom {
position:absolute;
bottom:0; right:0;
}
#nav {
position:absolute; left:0; top:0; bottom:0; right:70%;
padding:20px; margin:10px;
}
#content {
position:absolute; left:30%; right:0; top:0; bottom:0;
overflow:auto; height:340px;
padding:20px; margin:10px;
}
在我們能夠把 content 垂直居中之前， body 和 html 應該被拉伸到 100％ 的高度。由于 height
在 padding 和 margin 之內，所以我們要把它們設成 0 以防止因為很小的 margin 出現滾動條。
floater 的 margin-bottom 是 content 高度(400px)的一半， -200px。
現在可以看到一下效果：
#centred 的寬度為 80％。這可以市網頁隨著顯示器的大小而變化。一般稱作流體布局。設置 min-width 和
max-width 以避免網頁過大或者過小。 但是 IE 不支持 min/max-width。顯然可以用固定寬度來代替。
因為 #centred 是相對定位的，在它里面我們可以用絕對定位來定位元素。設置 #content 的 overflow:auto;
以避免滾動條的出現。IE 不怎么喜歡 overflow:auto; 除非我們指定高度(不是 top 和 bottom 的定位，也不是 ％)
因此我們給它指定高度。
上一頁 [1] [2] [3] [4] [5] [6] 下一頁 |
您現在的位置： 
