jquery jcalculator实现输入框点击打开计算器计算输入效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery jcalculator实现输入框点击打开计算器计算输入效果代码
代码标签: jquery jcalculator 输入框 计算器
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-decoration: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content:""; content: none; } q:before, q:after { content:""; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*========================*/ /*========= BODY =========*/ /*========================*/ .container { width: 680px; margin: 0 auto; } .container h2 { font-weight: bold; font-family: Roboto; font-size: 46px; color: #5e5e5e; margin: 0 0 30px; } /*========================*/ /*======== HEADER ========*/ /*========================*/ .header { padding: 60px 0 40px; text-align: center; background: #fc6e51; font-family: Roboto; color: #fff; position: relative; border-bottom: 20px solid #db5138; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .header img { opacity: .5; } .header h1 { font-size: 64px; line-height: 1.6; font-weight: 900; } .header h2 { font-size: 1.375rem; opacity: 0.8; color: #fff; } .header a { display: inline-block; margin: 25px 0 0; padding: 0 25px; clear: both; color: #fff; font-size: 12px; text-transform: uppercase; text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.4); height: 40px; line-height: 40px; border-radius: 5px; -webkit-transition: .2s all; transition: .2s all; } .header a:hover { background: rgba(255, 255, 255, 0.1); } .header a:active { position: relative; top: 1px; } /*=========================*/ /*======== CONTENT ========*/ /*=========================*/ #content { margin-top: 50px; text-align: center; font-family: Roboto; } #content p { margin: 0 0 35px; } #content p .code { font-family: Courier New; font-size: 14px; background: #ebebeb; margin: 0 2px; padding: 5px 10px; } #content .sublime { text-align: left; border-radius: 5px; background: #303030; line-height: 1.8; text-align: left; padding: 30px 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #e6db74; font-size: 14px; font-family: Courier New; } #content .sublime .p { color: #f92672; } #content .sublime .w { color: #fff; } #content .sublime .g { color: #7fe22a; } #content .sublime .comment { color: #75715e; } #content .sublime .padding { padding: 0 0 0 25px; } #content .sublime .padding-2 { padding: 0 0 0 60px; } /*=========================*/ /*===== DEMONSTRATION =====*/ /*=========================*/ .demonstration { margin: 50px 0 0; background: #f3f3f3; font-family: Roboto; padding: 60px 0; color: #5e5e5e; text-align: center; } .demonstration .jcalculator_wrap { width: 460px; margin: 0 auto; } .demonstration .jcalculator_wrap input { border: 0; padding: 20px 30px; width: 460px; color: #5e5e5e; font-size: 24px; font-family: Roboto; border-radius: 5px; outline: 0; border: 4px solid #D8D8D8; } .demonstration .jcalculator_wrap input:focus { border-color: #37BE42; border-radius: 5px 5px 0px 5px; } .demonstration .jcalculator_wrap input:focus .jcalculator { display: block; } /*========================*/ /*========= SHARE ========*/ /*========================*/ #share { margin-top: 50px; margin-bottom: 50px; text-align: center; } #share h2 { margin: 0 0 28px; } #share a { width: 80px; height: 80px; display: inline-block; border-radius: 50%; } #share a img { width: 30px; height: 30px; border: 0px; padding-t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0