利用相对定位和偏移量属性,可以很好的实现以前需要用图片才能实现的界面,而且实现起来比也很方便。例如,当需要用户输入某些信息,我们常常会用到:标题栏-内容-确定按钮 这种结构,下面是利用CSS样式的相对定位及偏移量做的输入界面。主要特点是:
- 标题栏图片有向上的偏移量。利用样式:top:-10px;position:relative; 可以让图片脱离容器,定位于容器之外(本例子中图片的容器是class="main"的div)。但有一点需要注意的是,图片位置虽然脱离容器了,但它依旧在容器里占有一定空间,该例子中,无论怎么设置.main选择器的height属性,绿色条纹的高度总不会小于20px(图片的高度)。
- 标题栏的文字我同样用了top,bottom,left,right这些偏移量属性,一开始想只利用vertical-align:middle; 属性让文字垂直居中,但失败了,文字一直和底线对齐,无奈又用了偏移量。
- 绿色条纹使用了CSS滤镜产生渐变效果,可惜据说只有IE支持:-(
- 末端“确定”按钮也是用了相对定位及偏移量的技术。
下面是效果图及代码,只用了一张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%;
}
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/1af1ceaad82d87baf6418614964acdf1.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 >
< img src ="https://i-blog.csdnimg.cn/blog_migrate/1af1ceaad82d87baf6418614964acdf1.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 >