html5在线留言表单代码,HTML CSS样式用户留言表单代码分享
在我们的网站、页面设计中需要注重细节,不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验,以及会影响用户以后是否会回访我们的网站/博客。在这篇文章中整理一个用户留言 HTML CSS 样式代码。
首先我们要在网页中加上常用的几个标签文本,比如姓名,电子邮件,内容以及提交按钮,然后我们针对这些字段文本增加和修改样式就可以。
Contact Form
Please fill all the texts in the fields.
Your Name :
Your Email :
Message :
Subject :
Job Inquiry
General Question
一、基本灰色 HTML CSS 样式用户留言表单代码
样式:
/* 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
}
女程序员博客 , 版权所有丨本站采用BY-NC-SA协议进行授权 , 转载请注明HTML CSS 样式用户留言表单代码分享!
【声明】:本博客仅为分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。
【关于安全】:任何 IDC 都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。
html5在线留言表单代码,HTML CSS样式用户留言表单代码分享相关推荐
- 6款漂亮HTML CSS样式用户留言表单
如今我们的网站.页面更加需要注重细节,不论是字体的样式.还是图片的分辨率清晰度都会影响到用户的访问体验和PV,以及用户以后是否会回访我们的网站/博客. 标记 首先我们要在网页中加上常用的几个标签文本, ...
- 织梦自定义表单如何添加提交时间?织梦留言板后台又该怎样显示用户留言时间?
留言板是企业公司网站中经常使用的功能,其实现在的留言板功能主要是方便用户咨询产品信息,因此为了方便查看信息需要给留言板增加一个留言时间记录,而这个功能是多数留言板没有的,那么要怎样显示用户留言时间呢? ...
- php判断表单修改内容,JavaScript判断用户是否对表单进行了修改的方法_javascript技巧...
本文实例讲述了JavaScript判断用户是否对表单进行了修改的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以判断出用户是否对表单内容进行了修改,如果修改了表单,并退出浏览器,则会提醒用 ...
- css-net 中华版,使用C#代码选择CSS样式(ASP.net)
我在我的Default.aspx页面中的嵌入式CSS中有两个类.如果需要,我可以将代码转移到外部CSS.使用C#代码选择CSS样式(ASP.net) 我可以在C#中创建一个代码,点击一个按钮后,我可以 ...
- 外观html与外观css的区别,用房间和装修来解读html代码与css样式的区别和关系
想要了解html与css的区别和关系,就必须要知道这2个东西的特点和主要用途用法等.html语言是一种超文本标记语言,通过html语言中的各种标签(如table.p.div等),可以设计出很多不同结构 ...
- HTML5生日祝福蛋糕页面(生日蛋糕树) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心
HTML5七夕情人节表白网页❤生日蛋糕(蛋糕树)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这 ...
- html5中插入样式表方法,如何插入css样式?
如何插入css样式?下面本篇文章就来给大家介绍一下插入css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 准备 1.首先准备一个html文件:test.html,不建议 ...
- 如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
- js 设置html标签样式表,js怎么设置css样式?
js怎么设置css样式?本篇文章就给大家介绍js设置css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.直接设置style对象(内联样式) 使用JavaScript ...
- jq动态修改css样式表,jquery 动态改变css样式
jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接 ...
最新文章
- CornerNet代码解析——损失函数
- 2020中国大学本科毕业生质量排行榜公布(附前152名)
- MySQL主主复制搭建教程收集(待实践)
- 关于ibatis.net 和 Nhibernate的选择
- 软件测试师具备的素质_软件测试工程师有哪些需要具备的能力呢
- lua中的require、dofile、loadfile
- LeetCode 778. 水位上升的泳池中游泳(二分查找+dfs)
- 产品经理常犯的七大错误
- 查询列名在哪张表_SQL—多表查询
- PHP-Java-Bridge使用笔记
- java冒泡怎么写_java 冒泡 又一种写法
- 便利删除_知名便利店凉了?!刚刚道歉
- Windows 64 位 mysql 5.7.20 安装教程
- 深度报文检测 linux,DPI-深度报文检测(进阶)
- nfine配置oracle,nfine去后门版和数据库说明
- vscode打开setting.json文件
- 计算机如何引用表格,(Excel如何实现跨文件表引用数据)excel引用其他表格数据路径...
- 面试官都叫好的Synchronized底层实现,这工资开多少一个月?
- 西门子PLC远程监控与数据采集方案
- 福州大学866信号与系统初试经验分享