app css+html 仿微信我的二维码、个人二维码
生活随笔
收集整理的這篇文章主要介紹了
app css+html 仿微信我的二维码、个人二维码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
相信各位都是一看就懂，廢話不多說，直接上代碼
1.css部分
html,body {height: 100%;width: 100%;background: #f0f0f0;font-size: 14px;}/* 盒子居中 */.qrBox{margin: 0 20px;height: 400px;position: relative;top: 50%; /*偏移*/margin-top: -200px;text-align: center;background: #ffffff;border-radius: 10px;text-align: center;}/* 二維碼部分 */#qrCode{height: 310px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 60px 20px 30px 20px;max-width: 100%;max-height: 100%;}/* 二維碼中間頭像盒子 */.qrCodeFaceBox{height: 40px;width: 40px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 195px auto;border: 1px solid #ccc;border-radius: 5px;background-color: #fff;}/* 二維碼中間頭像 */#qrCodeFace{height: 36px;width: 36px;padding: 2px 2px;border-radius: 5px;object-fit: cover;}/* 掃一掃上面的二維碼圖案，加我 */.addBox{height: 30px;position: absolute;top: 370px;left: 0;right: 0;bottom: 0;margin: auto;max-width: 100%;max-height: 100%;}.addBox>span{height: 30px;line-height: 30px;font-size: 14px;color: gray;}/* 左上角頭像盒子 */.faceBox{height: 60px;display:flex;left: 0;right: 0;bottom: 340px;margin: auto;text-align: left;}/* 左上角頭像 */.faceBox>img{width: 50px;height: 50px;margin: 10px 0 0 10px;border: 1px solid #eee;border-radius: 5px;object-fit: cover;}/* 左上角昵稱 */.nickName{margin: 15px 0 0 10px;font-size: 16px;font-weight: bold;color: rgb(56, 54, 54);}/* 左上角地區或者個性簽名 */.signature{margin: 3px 0 0 10px;color: gray;}2.html部分
<body><div class="qrBox"><img id="qrCode" src="https://qr.api.cli.im/newqr/create?data=%25E4%25BA%258C%25E7%25BB%25B4%25E7%25A0%2581&level=H&transparent=false&bgcolor=%23FFFFFF&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&logoshape=no&size=260&kid=cliim&key=54cdc2ff67f2a8e729d72d16819e1c65"><div class="addBox"><span id="qrTip">掃一掃上面的二維碼圖案，加我</span></div><div class="faceBox"><img id="facePath" src="https://img1.baidu.com/it/u=1270763777,2324489681&fm=26&fmt=auto&gp=0.jpg"><div><div class="nickName">愛國者</div><div class="signature">北京</div></div></div><div class="qrCodeFaceBox"><img id="qrCodeFace" src="https://img1.baidu.com/it/u=1270763777,2324489681&fm=26&fmt=auto&gp=0.jpg"></div></div> </body>3.效果截圖如下：
總結
以上是生活随笔為你收集整理的app css+html 仿微信我的二维码、个人二维码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2023年北京科技大学MTI英语翻译硕士
- 下一篇： Windows下Idea，Android