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. 三、python高级特性（切片、迭代、列表生成器、生成器）

    1.python高级特性 1.1切片 list列表 L=['Mli','add','sal','saoo','Lkkl'] L[0:3]  #即为['Mli','add','sal']  从索引0开始 ...

  2. 树莓派使用8188eu无线网卡

    #已经集成了8188eu驱动的镜像 http://cassidy.pi3g.com/rpi_images/raspbian-wifi-fix130523.7z #需要修改的信息 sudo nano / ...

  3. Merge Cells for DataGrid 合并单元格

    只适合不分页的固定行列的表格 <script type="text/javascript"> function onLoadSuccess(data){ var mer ...

  4. 第二百六十六天 how can I 坚持

    有些小郁闷,上班没事干,技术.要买房,还要结婚,买了房哪还有彩礼钱,还得借钱,愁人. 该咋办,毕梦琪. 哎.今天还和程秀通说好的去看房呢,整天犹豫不定的.烦. 今天平安夜啊.吃了个苹果,一生平平安安, ...

  5. 第二百五十一天 how can I 坚持

    hadoop,namenote和datanode.namenode如果要是在启动时加载到内存,会不会对内存的要求比较高呢. edits-->fsimage. secondnamenode,那么n ...

  6. POJ 2031 Building a Space Station （最小生成树）

    Building a Space Station 题目链接: http://acm.hust.edu.cn/vjudge/contest/124434#problem/C Description Yo ...

  7. [iOS UI进阶 - 6.3] UIView 动画

    1.UIView转场过渡动画   // // ViewController.m // UIViewAnimationTest // // Created by hellovoidworld on 15 ...

  8. HDU 3665 Seaside （最短路，Floyd）

    题意:给定一个图,你家在0,让你找出到沿海的最短路径. 析:由于这个题最多才10个点,那么就可以用Floyd算法,然后再搜一下哪一个是最短的. 代码如下: #pragma comment(linker ...

  9. 关于名称重整（name mangling）、多态性的一些简单介绍

    在看GCC源码的时候看到mangles这个单词,于是google了一下. 在面向对象编程语言出现之前,如果你想要打印不同类型的数据,需要写多个方法,例如PrintInteger(int i),Prin ...

  10. get_template_part() 函数详解备忘（转）

    最近研究官方主题 Twenty Eleven ,有一些东西网上现成的中文资料不好找,在博客里记载下来,算是分享,也算是备忘,wordpress 3.0 以后就开始便有了get_template_par ...