• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 纯CSS实现漂亮的提交表单

纯CSS实现漂亮的提交表单

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS提交表单,CSS表单等相关知识,佚名 希望在学习及工作中可以帮助到您

很漂亮的CSS提交表单,大家先看看

CSS代码:

  1. body { padding:50px 100px; font:13px/150% Verdana, Tahoma, sans-serif; }   
  2.   
  3. /* tutorial */  
  4.   
  5. input, textarea {    
  6.  padding: 9px;   
  7.  border: solid 1px #E5E5E5;   
  8.  outline: 0;   
  9.  font: normal 13px/100% Verdana, Tahoma, sans-serif;   
  10.  width: 200px;   
  11.  background: #FFFFFF url('bg_form.png') left top repeat-x;   
  12.  background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));   
  13.  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);   
  14.  box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
  15.  -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
  16.  -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
  17.  }   
  18.   
  19. textarea {    
  20.  width: 400px;   
  21.  max-width: 400px;   
  22.  height: 150px;   
  23.  line-height: 150%;   
  24.  }   
  25.   
  26. input:hover, textarea:hover,   
  27. input:focus, textarea:focus {    
  28.  border-color: #C9C9C9;    
  29.  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;   
  30.  }   
  31.   
  32. .form label {    
  33.  margin-left: 10px;    
  34.  color: #999999;    
  35.  }   
  36.   
  37. .submit input {   
  38.  width: auto;   
  39.  padding: 9px 15px;   
  40.  background: #617798;   
  41.  border: 0;   
  42.  font-size: 14px;   
  43.  color: #FFFFFF;   
  44.  -moz-border-radius: 5px;   
  45.  -webkit-border-radius: 5px;   
  46.  }   

html代码:

您可能想查找下面的文章:

  • 纯CSS实现漂亮的提交表单

相关文章

  • 2017-08-06使用CSS3来匹配横屏竖屏的简单方法
  • 2017-08-06用CSS中的map标签制作单图多区域点击的示例
  • 2017-08-06不必需的样式脚本文件导致页面不能及时更新
  • 2017-08-06meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染
  • 2017-08-06css中float left与float right的使用说明
  • 2017-08-06CSS旋转与翻转使用示例详解
  • 2017-08-06CSS2书写顺序包括位置属性、自身属性、文字系列
  • 2017-08-06CSS3支持IE6, 7, and 8的边框border属性
  • 2017-08-06创建一个自己的bootstrap模板示例
  • 2017-08-06IE6无法识别伪对象:first-letter和:first-line解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS书写规范、顺序和命名规则
    • css实现文本和div居中对齐详细讲解示例
    • CSS中视觉语义不等于基于表现的类
    • CSS定义鼠标经过时鼠标图形的十五种样式整理
    • 动态的样式语言less语法详解之变量与extend
    • CSS画出各种三角形如等边三角形
    • IE6下CSS多类选择符优先级不起作用的bug分析及解决方法
    • 网站制作的切图技巧 网页设计中的切图技巧介绍(图文)
    • css 浮动(float)页面布局(下)
    • 详细解读CSS的预编译器PostCSS

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有