div+css布局实现计算器ui代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现计算器ui代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: url(//repo.bfw.wiki/bfwrepo/image/62254197e677b.png); background-color: #F2F2F2; font-family: Tahoma; } .container { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100vw; } #container { width: 200px; padding: 8px 8px 20px 8px; margin: 20px auto; background-color: #ababab; border-radius: 4px; border-top: 2px solid #fff; border-right: 2px solid #fff; border-bottom: 2px solid #c1c1c1; border-left: 2px solid #c1c1c1; box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5); } #display { display: block; margin: 15px auto; height: 42px; width: 174px; padding: 0 10px; border-radius: 4px; border-top: 2px solid #211c1c; border-right: 2px solid #211c1c; border-bottom: 2px solid #040303; border-left: 2px solid #040303; background-color: #71817d; box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(75, 75, 75, 0.2); font-size: 28px; text-align: right; font-weight: 400; } .button { display: inline-block; margin: 2px; width: 42px; height: 42px; font-size: 16px; font-weight: bold; border-radius: 5px; } .mathButtons { margin: 2px 2px 6px 2px; color: #fff; text-shadow: -1px -1px 0px #44006f; background-color: #434343; border-top: 2px solid #c1c1c1; border-right: 2px solid #c1c1c1; border-bottom: 2px solid #181818; border-left: 2px solid #181818; box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2e2e2e; } .digits { color: #181818; text-shadow: 1px 1px 0px #fff; background-color: #ebebeb; border-top: 2px solid #fff; border-right: 2px solid #fff; border-bottom: 2px solid #c1c1c1; border-left: 2px solid #c1c1c1; border-radius: 4px; box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #dcdcdc; } .clearButton { color: #fff; text-shadow: -1px -1px 0px #44006f; background-color: #d20000; border-top: 2px solid #ff8484; border-right: 2px solid #ff8484; border-bottom: 2px solid #800000; border-left: 2px solid #800000; box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #b00000; } .digits:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0