主頁 > 知識庫 > 布局遇到的問題 非常不錯的見解

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

熱門標(biāo)簽:廣州ai外呼系統(tǒng)業(yè)務(wù) 無錫電銷外呼系統(tǒng)代理 什么行業(yè)需要電話機(jī)器人 天津企業(yè)外呼系統(tǒng)代理商 中山外呼系統(tǒng)中間件 車載電話機(jī)器人 南昌crm外呼系統(tǒng)如何 地圖標(biāo)注多家店 外呼系統(tǒng)號碼顯示
前言
    還未等到下一代WEB開發(fā)技術(shù)RIA技術(shù)成熟之前,當(dāng)然還得與HTML作斗爭。前段時(shí)間《網(wǎng)站重構(gòu)》炒得挺熱,
這些都是進(jìn)步,的確給我們新的思想。在這里總結(jié)一些開發(fā)中的點(diǎn)滴經(jīng)驗(yàn)。

布局
1、上下左右布局
    剛開始學(xué)制作頁面,用的是MM的DW軟件,可視化,讓更多人學(xué)會網(wǎng)頁制作。
    還記得當(dāng)初做頁面用的還是DW,一個朋友問過我這一樣一句話:"做網(wǎng)頁表格多還是用層多,有什么區(qū)別?"。
    我告訴他其實(shí)DW中用布局-布局表格,很快畫出整個頁面的框架, 然后一步步細(xì)化。做頁面是挺快的事情,建議用表格,用層不好控制位置。
    現(xiàn)在想起來真是有點(diǎn)誤導(dǎo)的成份。哈,不過也許,進(jìn)步需要一個過程。

    《網(wǎng)站重構(gòu)》春風(fēng)吹來,用層進(jìn)行頁面布局的確給予我們開發(fā)帶來了新的思想。
    優(yōu)點(diǎn):
        頁面更清晰,代碼量減少;
        CSS的應(yīng)用更廣泛。

   上下排,分層清晰,代碼demo:
   div id="head">
   /div>

   div id="body">
   /div>

   div id="bottom">
   /div>

   
   左右排,可以用絕對定位
   #head{
    position:absolute
    top;10px;
    left:200px;
    }
   div id="head">
   /div>

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

3、用padding控制層之間的分隔
   div>
   /div>
   div style="padding-top:10px">
   /div>

4、用border制作結(jié)構(gòu)之間的分隔線
    div style="border-bottom:1px #000 solid">
    /div>

5、可以用CSS的少用圖片

頁面布局demo(可查看源碼,比以往TABLE布局的清晰多了):
http://davidblog.blogdriver.com/davidblog/inc/demo_div.jpg

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

2、select
    optgroup的應(yīng)用

3、為checkbox或radio加上label
input id=today type=radio  value="" checked>label for=today >今日/label>

4、button
    前一個項(xiàng)目用的是圖片的button。逐漸發(fā)覺應(yīng)用中的缺陷。
    建議還是用CSS美化。
    其實(shí)CSS可以實(shí)現(xiàn)更美觀的button


table
該用table還是得用table的。table  始終有他優(yōu)勝的一面。
例如一些數(shù)據(jù)顯示的GRID或結(jié)構(gòu)比較統(tǒng)一的,分行分列的布局.
table 相關(guān)技巧




CSS Expressions的應(yīng)用
用CSS應(yīng)用可減少代碼的編寫
1、table 鼠標(biāo)事件
style>
tr{
   background-color:expression((this.rowIndex%2==0)?"#e5e5e5":"#e5e5e5");
   ryo:expression(
onmouseover=function() 
{this.style.backgroundColor='#ffffff'},
onmouseout=function()
{this.style.backgroundColor='#e5e5e5'}
)
}
/style>

2、
width:expression{document.body.clientWidth800 ? "760" : "1003"}



值得留意的標(biāo)記
menu>
li>菜單1/li>
li>菜單2/li>
/menu>
ul>
li>
dd>
tt>
u>
fieldset>
legend>Health information:/legend>
Height input type="text" size="3" />
Weight input type="text" size="3" />
/fieldset>
sup>superscript/sup>

標(biāo)簽:佛山 欽州 滄州 泰州 呂梁 海西 攀枝花 仙桃

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《布局遇到的問題 非常不錯的見解》,本文關(guān)鍵詞  布局,遇到,的,問題,非常,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《布局遇到的問題 非常不錯的見解》相關(guān)的同類信息!
  • 本頁收集關(guān)于布局遇到的問題 非常不錯的見解的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章

    上一篇:display&position

    下一篇:表格斜線