首頁  >  文章  >  web前端  >  版面遇到的問題 非常好的見解_CSS/HTML

版面遇到的問題 非常好的見解_CSS/HTML

WBOY
WBOY原創
2016-05-16 12:12:011363瀏覽

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

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

    《網站重建》春風吹來,用層進行頁面佈局的確給予我們開發帶來了新的思想。
    優點:
        頁面上較清楚,且碼量減少;
        CSS的應用較廣泛。

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


   

   

   
   左右排,且可用絕對定位
   phead{     left:200px;
    }
   

   


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


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

   

   

   


   



    

    


5、可用CSS的少用圖片
頁佈局(可查看源佈局,比以往任何BLE佈局的多碼,比以往更清晰了多碼:
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;
   }
   同樣p標記或其它標記你也可以定義.

2、select
    optgroup的應用程式
2、select
    optgroup的應用程式

今日


4、button
    前一個項目用的是圖片的button。逐漸發覺應用的缺陷。
    建議還是使用CSS美化。     其實CSS可以實現更美觀的button
table
該用table還是得用table的。 table  始終有他優勝的一面。
例如一些數據顯示的GRID或結構比較統一的,分行分列的佈局.
table 相關技巧




CSS Expressions的應用
用CSS應用可減少程式碼的編寫
1、table 滑鼠事件
)
}

2、
width:expression{document.body.clientWidth

值得留意的標記

  • 選單1

  • 選單1

      菜單>











    • > information: Height  Weight  superscript

    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn