布局遇到的問題 非常不錯的見解_CSS/HTML

前言
還未等到下一代WEB開發技術RIA技術成熟之前,當然還得與HTML作鬥爭。前段時間《網站重構》炒得挺熱，
這些都是進步，的確給我們新的思想。在這裡總結一些開發中的點滴經驗。

布局
1、上下左右布局
剛開始學製作頁面，用的是MM的DW軟體，可視化，讓更多人學會網頁製作。
還記得當初做頁面用的還是DW,一個朋友問過我這一樣一句話:"做網頁表格多還是用層多，有什麼區別?"。
我告訴他其實DW中用布局-表格版面配置，很快畫出整個頁面的架構, 然後一步步細化。做頁面是挺快的事情,建議用表格，用層不好控制位置。
現在想起來真是有點誤導的成份。哈，不過也許，進步需要一個過程。

《網站重構》春風吹來，用層進行頁面配置的確給予我們開發帶來了新的思想。
優點:
頁面更清晰，代碼量減少;
CSS的應用更廣泛。

上下排,分層清晰,代碼demo:










左右排，可以用絕對位置
#head{
position:absolute
top;10px;
left:200px;
}




2、DIV中的盡量少嵌套DIV，可用

3、用padding控制層之間的分隔





4、用border製作結構之間的分隔線



5、可以用CSS的少用圖片

頁面配置demo（可查看源碼，比以往TABLE布局的清晰多了）：
http://davidblog.blogdriver.com/davidblog/inc/demo_div.jpg

form
1、form的margin以及padding
以往在頁面中插入一個表單時,總是覺得margin,padding預設不為0，有時會影響頁面的布局.
可以用CSS將其設加0
form{
margin:0 0 0 0px;
padding:0 0 0 0px;
}
同樣p標記或其它標記你也可以定義.

2、select
optgroup的應用

3、為checkbox或radio加上label
今日

4、button
前一個項目用的是圖片的button。逐漸發覺應用中的缺陷。
建議還是用CSS美化。
其實CSS可以實現更美觀的button


table
該用table還是得用table的。table 始終有他優勝的一面。
例如一些資料顯示的GRID或結構比較統一的,分行分列的布局.
table 相關技巧




CSS Expressions的應用
用CSS應用可減少代碼的編寫
1、table 滑鼠事件


2、
width:expression{document.body.clientWidth<800 ? "760" : "1003"}



值得留意的標記

菜單1

菜單2

• 
  
  
  
  
  
  Health information:
  Height
  Weight
  
  superscript

  