开发学院网页设计DivCss 利用相对定位及偏移量做精美输入界面 阅读

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

 2006-08-18 19:22:26 来源:WEB开发网   
核心提示:利用相对定位和偏移量属性,可以很好的实现以前需要用图片才能实现的界面,利用相对定位及偏移量做精美输入界面,而且实现起来比也很方便,例如,无奈又用了偏移量, 绿色条纹使用了CSS滤镜产生渐变效果,当需要用户输入某些信息,我们常常会用到:标题栏-内容-确定按钮 这种结构

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

Tags:利用 相对 定位

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读