jquery简单计算器效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery简单计算器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
*{
margin:0; padding:0;
border:0; outline:0;
}
body {
background-color:#002121;
color:#f2f2f2;
font-size:.9em;
}
.desc {
padding-left:50px;
position:fixed;
top:0;
left:0;
width:100%;
background-color:#f2f2f2;
height:40px;
color:#212121;
line-height:40px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
display:none;
}
.desc span {
text-transform:uppercase;
font-weight:bold;
float:left;
margin-right:10px;
}
.desc p {
text-transform:uppercase;
}
.desc a {
padding:10px 15px;
text-decoration:none;
color:#f2f2f2;
background-color:#212121;
background-color:rgba(0, 0, 0, .7);
border-radius:30px;
margin-right:20px;
font-size:.7em;
display:inline;
}
.desc a:first-child {
margin-left:100px;
}
.desc-open, .desc-close {
font-family:Arial, sans-serif;
position:absolute;
top:0;
right:0;
width:60px;
height:40px;
color:#212121;
text-transform:capitalize;
background-color:#f2f2f2;
text-align:center;
line-height:40px;
z-index:1000;
cursor:pointer;
}
.desc-close {
top:0;
right:60px;
border-right:5px solid #fafafa;
}
.fl {
float:left;
}
.expand1 {
width:50px;
}
.expand2 {
width:105px;
}
.clearfix::after, .clearfix::before {
height:auto;
content: "";
clear:both;
line-height:0;
visibility:hidden;
display:block;
text-decoration:none;
}
.calculator {
position:relative;
padding:3px;
width:300px;
background-color:white;
border-radius:10px 10px;
margin:70px auto 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration:none;
}
.calculato.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0