利用相對定位及偏移量做精美輸入界面

利用相對定位和偏移量屬性，可以很好的實現(xiàn)以前需要用圖片才能實現(xiàn)的界面，而且實現(xiàn)起來比也很方便。例如，當需要用戶輸入某些信息，我們常常會用到：標題欄－內(nèi)容－確定按鈕 這種結(jié)構(gòu)，下面是利用CSS樣式的相對定位及偏移量做的輸入界面。主要特點是：

標題欄圖片有向上的偏移量。利用樣式：top:-10px;position:relative; 可以讓圖片脫離容器，定位于容器之外（本例子中圖片的容器是class="main"的div）。但有一點需要注意的是，圖片位置雖然脫離容器了，但它依舊在容器里占有一定空間，該例子中，無論怎么設(shè)置.main選擇器的height屬性，綠色條紋的高度總不會小于20px（圖片的高度）。
標題欄的文字我同樣用了top,bottom,left,right這些偏移量屬性，一開始想只利用vertical-align:middle; 屬性讓文字垂直居中，但失敗了，文字一直和底線對齊，無奈又用了偏移量。
綠色條紋使用了CSS濾鏡產(chǎn)生漸變效果，可惜據(jù)說只有IE支持:-(
末端“確定”按鈕也是用了相對定位及偏移量的技術(shù)。

CSS代碼：

a:link,a:active,a:visited{}{
    color: #2D4D97;
    text-decoration: none;
}
a:hover {}{
    text-decoration: none;
    color: #FF9900;
}
.title{}{
    color:#006600;
    display:block;
    height:20px;
    width:65%;
    border:none;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorStr=#FFD9E7CB,endColorStr=#00FFFFFF);
}
.title span{}{
    display:inline;
    position:relative;
    top:-4px;
}
.title img{}{
    position:relative;
    top: -10px;
    left: 5px;
    display:inline;
    margin:0px 10px 0px 0px;
    padding:0px;
    height:20px;
}
.main{}{
    margin:10px 20px 30px 20px;
    padding: 10px 20px 10px 20px;
    width:100%;
    border:#CCCCCC 1px solid;
}
.main .item{}{
    vertical-align:middle;
    margin:5px 0 5px 0;
}
.main .foot{}{
    position:relative;
    bottom:-10px;
    left:80%;
    display:block;
    border:#CCCCCC 1px solid;
    border-bottom:none;
    width:15%;
    text-align:center;
}
.main .foot a{}{
    background-color:#F3FCE0;
    padding:2px;
    width:100%;
}
.main .foot a:hover{}{
    background-color:#D8EBFE;
    padding:2px;
    width:100%;
}
html代碼：

div class="title">
    img src="http://www.cnblogs.com/images/cnblogs_com/oliverhuang/addRole.gif"> span>請?zhí)顚懡巧拘畔?span>
/div>
div class="main">
    div class="item">角色名稱：
      input name="textfield" type="text" size="20" />
    /div>
    div class="item">角色描述：
      textarea name="textfield2" cols="50" rows="5">/textarea>
    /div>
div class="foot">
    a href="#nogo">確定/a>/div>
/div>