`
shinepaopao
  • 浏览: 145297 次
社区版块
存档分类
最新评论

一学即会—用HTML5和CSS3创建一个联系人表单

阅读更多

今天,我们来学习一下如何用HTML5和CSS3创建一个简单的contact form,并提供代码下载。虽然许多WordPress插件可以马上安装和使用功能齐全的contact form,但是很多人还是倾向于有个独特的风格和漂亮的界面。因此,今天教程的重点是如何创建,至于喜欢什么风格,你可以使用CSS3来实现。网上有很多类似的教程,但它们都不是用HTML5来实现的,大部分都是基于HTML4或是XHTML1.0,今天我们就使用基于HTML5和CSS3来做一个contact form。

最终效果如下:
create-css3-contact-form

CSS3 style.css代码如下:

/* ===========================
======= Body style ========
=========================== */

body {
padding: 50px 100px;
font-size: 13px;
font-style: Verdana, Tahoma, sans-serif;
}

h2 {
margin-bottom: 20px;
color: #474E69;
}

/* ===========================
====== Contact Form =======
=========================== */

input, textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

textarea {
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}

.form label {
margin-left: 10px;
color: #999999;
}

/* ===========================
====== Submit Button ======
=========================== */

.submit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

 

HTML5代码如下:

下载HTML代码 index   同时发布于:J4ML   HTML5和CSS3推荐书籍:HTML5与CSS3基础教程(第7版)

2
6
分享到:
评论

相关推荐

    Html5+CSS3网页模板

    总的来说,这个“Html5+CSS3网页模板”资源对于初学者来说,是一个很好的学习材料,可以直观地了解如何将HTML5和CSS3应用于实际项目。对于经验丰富的开发者,这些模板则可以作为快速启动新项目的基础,减少从零开始...

    html5css3商务网站

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉效果吸引人的商务网站提供了强大的工具。在本资源"html5css3商务网站"中,我们可以期待学习和应用一系列先进的网页设计和开发概念。 HTML5,...

    iOS应用开发指南 使用HTML5、CSS3和JavaScript

    此外,PhoneGap和Cordova等框架允许开发者使用JavaScript结合HTML5和CSS3来创建原生iOS应用,这些框架通过WebView组件将Web内容嵌入到iOS应用中,并提供了访问设备功能(如摄像头、联系人、GPS等)的API。...

    用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    ### 一、旅游网站设计与实现的关键知识点 #### 1.1 HTML5基本结构与语义化标签的应用 ...此外,对于已经有一定基础的学生而言,这些项目也能提供一个检验自己能力的机会,通过亲手实现这些功能,进一步巩固所学知识。

    CSS3星球旋转手机表单代码.zip

    这个特效利用了CSS3的强大功能,尤其是其动画特性,创建了一个视觉上吸引人的银河星球围绕图标旋转的效果。当用户点击“立即申请”时,会弹出一个联系表单,提供互动体验。 首先,我们要了解CSS3中的关键帧动画(@...

    CSS3实现一款联系表单 输入框带小图标.zip

    在本文中,我们将深入探讨如何使用CSS3来创建一款具有小图标的联系表单,同时也会涉及HTML5的相关知识,这对于构建现代、响应式的网页设计至关重要。CSS3(层叠样式表第三版)提供了丰富的样式控制功能,而HTML5则为...

    CSS3、1000+案例.zip

    3. **HTML5CSS3 3D下拉折叠菜单 超炫CSS3菜单动画**:这里利用HTML5和CSS3的3D转换,创建了一个具有深度感的下拉菜单。通过transform-origin和perspective属性,可以实现菜单项展开时的立体翻转效果,让导航栏更具...

    Html5+Css3浅蓝色风格模板.zip

    "Html5+Css3浅蓝色风格模板.zip"是一个包含使用这两种技术构建的网页模板的压缩文件,适合设计师和开发者快速搭建一个具有清新浅蓝色调的网站。 HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,...

    使用HTML制作静态宠物网站——蓝色版爱宠之家(HTML+CSS)

    - **学习资源**: 对于初学者来说,这是一个很好的学习资源,可以帮助他们了解如何使用HTML和CSS构建基本的静态网站。 - **项目实践**: 通过实践这样的项目,学生可以加深对网页设计原理的理解,并提高实际操作能力。...

    HTML+CSS旅游网站

    【HTML+CSS旅游网站】是一种使用HTML(超文本标记语言)和CSS(级联样式表)构建的网页设计,主要用于创建具有吸引人视觉效果和良好用户体验的旅游主题网站。HTML作为网页内容的基础结构,而CSS则负责美化这些内容,...

    html+css+js漂亮的个人主页

    8. **联系表单**:为了方便用户与你联系,可以创建一个简单的联系表单,使用HTML的标签和元素。然后,使用JavaScript进行客户端验证,确保提交的信息有效,最后可能还需要后端技术支持(如PHP或Node.js)来处理表单...

    HTML5+CSS3咨询公司模板

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉效果吸引人的网站提供了强大支持。"HTML5+CSS3咨询公司模板"是专为商务咨询公司设计的一款网站模板,它集成了这两种技术的优势,为构建专业且...

    HTML5+CSS3商务企业网站模板是一款清爽大气风格的商务网站模板下载 .rar

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉吸引人的商务企业网站提供了强大的工具。此“HTML5+CSS3商务企业网站模板”旨在为设计师和开发者提供一个快速启动的框架,以构建高效且具有专业...

    HTML5实现又一个联系人表单文本框响应鼠标事件效果(无js).zip

    本项目“HTML5实现又一个联系人表单文本框响应鼠标事件效果(无js)”着重展示了如何利用HTML5的特性,不依赖JavaScript来实现表单元素的鼠标事件响应。 在传统的Web开发中,我们通常会使用JavaScript来监听和处理...

    图片存储企业html5模板是一款html5+css3实现的服务器提供商网站模板 .rar

    "图片存储企业html5模板"是一个专为服务器提供商设计的网站模板,采用现代网页技术HTML5和CSS3构建。HTML5是超文本标记语言的第五个版本,它增强了网页的交互性、可访问性和媒体支持,而CSS3则是层叠样式表的最新...

    国际货运公司网站模板是一款基于HTML5+CSS3制作的物流企业网站模板下载。_html网站模板_网页源码移动端前端_.rar

    总的来说,这款“国际货运公司网站模板”提供了一个快速构建物流行业专业网站的基础,利用HTML5和CSS3的强大功能,以及可能的JavaScript交互,可以创建出具有现代感、用户体验良好的网站。对于初学者,它是一个学习...

    Html+css 旅游网站

    【标题】:“Html+css 旅游网站”是一个基于HTML和CSS技术构建的静态网页项目,主要目的是为了展示和提供旅游相关信息。这样的网站通常包括目的地介绍、旅行攻略、预订服务等功能,旨在为用户提供丰富的旅游体验。 ...

    网格底纹个人web简历博客html5模板_灰色 博客 个人 简单 简历 html5 css3 幻灯.rar

    该压缩包文件包含一个个人Web简历博客的HTML5模板,设计风格以灰色为主,具有网格底纹,简单而直观。这个模板集成了博客功能,适用于展示个人...开发者可以通过这个模板快速创建一个专业且吸引人的个人简历博客网站。

    宽屏大气美食网站模板是一款基于HTML5+CSS3制作的美食行业网站模板下载。.rar

    总的来说,这个宽屏大气美食网站模板利用HTML5和CSS3的先进功能,为美食行业的网站提供了一个现代化的起点,包括宽大的视觉展示空间和互动性强的设计元素,方便开发者快速构建专业且吸引人的在线平台。用户只需下载...

    于HTML5+CSS3+jQuery实现可筛选的产品展示商务带有Tw样式,相册页面,常规页面_html网站模板.rar

    该压缩包文件包含一个基于HTML5、CSS3和jQuery构建的高级网站模板,特别适合用于商业产品展示。这个模板的设计风格色彩鲜明,旨在提供一种现代且吸引人的用户体验。以下是关于这个模板的一些关键知识点: 1. **...

Global site tag (gtag.js) - Google Analytics