一開始，建議先在style寫入「*{margin:0;padding:0}」，為什麼呢？因為這樣比較不會影響到位置的計算，也算是把各種瀏覽器初始化……
接下來就是畫出你要的版型，用小畫家畫出很多格子，一個格子代表一個區塊，最常見的如
就是一般的部落格排版，A為LOGO，B為內文，C為部落格小工具，D為版權之類的東西。再來就是訂尺寸
接下來就能開始撰寫html檔了。我會先用一個寬800的div把ABCD都包起來，並設margin:0 auto置中（只支援firefox，IE置中可以在body設text-align:center，再在這個div設text-align:left），再來，裡面放三個div，第一個是800*150，第二個寬800不設高，第三個800*65，然後，在第二個div中放兩個div。為了要並排，兩個div都寫float:left，第一個的div寬設630，第二個設170。文字似乎不太容易懂，看html碼吧
17.
<html>差不多就這樣吧？把它上背景色並放上文字試試
<head>
<style>
*{margin:0;padding:0}
</style>
</head>
<body>
<div style='width:800px;margin:0 auto'><!--包住全部ABCD的div-->
<div style='width:800px;height:150px'></div><!--LOGO-->
<div style='width:800px'><!--內文與右邊的工具列-->
<div style='float:left;width:630px'></div><!--內文-->
<div style='float:left;width:170px'></div><!--小工具-->
</div>
<div style='width:800px;height:65px'></div><!--版權宣告之類的……-->
</div>
</body>
</html>
咦，怎麼最後的版權部份縮上去被內文遮住了？這時就要在D版塊加入「clear:both」，能讓D版塊不被遮住，並往下推
但黃色下面怎麼空了一塊？因為我們沒設定高，它就會依照內容決定高度囉……那怎麼解決呢？其實一般是不需要去管它的，但如果真的要，我會用JavaScript去控制……最後的html檔
24.
<html>
<head>
<style>
*{margin:0;padding:0}
</style>
<script>
window.onload=function(){
var a=document.getElementById('a').getBoundingClientRect();
var b=document.getElementById('b').style;
b.height=Math.floor(a.bottom-a.top);
}
</script>
</head>
<body>
<div style='width:800px;margin:0 auto'><!--包住全部ABCD的div-->
<div style='width:800px;height:150px;background-color:red'>LOGO</div><!--LOGO-->
<div style='width:800px'><!--內文與右邊的工具列-->
<div style='float:left;width:630px;background-color:orange' id='a'>...</div><!--內文-->
<div style='float:left;width:170px;background-color:yellow' id='b'>Some little tools for blog.</div><!--小工具-->
</div>
<div style='width:800px;height:65px;clear:both;background-color:green'>Do not copy.</div><!--版權宣告之類的……-->
</div>
</body>
</html>
沒有留言:
張貼留言