利用相对定位和偏移量属性,可以很好的实现以前需要用图片才能实现的界面,而且实现起来比也很方便。例如,当需要用户输入某些信息,我们常常会用到:标题栏-内容-确定按钮 这种结构,下面是利用CSS样式的相对定位及偏移量做的输入界面。主要特点是:标题栏图片有向上的偏移量。利用样式:top:-10px;position:relative; 可以让图片脱离容器,定位于容器之外(本例子中图片的容器是class=

利用相对定位和偏移量属性,可以很好的实现以前需要用图片才能实现的界面,而且实现起来比也很方便。例如,当需要用户输入某些信息,我们常常会用到:标题栏-内容-确定按钮 这种结构,下面是利用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代码:

<div class="title">

<img src="/static/oliverhuang/addRole.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>