px转rem单位换算工具效果
代码语言:html
所属分类:其他
代码描述:px转rem单位换算工具效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* Global Styles */ @import url("https://fonts.googleapis.com/css?family=Fira+Code:400,600,700&display=swap"); html,body { background-color:#20393c; color:#fff; font-family:"Fira Code", arial, sans-serif; font-size:100%; height:100%; line-height:1.45; } *,*::before,*::after { box-sizing:border-box; } *:focus { outline:none; } input::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; } ::selection { background-color:#439775; color:#fff; } /* Form */ form { padding:3rem; margin:0 auto; max-width:1050px; } fieldset { margin-bottom:3rem; } legend { font-size:2rem; font-weight:700; margin-bottom:2rem; } label { display:block; font-weight:600; letter-spacing:.02rem; margin-bottom:.25rem; } input { appearance:none; background:none; } input[type="number"], input[type="text"] { background-color:#20393c; border:1px solid #439775; border-radius:.125rem; color:#fff; display:block; font-family:"Fira Code", arial, sans-serif; font-size:1rem; font-weight:400; margin:0 0 1.25rem; max-width:100%; padding:.65rem 1rem; width:100%; } input[type="button"] { background-color:#20393c; border:1px solid #439775; border-radius:.125rem; color:#fff; cursor:pointer; display:inline-block; font-family:"Fira Code", arial, sans-serif; font-size:1rem; font-weight:600; line-height:normal; padding:.65rem 1rem; text-decoration:none; } input[type="button"]:hover, input[type="button"]:focus { background-color:#439775; } /* Grid Display */ ul { display:grid; grid-co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0