在網頁中,為了方便用戶使用,我們通常會添加一些二維碼,如微信公眾號二維碼、支付寶二維碼等,以便用戶通過掃描快速訪問相關內容。但是,這些二維碼常常會影響網頁的美觀性,為此,我們可以使用CSS將其隱藏在頁面的右側。
.qrcode { position: fixed; top: 50%; right: -150px; transform: translateY(-50%); width: 150px; height: 150px; background-color: #fff; padding: 10px; box-shadow: 0 0 5px #999; z-index: 9999; } .qrcode::before { content: "掃描二維碼\n訪問內容"; display: block; text-align: center; font-size: 14px; margin-bottom: 10px; } .qrcode img { width: 100%; height: 100%; display: block; }
上面的代碼使用了CSS中的position、top、right、transform、width、height等屬性,通過設置right為負值來隱藏二維碼,同時使用transform屬性實現了居中顯示在頁面中央。此外,我們還可以添加 ::before 偽元素,為二維碼添加一些提示信息,讓用戶更加方便地使用。
上一篇mysql數據字段唯一空
下一篇css怎么合拼表格