这是利用CSS相对定位和偏移写成的表单输入框效果,不是以前用的表格那种,也没有用UL li,觉得借此示例可练习一下CSS,特别是CSS的定位和布局方面的知识,了解top,bottom,left,right这些偏移量属性的用法。

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相对定位向上偏移,使用CSS的相对定位和偏移量相关推荐

  1. html相对定位 不占位置,CSS position 相对定位和绝对定位

    一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位 相对定位:relative 默认值:stat ...

  2. html css x y相对定位坐标,HTML与CSS之相对定位、绝对定位

    相对定位 指元素在其正常的位置偏移某些像素即相对于元素本身的原有位置html 我是C1 我是C2 css #C0{ border: 1px solid red; width: 400px; heigh ...

  3. 详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位 一.Static 静态定位 通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,这个时候你给这个元素设置的left,r ...

  4. CSS的相对定位详解

    大家好,今天给大家分享一下CSS的相对定位 看代码: <!DOCTYPE html> <html lang="en"> <head><me ...

  5. css中相对定位和绝对定位

    css中相对定位和绝对定位 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现 ...

  6. 相对定位(HTML、CSS)

    相对定位(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...

  7. html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别

    一.相对定位 相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位.它相对的是它自己. 举例:大div里面包含5个小 ...

  8. pandas使用shift函数对数数据进行向上偏移(-1)或者向下偏移(1)、索引不移动,移动之后无值的赋值为NaN、将原数据列与偏移后的数据列相加生成新的数据列

    pandas使用shift函数对数数据进行向上偏移(-1)或者向下偏移(1).索引不移动,移动之后无值的赋值为NaN.将原数据列与偏移后的数据列相加生成新的数据列 目录

  9. [iOS] tableView中实现底部button出现时tableView的bottom自动向上偏移

    这是我在工程中遇到的一个需求:选择照片之后,按bottomButton进行发送. 具体场景:照片存放在tableviewcontroller中,当选择照片之后,自动弹出bottomButton,点击之 ...

最新文章

  1. ETC核心技术团队CTO空降上海,引领高校区块链技术风潮
  2. php el表达式,JSP EL表达式学习
  3. java做a_Java编程实现A*算法完整代码
  4. 一文看懂家庭宽带光纤是如何入户
  5. python文件加锁
  6. qt5使用触屏 偶尔没响应_戴着手套玩手机!你试过吗?触屏灵敏又保暖,冬天再也不冻手~...
  7. 【问】如何应对关系型数据库中列的不断增加
  8. HTML5学习总结(1)——HTML5基础知识
  9. TVS管与稳压二极管的区别
  10. github等网站访问不稳定的几种改善办法
  11. 云桥网络 unity学习素材整理合集包 可自行获取
  12. linux修改无线网卡hwaddr,在Linux下改无线网卡的mac的地址
  13. 攻防世界web练习5
  14. Radiology:磁共振血管造影(MRA)在脑转移瘤治疗中对血管形态改变的测量
  15. Android 贝塞尔曲线实战之网易云音乐鲸云特效,2021程序员进阶宝典
  16. 脑机接口技术使瘫痪病人重获运动能力,4D打印技术已经到来!|技术前沿洞察...
  17. 2020大数据学习资料,全套源码无加密网盘下载
  18. ipad mini 4:ipad is disabled connect to iTunes
  19. zabbix模板-天融信防火墙
  20. 股指期货高频数据机器学习预测

热门文章

  1. Linux系统自动备份脚本,供参考的Linux系统中自动执行分段备份脚本
  2. mysql安装教程刘猿猿_mysql安装
  3. PAT_B_1025_Java(22分)
  4. linux wptmp文件分析,wordpress上传图片提示“缺少临时文件夹”的解决方法
  5. 游戏模型提取_狐狸在等我中文版 是一款恋爱冒险游戏
  6. 一个方法多个return_用这个方法可以快速、准确地记住一个单词的多个词义
  7. 数学--数论--HDU6919 Senior PanⅡ【2017多校第九场】
  8. [深度学习] 自然语言处理 --- ALBERT 介绍
  9. VxWorks下Shell调试总结
  10. 深度学习背后的数学_深度学习背后的简单数学