HTML+CSS做支付表单

效果图：

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js第二次作业</title><style>#div1 {width: 400px;height: 700px;border: 1px solid grey;border-radius: 30px;/*圆角*/padding-left: 20px;padding-right: 20px;/*边距20px*/}#div2 {text-align: right;/*右对齐*/}#div3 {padding-left: 130px;padding-right: 10px;}</style>
</head><body><!--div1：外边框--><div id="div1"><h1><a style="font-family: 宋体;">支付表单</a></h1><br>必填字段: *<input type="hidden"><br /><h2>联系人信息</h2><!--第一个form--><div id="div3"><form><fieldset style="border:1px solid rgb(121, 106, 106)"><legend>标题</legend><input type="radio" name="r1" />先生<br /><input type="radio" name="r1" />女士<br /></fieldset></form></div><div id="div2"><br />姓名：* <input type="text" style="width:250px;" /><br /><br />E-mail: * <input type="text" style="width:250px;" /><br /><br />密码：* <input type="password" style="width:250px;" /><br /><br /></div><h2>支付信息</h2>&emsp;&emsp;&emsp;&emsp;卡类型：<select><option>Visa</option><option>ID Card</option><option>其他</option></select><br /><br /><div id="div2">卡号：* <input type="text" style="width:250px;" /><br /><br />卡有效日期：* <input type="data" style="width:250px;" /><br /></div>&emsp;&emsp;<em>输入格式：月/年</em><br /><br /><center><button>确认支付</button></center></div></body></html>

HTML+CSS做支付表单相关推荐

CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单 1. 列表标签(重点) 表格是用来显示数据的,列表是用来布局的. 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表特点: 列表最大的特点就是整齐 .整洁. 有 ...
JavaFX官方教程（六）之带有JavaFX CSS的花式表单
翻译自带有JavaFX CSS的花式表单本教程通过添加级联样式表(CSS)使您的JavaFX应用程序看起来很有吸引力.您开发设计,创建.css文件并应用新样式. 在本教程中,您将获取一个使用标签 ...
[css] css怎么更改表单的单选框或下拉框的默认样式？
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
css复选框表单,用CSS来美化表单——复选按钮篇
原标题:用CSS来美化表单--复选按钮篇今天,我们来学习如何利用CSS美化checkbox复选框按钮,过程非常简单,本文主要是提供美化复选框按钮的方法,至于美化到何种程度还需大家自己去举一反三,发挥 ...
html input validator,BootstrapValidator 表单验证超详要怎么做？表单验证超详细教程！...
我们在接触Bootstrap的时候总会遇到不同的问题和困难,今天我们就来说说有关于"BootstrapValidator 表单验证超详要怎么做?"这个问题.下面是小编整理的有关于这 ...
validate做前端表单验证
2019独角兽企业重金招聘Python工程师标准>>> 一.网站 1.validation插件官网:https://jqueryvalidation.org/ 2.菜鸟教程 :htt ...
Bootstrap全局css样式_表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html在表单左上角显示文字,js+css实现增加表单可用性之提示文字
平常设计表单的时候,我们会加入一些提示文字,比如说在搜索框里,我们会提示"请输入关键字",并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示,最常见的做法是利用value来设置: ...
Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

HTML+CSS做支付表单

HTML+CSS做支付表单相关推荐

最新文章

热门文章