qrcode实现微信联系人信息生成二维码效果代码
代码语言:html
所属分类:布局界面
代码描述:qrcode实现微信联系人信息生成二维码效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>二维码生成</title> <style> * { margin: 0; padding: 0; } body { background-color: #262626; } #box { width: 1000px; height: 600px; margin: 200px auto; } #box .qrcode { width: 400px; height: 400px; float: left; margin: 40px 40px; } #box .introduce { width: 500px; height: 600px; float: left; } .introduce p { width: 200px; height: 40px; background: #333; float: left; margin: 10px 20px; color: #fff; border-radius: 5px; overflow: hidden; } .introduce p span { float: left; width: 50px; height: 40px; color: #fff; text-align: center; line-height: 40px; } .introduce p input { width: 150px; height: 40px; float: left; border: 0; color: #fff; background: #000; text-indent: 10px; outline: none; } .introduce .btn { width: 440px; height: 40px; text-align: center; line-height: 40px; background: #6c0; } .qrcode>img { display: block; border: 5px solid white; } </style> </head> <body> <div id="box"> <h3 style="color: aliceblue">请用微信搜生成的二微码,查看效果</h3> <div class="introduce"> <p> <span>姓名:</span> <input type="text" id="name" value="光头强"> </p> <p> <span>公司:</span> <input type="text" id="company" value="李老板伐木有限公司"> </p> <p> <span>职务:</span> <input type="text" id="title" value="伐木员"> </p> <p> <span.........完整代码请登录后点击上方下载按钮下载查看
网友评论0