利用相對定位及位移量做精美輸入介面_CSS/HTML

利用相對定位和位移量屬性，可以很好的實現以前需要用圖片才能實現的介面，而且實現起來比也很方便。例如，當需要使用者輸入某些資訊，我們常常會用到：標題列－內容－確定按鈕 這種結構，下面是利用CSS樣式的相對定位及位移量做的輸入介面。主要特點是：

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

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代碼：

請填寫角色基本資料


角色名稱：


角色描述：



確定

