jquery+css实现右下角悬浮留言表单伸缩效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css实现右下角悬浮留言表单伸缩效果代码
代码标签: jquery css 右下角 悬浮 留言 表单 伸缩
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{margin:0;padding:0;} .feedback { width: 340px; position: fixed; right: 30px; bottom: -9999px; box-shadow: 0 20px 40px 8px rgba(0, 0, 0, 0.25); font-size: 14px; border-radius: 10px 10px 0 0; } .feedback .feedbackHeader { height: 40px; line-height: 40px; border-radius: 10px 10px 0 0; color: #ffffff; text-indent: 50px; font-weight: normal; cursor: pointer; } .feedback .eMailIco { background: url("//repo.bfw.wiki/bfwrepo/image/60d58f19299ab.png") 16px center no-repeat #252c33; background-size: 21px auto; } .feedbackForm { padding: 16px 16px 40px 16px; } .feedbackForm .tips { color: #222d38; padding-bottom: 20px; } .feedbackForm .line { margin-bottom: 16px; } .feedbackForm .line input, .feedbackForm .line textarea { width: 100%; box-sizing: border-box; box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: 4px; border: solid 1px #ccc; color: #222d38; display: block; } .feedbackForm textarea { resize: none; height: 78px; padding: 11px; line-height: 20px; } .feedbackForm .line input { height: 40px; line-height: 40px; padding: 0 11px; } .feedbackForm .btn { background: #18c139; border-radius: 4px; width: 100%; box-sizing: border-box; border: none; height: 40px; line-height: 40px; color: #ffffff; cursor: pointer; } .feedback .closeBtn { background: url("//repo.bfw.wiki/bfwrepo/icon/646732c193d67.png") no-repeat; width: 28px; height: 28px; background-size: 28px 28px; position: absolute; left: -36px; top: 6px; cursor: pointer; display: none; }/ </style> </head> <body>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0