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. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇04：碰撞检测》

    4.碰撞检测 碰撞概述: 游戏世界里,游戏对象不能做出如同在真实世界里的物理运动效果.对于大部分游戏来说,都要为其添加物理系统,让其可以模拟真实世界发生的物理运动.但是在这个打飞机游戏Demo中,是用 ...

  2. Directory.GetCurrentDirectory

    1.一个应用程序中,Directory.GetCurrentDirectory获得的当前工作目录是C:\Windows\System32,这是为什么呢?是如何设置的? 2.在WinXP下:System ...

  3. HDU4864：Task（贪心）

    题意: 给出n个机器和m个任务,对于一天来说,每个机器有最大工作时间xi,可接受最大等级yi,每个任务有一个工作时间xi,一个等级yi,可获价值为500*xi+2*yi,任务需要在一台机器一天内完成, ...

  4. (转)定制iOS 7中的导航栏和状态栏

    近期,跟大多数开发者一样,我也正忙于对程序进行升级以适配iOS 7.最新的iOS 7外观上有大量的改动.从开发者的角度来看,导航栏和状态栏就发生了明显的变化.状态栏现在是半透明的了,这也就意味着导航栏 ...

  5. 应用反射写的tostring方法

    应用反射写的tostring方法 应用反射写的tostring方法,方便以后查询 代码 package com.chzhao.reflecttest; import java.lang.reflect ...

  6. 最新CentOS6.x下redis安装

    1:软件环境: 系统版本:CentOS release 6.5 redis版本:redis-cli 3.0.5 安装目录:"/usr/local/redis" 下载软件:" ...

  7. HDU 2647 Reward (拓扑排序)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2647 题意是给你n点m条有向边,叶子点(出度为0)上的值为888,父亲点为888+1,依次计算... ...

  8. Android系统中Parcelable和Serializable的区别

    转载:https://greenrobot.me/devpost/android-parcelable-serializable/ 进行Android开发的时候,我们都知道不能将对象的引用传给Acti ...

  9. C#学习笔记（十）：反射

    反射 放射是指在程序运行时动态的获取类的信息的机制,我们下面来看看C#中的反射. Type Type 为 System.Reflection 功能的根,也是访问元数据的主要方式. 使用 Type 的成 ...

  10. 使用IIS Express

    1.IIS Express 概述 IIS Express是一个微软推出的一款免费,且小型.轻量特别适合ASP.NET开发人员使用的Web开发服务器.在没有IIS Express之前,开发人员只能使用下 ...