利用相对定位及偏移量做精美输入界面

利用相对定位和偏移量属性，可以很好的实现以前需要用图片才能实现的界面，而且实现起来比也很方便。例如，当需要用户输入某些信息，我们常常会用到：标题栏－内容－确定按钮 这种结构，下面是利用CSS样式的相对定位及偏移量做的输入界面。主要特点是：

1. 标题栏图片有向上的偏移量。利用样式：top:-10px;position:relative; 可以让图片脱离容器，定位于容器之外（本例子中图片的容器是class="main"的div）。但有一点需要注意的是，图片位置虽然脱离容器了，但它依旧在容器里占有一定空间，该例子中，无论怎么设置.main选择器的height属性，绿色条纹的高度总不会小于20px（图片的高度）。
2. 标题栏的文字我同样用了top,bottom,left,right这些偏移量属性，一开始想只利用vertical-align:middle; 属性让文字垂直居中，但失败了，文字一直和底线对齐，无奈又用了偏移量。
3. 绿色条纹使用了CSS滤镜产生渐变效果，可惜据说只有IE支持:-(
4. 末端“确定”按钮也是用了相对定位及偏移量的技术。

下面是效果图及代码，只用了一张20px*20px的msn图标。

效果图：

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 ="https://i-blog.csdnimg.cn/blog_migrate/beee2ae0ec42fee18d925deb8a4d02b1.gif" >   < span > 请填写角色基本信息 </ 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 >

转载于:https://www.cnblogs.com/oliverhuang/archive/2006/08/17/479918.html