当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-09-06

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


    请填写角色基本信息


   
角色名称:
     
   

   
角色描述:
     
   


    确定

 


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • linux c下利用srand和rand函数生成随机字符串
  • 请问:Linux下用C编程计算CPU利用率和内存利用率?
  • linux下利用(cat,strings,head,sed)命令生成随机字符串
  • 在2003下利用vmware安装了linux,又利用host-only方式上了网,问题如下多谢指点!!!
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • 大虾 紧急求助!!!!如何求得当前机子的处理器利用率和内存利用率?
  • 如何利用libpcap和Python嗅探数据包
  • 如何利用Bash脚本(利用awksedgrepwc等)来自动修改配置文件
  • windows堆栈溢出利用的七种方式
  • 求RADIUS的动态分配IP的问题(利用IPPOOL)
  • iowait和cpu利用率的权衡问题
  • 利用java.net.URLConnection上传文件
  • Qt中利用槽如何来传递参数
  • 浏览器漏洞利用框架 BeEF
  • 怎么样利用Socket进行Java网络编程
  • 请问如何编程获得CPU利用率?(空)
  • 如何利用Linux安装盘制作启动盘?
  • 谁知道linux/unix下利用Schema读取校验xml的开源代码,给一个链接,谢谢!
  • 怎样实现利用fprintf,输出定长字串,位数不足时在左侧填入指定字符填充。。
  • CPU、内存、数据库利用率监控
  • 怎样利用u-boot烧写??


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3