jquery正文文字字体大小调整效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery正文文字字体大小调整效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; text-decoration:none;} body { background:#e7e7e7;margin:100px;} #wrapper { width:400px; margin: 0 auto; padding:40px; background:#fff; box-shadow:0 0 50px 0 rgba(0,0,0,.25);} #controls { float:right; padding:2px; width:30px; background:#333; position:fixed; margin:0 0 0 440px; text-align:center; transition:.25s ease-out;} #controls a { font-size:24px; color:#aaa; display:block; font-weight:bold; padding: 5px;} #controls a:hover { color:#fff; background:#000; transition:.25s ease-out;} a.selected { background:#000; color:#fff !important;} #small { font-size:10px !important;} #medium { font-size:14px !important;} #large { font-size:18px !important;} .small { font-size:75%;} h1 { font-size:36px; font-weight:bold;} h2 { font-size:24px; margin: 10px 0;} p { font-size:14px; line-height:20px;} </style> </head> <body> <div id="wrapper"> <div id="controls"> <a href="#" id="small">A</a> <a href="#" id="medium" class="selected">A</a> <a href="#" id="large">A</a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0