html+css+支付宝页面,HTML+CSS+JS简单实现支付宝付款界面效果
HTML+JS部分
Pay
var password="";
function clean(){
if(password.length>0){
password=password.substr(0,password.length-1);
}
for(var i=5;i>=0;i--){
var pwd=document.form.p[i];
if(pwd.value!=""){
pwd.value="";
break;
}
}
}
function put(m){
for(var i=0;i<6;i++){
var pwd=document.form.p[i];
if(pwd.value==""){
pwd.value=m;
password+=m;
break;
}
}
if(document.form.p[5].value!=""){
alert(password);
}
}
忘记密码?
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
0 |
CSS部分
body{
background: #333;
}
.box{
width:660px;
height: 425px;
background:#fff;
margin:30px auto;
border-radius:10px;
}
.logo{
width:320px;
height: 325px;
margin:50px auto;
position: absolute;
border-radius:10px;
}
.log{
width:300px;
height: 310px;
position: absolute;
margin:10px 10px;
border-radius:10px;
}
.pay{
width:320px;
height: 375px;
background:#fff;
position: absolute;
margin:25px 320px;
}
.top{
width:320px;
height: 45px;
line-height: 45px;
text-align: center;
background:RGB(247,246,245);
border-bottom: 1px solid RGB(230,230,230);
}
.close{
width:25px;
height:25px;
float: left;
margin:-35px 10px;
}
.close:hover{
width:27px;
height:27px;
}
.in{
width:320px;
height: 130px;
background:RGB(247,246,245);
}
.pwd{
width:277px;
height:46.5px;
border-radius: 6px;
position: absolute;
margin:20px 27px;
}
input{
width:43px;
height:43px;
position: relative;
margin:-1px -3px;
background:RGB(245,245,245);
border:0.5px solid RGB(230,230,230);
border-top:0.5px solid RGB(200,200,200);
border-bottom:0.5px solid RGB(200,200,200);
text-align: center;
line-height: 43px;
}
.left{
border-left:0.5px solid RGB(200,200,200);
border-radius: 3px 0 0 3px;
}
.right{
border-right:0.5px solid RGB(200,200,200);
border-radius: 0 3px 3px 0;
}
.key{
width:320px;
height: 200px;
}
table{
width:320px;
height: 200px;
border-collapse: collapse;
border-spacing: 0px;
border:1px solid RGB(230,230,230);
}
td{
width: 106.3px;
height: 45px;
text-align: center;
border:1px solid RGB(230,230,230);
font-size:15px;
color:#000;
}
td:hover{
background:RGB(247,246,245);
}
.back{
width:40px;
height: 30px;
}
.back:hover{
width:45px;
height: 35px;
}
图片资源
效果图
闲出屁来了整了个这玩意,欢迎大家提出宝贵意见!
html+css+支付宝页面,HTML+CSS+JS简单实现支付宝付款界面效果相关推荐
- html+css+js简单实现图片轮播效果
<html> <head> <style type="text/css"> *{background-color:green;} #lunbo{ ...
- js简单的下拉选中效果
css样式: *{ margin:0px auto; padding:0px} #xiala{ width:180px; height:33px; border:1px solid #999;text ...
- JS简单实现京东图片放大镜效果
效果图: 素材: 大图: 小图: 代码思路: 详见代码注释JS部分 代码: <!DOCTYPE html> <html lang="en"><head ...
- js简单实现百度地图雷达探测效果
实现在百度地图上雷达探测扩散效果图,如下: 可以自行扩展其他功能. 有需要实现该功能的小伙伴们下载参考:https://github.com/TreeUx/search 下载地址:https://do ...
- H5原生js简单拼图游戏
H5原生js简单拼图游戏 演示地址 效果展示 源码 index.html puzzle.css puzzle.js 源码下载 演示地址 链接: 演示地址 效果展示 源码 index.html < ...
- HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:游戏网站设计--腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. ...
- table固定列html5,css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
- 个人HTML期末大作业~ 个人网页(HTML+CSS)6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码
HTML期末大作业~ 个人网页6页面带下拉特效~简单带表格带设计说明 ~学生网页设计作业源码 作品介绍 下面介绍一下我的个人小网站吧,我的网站背景稍微单调一点白色,主要个人比较喜欢白色了,布局上面使用 ...
- 第一次预习作业(html,css,js简单介绍,HTML常用标签)
目录 一.HTML,CSS,JS,简单介绍 1.HTML 2.CSS 3.JS 二.HTML常用标签 一.HTML,CSS,JS,简单介绍 1.HTML HTML 是用来描述网页的一种语言. HTML ...
- 2020-06-28 html的实现页面锁屏 + css的BFC与float + js的立即执行函数写法 + 颜色搭配
2020-06-28 题目来源:http://www.h-camel.com/index.html [html] 实现一个页面锁屏的功能 锁屏的最终效果就是退出登录,思路是 点击锁屏按钮等操作时 使t ...
最新文章
- xauth: (stdin):1: bad display name LSPPC-Lenny:1 in add command
- #每天一种设计模式# 模板方法
- Python地信专题 | 基于geopandas的空间数据分析-坐标参考系篇
- php mongo in 查询语句,PHP 怎么执行mongodb 的 $in 和$size查询
- OpenPCDet:点云3D目标检测开源库
- UVA 12904 Load Balancing 暴力
- 【php】mysql全局ID生成方案
- overflow 属性
- 顺着IP地址他们能找到我家吗?
- Google Chrome Frame 自定义渲染方式,调用ActiveX
- cpu与计算机其他的通信,PC与CPU224 通讯
- java 数组求极值题目_数组的求极值
- 万王之王显示服务器尚未对外开放,《万王之王3》公测5月26日火爆开启 姚星彤性感代言...
- 杨咩咩的编程求学之路之开篇
- java 文件上传乱码_java上传txt文件,出现中文乱码
- 细谈数据库表锁和行锁
- 当Ubuntu安装软件碰到找不到安装包时E: Package ‘unzip‘ has no installation candidate
- lcb2板服务器状态说明,西子奥的斯服务器LCB2RCB2服务器使用[技术专攻]
- vc idispatchimpl 怎么实例化_京东APP订单业务楼层化技术实践解密
- Android 我的第一个Jetpack Compose应用
热门文章
- 中国十大徒步路线,你走过几个?_我是亲民_新浪博客
- comb函数在C语言中,always_comb和always @(*)
- 2021Fall - 欧陆CS转交互留学项目信息整理
- 山寨手机给正规手机仅仅是冲突吗?相互学习,正规国产机就不愁翻身。
- Paper reading (三十一):Personalized Nutrition by Prediction of Glycemic Responses(overview)
- JS模块化CommonJS、ES6模块化 、AMD、CMD知识总结
- setBounds()和setSize的区别
- Windows XP 全攻略
- linux修改ip地址详解
- csdn 问答使用与测评