1.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

 <style>

 input[type="text"]

 {

   width:150px;

   display:block;

   margin-bottom:10px;

   background-color:yellow;

   font-family: Verdana, Arial;

 }

 input[type="button"]

 {

   width:120px;

   margin-left:35px;

   display:block;

   font-family: Verdana, Arial;

 }

 </style>

 </head>

 <body>

 <div class="about-text">

     <form class="contact-from">

        <input type="text" name="text" id="name" placeholder="姓名：">

        <input type="text" name="text" id="e-mail" placeholder="电话：">

        <textarea name="text" id="message" cols="30" rows="5"                       placeholder="咨询内容：" >

 </textarea><br>

        <button class="send">确认提交</button>

     </form>

 </div>

 </body>

 </html>

效果图：

2.

 <form action="" method="post" class="STYLE-NAME">

 <h1>Contact Form

 <span>Please fill all the texts in the fields.</span>

 </h1>

 <label>

 <span>Your Name :</span>

 <input id="name" type="text" name="name" placeholder="Your Full Name" />

 </label>

 <label>

 <span>Your Email :</span>

 <input id="email" type="email" name="email" placeholder="Valid Email Address" />

 </label>

 <label>

 <span>Message :</span>

 <textarea id="message" name="message" placeholder="Your Message to Us"></textarea>

 </label>

 <label>

 <span>Subject :</span><select name="selection">

 <option value="Job Inquiry">Job Inquiry</option>

 <option value="General Question">General Question</option>

 </select>

 </label>

 <label>

 <span>&nbsp;</span>

 <input type="button" class="button" value="Send" />

 </label>

 </form>

效果图：基本灰色

3.

 /* Basic Grey */

 .basic-grey {

 margin-left:auto;

 margin-right:auto;

 max-width: 500px;

 background: #F7F7F7;

 padding: 25px 15px 25px 10px;

 font: 12px Georgia, "Times New Roman", Times, serif;

 color: #888;

 text-shadow: 1px 1px 1px #FFF;

 border:1px solid #E4E4E4;

 }

 .basic-grey h1 {

 font-size: 25px;

 padding: 0px 0px 10px 40px;

 display: block;

 border-bottom:1px solid #E4E4E4;

 margin: -10px -15px 30px -10px;;

 color: #888;

 }

 .basic-grey h1>span {

 display: block;

 font-size: 11px;

 }

 .basic-grey label {

 display: block;

 margin: 0px;

 }

 .basic-grey label>span {

 float: left;

 width: 20%;

 text-align: right;

 padding-right: 10px;

 margin-top: 10px;

 color: #888;

 }

 .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {

 border: 1px solid #DADADA;

 color: #888;

 height: 30px;

 margin-bottom: 16px;

 margin-right: 6px;

 margin-top: 2px;

 outline: 0 none;

 padding: 3px 3px 3px 5px;

 width: 70%;

 font-size: 12px;

 line-height:15px;

 box-shadow: inset 0px 1px 4px #ECECEC;

 -moz-box-shadow: inset 0px 1px 4px #ECECEC;

 -webkit-box-shadow: inset 0px 1px 4px #ECECEC;

 }

 .basic-grey textarea{

 padding: 5px 3px 3px 5px;

 }

 .basic-grey select {

 background: #FFF url('down-arrow.png') no-repeat right;

 background: #FFF url('down-arrow.png') no-repeat right);

 appearance:none;

 -webkit-appearance:none;

 -moz-appearance: none;

 text-indent: 0.01px;

 text-overflow: '';

 width: 70%;

 height: 35px;

 line-height: 25px;

 }

 .basic-grey textarea{

 height:100px;

 }

 .basic-grey .button {

 background: #E27575;

 border: none;

 padding: 10px 25px 10px 25px;

 color: #FFF;

 box-shadow: 1px 1px 5px #B6B6B6;

 border-radius: 3px;

 text-shadow: 1px 1px 1px #9E3F3F;

 cursor: pointer;

 }

 .basic-grey .button:hover {

 background: #CF7A7A

 }

效果图：优雅图

css笔记05：表单的更多相关文章

  1. And Design：拓荒笔记——Form表单

    And Design:拓荒笔记——Form表单 Form.create(options) Form.create()可以对包含Form表单的组件进行改造升级,会返回一个新的react组件. 经 For ...

  2. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. Python Tornado初学笔记之表单与模板（一）

    Tornado中的表单和HTML5中的表单具有相同的用途,同样是用于内容的填写.只是不同的是Tornado中的表单需要传入到后台,然后通过后台进行对模板填充. 模板:是一个允许嵌入Python代码片段 ...

  5. 如何写好CSS系列之表单(form)

    表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置:二是表单元素,如:输入框.单选.复选.列表组件.搜索组件等,由于列表组件.搜索组件不是单纯的css组件,所以暂且没有实现. 一 ...

  6. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  7. bootstrap学习笔记细化(表单)

    主要属性: class="form-inline" 水平排列 class="form-group" 组键 form-control 圆角方框发光 input-l ...

  8. struts2学习笔记之表单标签的详解:s:checkbox/radio/select/optiontransferselect/doubleselect/combobox

    struts2中的表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\t ...

  9. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  10. css实现input表单验证

    有没有办法只通过css来确定input标签是否有输入? 我有这个想法是因为我想完成一个自动补全的input部件,最基本的功能是: 如果input没有内容,这隐藏下拉框 反之,显示下拉框 我找到了一个也 ...

随机推荐

  1. 分布式文件系统-HDFS

    HDFS Hadoop的核心就是HDFS与MapReduce.那么HDFS又是基于GFS的设计理念搞出来的. HDFS全称是Hadoop Distributed System.HDFS是为以流的方式存 ...

  2. hadoop2.7【单节点】单机、伪分布、分布式安装指导

    问题导读 1.从本文部署实际部署,总结本地模式.伪分布.分布式的区别是什么?2.单机是否是伪分布?3.本地模式是否可以运行mapreduce? 来源:about云 http://www.aboutyu ...

  3. nservicebus教程-目录

    表的内容 开始 坚持NServiceBus 扩展 每天 举办 管理和监控 发布订阅 长时间运行的流程 定制 版本控制 常见问题解答 样品 开始 概述 NServiceBus一步一步向导 架构原则 事务 ...

  4. cannot load such file -- openssl

    [test@localhost usr]$ /usr/local/ruby/bin/gem install bundler ERROR: Loading command: install (LoadE ...

  5. thymeleaf中的th:with用法

    局部变量,th:with能定义局部变量: <div th:with="firstPer=${persons[0]}"> <p> The name of th ...

  6. 菜鸟学习 git

    到新公司学习和使用 git 有一段时间了.不得不说 git 真的很牛逼,当然,git 的牛逼是建立在 Linux 之父的牛逼的基础上的. 首先跪着推荐 git 学习网站:http://www.liao ...

  7. Android中图表AChartEngine学习使用与例子

    很多时候项目中我们需要对一些统计数据进行绘制表格,更多直观查看报表分析结果.基本有以下几种方法: 1:可以进行android  api进行draw这样的话,效率比较低 2:使用开源绘表引擎,这样效率比 ...

  8. 瑞丽的SQL-基于窗体的排名计算

    在SQL Server中,窗体被定义为用户指定的一组行. 之所以要提出窗体这个概念,由于这种基于窗体或分区的又一次计算在实际工作应用范围比較广泛.比如.假设我们要对每一个班级中的学生按成绩进行排序,在 ...

  9. Spring+Ibatis集成开发实例

    首先简历数据库demo(本文选mysql) 数据库脚本: CREATE TABLE `ibatis` (  `id` varchar(20) NOT NULL,  `name` varchar(20) ...

  10. python的一些总结5

    上面4都是水的 恩每篇都一点知识点 用来写给不耐烦的人看..哈哈这篇 争取不水. 上面4篇如果 掌握 基本上是 80%常用的代码了. 1.下面讲一下 比较常用的代码: macro(jinja 上的功能 ...