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

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

赞 (0)

相关推荐

  • VBS 偏移量解密工具[算法解密]

    复制代码 代码如下: If wscript.arguments.count=0 Or wscript.arguments.Count>1 then msgbox "请将通过偏移量加密过的 VBS 文件拖放到本脚本上即可[请逐个解密]!",48,"提示" wscript.quit End If For Each fname In wscript.Arguments If Right(fname,3)<> "vbs" Then Ms

  • js 获取元素在页面上的偏移量的方法汇总

    使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚动量(scroll)获得. 1.获取相对与document的偏移量 function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetP

  • JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

    因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程.好在JQuery提供了简单优雅,并且兼容的解决方法. 获取浏览器和页面文档的宽度和高度 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); 获取滚动条的位

  • javascript获取元素偏移量的方法有哪些

    javascript获取元素偏移量的方法有哪些

    通过四个属性可以获得元素的偏移量: 1.offsetHeight: 元素在垂直方向上占用的空间的大小,(像素).包括元素的高度,(可见的)水平滚动条的高度,上边框高度和下边框高度. 2.offsetWidth:元素在水平方向上占用的空间的大小,,(像素).包括元素的宽度,(可见的)垂直滚动条的高度,左边框高度和右边框高度. 3.offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离: 3.offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离:

  • 取得元素的左和上偏移量的方法

    function getElementLeft(element) { var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current!==null) { actualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft; } 取得元素的左偏移量: function getEleme

  • 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[

    问题: 如何取到页面中任意某个Html元素与body元素之间的偏移距离? offsetTop和offsetLeft 这两个属性,IE .Opera和Firefox对它俩的解释存在差异: IE5.0+ .Opera8.0+: offsetTop和offsetLeft 都是相对父级元素 Firefox1.06: offsetTop和offsetLeft 都是相对于body元素 因此: (1)在FF下直接使用offsetTop和offsetLeft,就可以取到页面中任意某个Html元素与body元素之

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

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

  • 如何利用PyQt5制作一个简单的登录界面

    如何利用PyQt5制作一个简单的登录界面

    目录 环境配置 额外工具配置 生成UI界面 总结 环境配置 新建python虚拟环境并激活 conda create -n pyqt python=3.8 conda activate py36 安装pyqt5 pip install pyqt5 安装pyqt5-tools pip install pyqt5-tools 在PyCharm中新建一个qtdemo工程,并使用这个新建的python虚拟环境作为工程环境 额外工具配置 依次点击File---Settings---Tools---Exte

  • 利用MySQL系统数据库做性能负载诊断的方法

    某大师曾说过,像了解自己的老婆 一样了解自己管理的数据库,个人认为包含了两个方面的了解: 1,在稳定性层面来说,更多的是关注高可用.读写分离.负载均衡,灾备管理等等high level层面的措施(就好比要保证生活的稳定性) 2,在实例级别的来说,需要关注内存.IO.网络,热点表,热点索引,top sql,死锁,阻塞,历史上执行异常的SQL(好比生活品质细节)MySQL的performance_data库和sys库提供了非常丰富的系统日志数据,可以帮助我们更好地了解非常细节的,这里简单地列举出来了

  • 如何利用python web框架做文件流下载的实现示例

    hello 大家好, 前不久公司里有个需求,把时序数据库中的日志下载到本地. 大家都知道. 数据库里的数据 都是存在数据库里的(废话). 想把他下载到客户的本地. 有的同学第一反应是: 只有文件才能下载. 所以大多数同学会想到先把数据从数据库中读出来,然后写入到服务器中的某个文件夹下生成文件, 然后再下载. 其实这是非常不效率的方法, 最简单的方法是,我们从数据库中读取到文件后, 直接以流的形式让用户去下载. 这里我拿python flask框架来做例子,其实非常简单,步骤一共有3个 1: 取出

  • go后端利用ffmpeg转hls做简单视频直播

    go后端利用ffmpeg转hls做简单视频直播

    目录 1. 前言 2. wsl安装ffmpeg并转换rtsp为hls 3. 前后端示例代码 3.1 后端go代码 3.2 前端代码 4. 结果及评估 1. 前言 上一次我们找到一些开源方案,目前我们先测试一下ffmpeg转hls播放的方式,看下延迟情况及兼容性情况,主要测试Windows.Linux和macOS中使用谷歌浏览器播放的情况.后端结合我们之前的cgo部分,建立一个简单的http服务器,然后提供给前端调用. 2. wsl安装ffmpeg并转换rtsp为hls sudo apt-get

  • Android实现支付宝支付密码输入界面

    Android实现支付宝支付密码输入界面

    本文实例为大家分享了Android实现支付宝支付密码输入界面的具体代码,供大家参考,具体内容如下 效果图: 主要代码: import java.util.ArrayList;   import android.annotation.SuppressLint; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.widget.Imag

  • 利用Seaborn绘制20个精美的pairplot图

    利用Seaborn绘制20个精美的pairplot图

    目录 参数 导入数据 默认情况 参数kind 参数hue 参数diag_kind 参数palette 参数markers 参数height 参数aspect 参数corner 参数vars 参数-x_vars/y_vars 参数-plot_kws/diag_kws 参数-dropna 返回值-PairGrid 大家好,我是Peter~ 本文记录的使用seaborn绘制pairplot图,主要是用来显示两两变量之间的关系(线性或非线性,有无较为明显的相关关系等),官网学习地址: https://s

  • 利用php+mysql来做一个功能强大的在线计算器

    找了很久,发现网上资料很少,于是想自己动手写,慢慢的发现问题多了,自己不怎么通算法,写一个计算式子短点还好,长了就挂了,再长点恐怕就要死机. 有一天做做mysql突然发现原来mysql功能这么强大,可以直接计算字符串...哈哈 这下可就高兴了. 代码还超级简单 就做了一个ajax的计算器 有式子错误提示 还可以时时显示输入的式子 有兴趣的朋友可以看看 更多的功能可以自己去开发 演示地址:http://www.jianlila.com/jsq.php jquer.js自己去下载 jsq1.php

  • 利用pandas按日期做分组运算的操作

    原始数据 TS PERIOD REQUEST STEPPED VALUE STATUS SECONDS 20-DEC-16 00:00:00.0 600 1 0 2.018 0 1482163200 20-DEC-16 00:01:00.0 600 1 0 2.019 0 1482163260 20-DEC-16 00:02:00.0 600 1 0 2.019 0 1482163320 20-DEC-16 00:03:00.0 600 1 0 2.019 0 1482163380 20-DEC

  • Android实现支付宝6位密码输入界面

    我们先来照图分析一下: (1)限制输入6位,每一位都有自己的框格,每个格显示一位: (2)有回退/取消支付按钮: (3)有忘记密码链接: (4)自定义的只能输入数字的键盘输入区: (5)在6位输完后自动进行密码校验和支付交易.如上图左边是iOS支付宝支付密码输入控件,右边是我模仿实现的效果. 首先,我们需要一个页面来完成以上的静态布局,.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <Relativ

随机推荐