学校网站建设方面汇报,黔东南网站开发,株洲正规竞价优化推荐,响应式布局需要注意什么#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 #x1f… 作者主页Java李杨勇 简介Java领域优质创作者、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 效果演示 文末获取源码 代码目录 主要代码实现 CSS样式
body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #dcf3f3;
}.overall {background-color: #e3e7f1;--button-width: 80px;--button-height: 80px;box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1), 8px 8px 16px -10px rgba(0, 0, 0, .9);padding: 44px 24px 24px 24px;border-radius: 20px;display: grid;grid-template-areas: result result result result AC plus-minus percent divide num-7 num-8 num-9 multiply num-4 num-5 num-6 subtract num-1 num-2 num-3 add num-0 num-0 dot equal;grid-template-columns: repeat(4, var(--button-width));grid-template-rows: repeat(6, var(--button-height));
}/* 按钮 */.overall button {display: block;outline: none;border-radius: calc(var(--button-height)/3);font-size: 24px;font-family: Helvetica;font-weight: normal;margin: 10px;padding: 0;border: 0;color: rgb(66, 85, 105);background: linear-gradient(135deg, rgb(177, 202, 219)0%, rgba(246, 246, 246, 1)100%);box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1), 4px 4px 10px -8px rgba(0, 0, 0, .9);
}
HTML代码 :
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title简单计算器/titlelink relstylesheet typetext/css hrefcss/mystyle.css //headbodydiv classoveralldivinput typetext classoutput onfocusthis.blur(); value0 idresult/divbutton stylegrid-area :AC onClickclearzero() color:graybAC/b/buttonbutton stylegrid-area :plus-minus onClickcalToggle()±/buttonbutton stylegrid-area :percent onClickcalPercentage()%/buttonbutton stylegrid-area :add onClickappend()/buttonbutton stylegrid-area :subtract onClickappend(-)-/buttonbutton stylegrid-area :multiply onClickappend(×)×/buttonbutton stylegrid-area :divide onClickappend(÷)÷/buttonbutton stylegrid-area :equal onClickequal()b/b/buttonbutton stylegrid-area :num-1 onClickappendNum(1)1/buttonbutton stylegrid-area :num-2 onClickappendNum(2)2/buttonbutton stylegrid-area :num-3 onClickappendNum(3)3/buttonbutton stylegrid-area :num-4 onClickappendNum(4)4/buttonbutton stylegrid-area :num-5 onClickappendNum(5)5/buttonbutton stylegrid-area :num-6 onClickappendNum(6)6/buttonbutton stylegrid-area :num-7 onClickappendNum(7)7/buttonbutton stylegrid-area :num-8 onClickappendNum(8)8/buttonbutton stylegrid-area :num-9 onClickappendNum(9)9/buttonbutton stylegrid-area :num-0 onClickappendNum(0)0/buttonbutton stylegrid-area :dot onClickdot(.)./button/divscript typetext/javascript srcjs/mystyle.js/script/body/html
上面的JS文件需要引入 源码获取 大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取~ 打卡 文章 更新 46 / 100天 精彩推荐更新中 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
