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. Tkinter教程之Text(1)篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811343 '''Tkinter教程之Text篇(1)''''''1.创建第一个Text''' ...

  2. CSS定位（CSS定位概述、相对定位、绝对定位、浮动）

    CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...

  3. HDU-4747 Mex 线段树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4747 题意:求一个数列中,所有mex(L,R)的和. 注意到mex是单调不降的,那么首先预处理出mex ...

  4. 微服务架构下分布式Session管理

    转载本文需注明出处:EAII企业架构创新研究院(微信号:eaworld),违者必究.如需加入微信群参与微课堂.架构设计与讨论直播请直接回复此公众号:“加群 姓名 公司 职位 微信号”. 一.应用架构变 ...

  5. Spark RDD概念学习系列之Spark的数据存储（十二）

    Spark数据存储的核心是弹性分布式数据集(RDD). RDD可以被抽象地理解为一个大的数组(Array),但是这个数组是分布在集群上的. 逻辑上RDD的每个分区叫一个Partition. 在Spar ...

  6. Linux查看物理内存信息

    Linux查看物理内存信息 1. 查看内存大小 dmidecode|grep Size 输出 Runtime Size: 64 kB ROM Size: 4608 kB Installed Size: ...

  7. mysql数据库中查询时间

    项目中要对数据按时间处理,在数据库中,时间处理的格式如 2014-12-09 06:30:17 时间查询出来如下所示: 现在要查询具体有哪天的数据,应用substring函数,SQL如下: ) as ...

  8. stm32f407 定时器 用的APB1 APB2 及 定时器频率

    上午想要用Timer10做相对精确的延时功能,但是用示波器发现实际延时数值总是只有一半,百思不得其解.仔细查阅各处资料结合实际研究后对stm32f407的14个定时器的时钟做一个总结: 下面来源: h ...

  9. 解读XMP元数据中ALAssetRepresentation

    当用户进行某些更改(裁剪,消除红眼,...),在内置 Photos.app iOS上,这些更改将不会应用到由相应 fullResolutionImage 返回的 ALAssetRepresentati ...

  10. Educational Codeforces Round 10 D. Nested Segments (树状数组)

    题目链接:http://codeforces.com/problemset/problem/652/D 给你n个不同的区间,L或者R不会出现相同的数字,问你每一个区间包含多少个区间. 我是先把每个区间 ...