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

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

转载请注明出处:https://www.onexin.net/the-use-of-relative-positioning-and-offset-done-beautifully-input-interface/

随机文章:

1、复制地址支持(IE、Firefox、Opera)的代码
https://www.onexin.net/%e5%a4%8d%e5%88%b6%e5%9c%b0%e5%9d%80%e6%94%af%e6%8c%81ie%e3%80%81firefox%e3%80%81opera%e7%9a%84%e4%bb%a3%e7%a0%81/

2、整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件
https://www.onexin.net/integrated-tabs-slide-scrollable-common-ui-components-such-as-jquery-plug-in/

3、网站建设必读:seo搜索引擎优化十大误区
https://www.onexin.net/website-must-read-search-engine-optimization-top-ten-mistakes/

4、HTML5客户端存储数据的两种新方法
https://www.onexin.net/html5-client-side-data-storage-two-new-methods/

5、提高PHP编程效率的53个要点
https://www.onexin.net/php-programming-to-improve-the-efficiency-of-the-53-points/

Leave a Reply