二进制计算器效果
代码语言:html
所属分类:布局界面
代码描述:二进制计算器效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;900&display=swap"); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; user-select: none; } html, body { width: 100%; height: 100%; } body { display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #f5f5f5; font: 400 14px Roboto, sans-serif; } h1 { margin-bottom: 30px; font-size: 28px; color: #335c62; } #container { width: 33%; } #res { background-color: lightgray; height: 48px; font-size: 26px; border: 1px solid #f5f5f5; border-radius: 5px; padding: 5px 20px; color: #363636; } #btns button { width: 25%; height: 36px; font-size: 20px; margin: 0px; float: left; border: 2px solid #f5f5f5; border-radius: 5px; } #btn0, #btn1 { background-color: #59a2ad; color: #f3f3f3; } #btnClr, #btnEql { background-color: #335c62; color: #f3f3f3; } #btnSum, #btnSub, #btnMul, #btnDiv { background-color: #363636; color: #f3f3f3; } .description { margin-top: 50px; text-align: center; color: #999; width: 40%; line-height: 28px; font-size: 16px; } span { color: #335c62; } </style> </head> <body translate="no"> <h1>二进制计算器</h1> <div id="container"> <div id='res'&g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0