在網站中,為了方便用戶分享內容,通常都會設置右上角的分享按鈕。這里介紹一種使用html實現右上角分享功能的方法。
<!-- 引入fontawesome圖標字體 --><link rel="stylesheet" integrity="sha512-3r1yVOvUvkuzlrUQ2T2Mcp9zesTvykRIDkBbPBmx/jwTpHu7GpDbOgIa8zocglL/kvykr9N9+JOoZJNMbgpkWw==" crossorigin="anonymous" /> <!-- css樣式 --><style> .share-btn { position: fixed; right: 0; top: 0; z-index: 9999; margin: 10px; line-height: 40px; font-size: 20px; } .share-btn:hover { cursor: pointer; transform: scale(1.2); } .fa-share-alt { color: #fff; } .fa-facebook-square { color: #4267B2; } .fa-twitter-square { color: #1DA1F2; } .fa-weibo { color: #E6162D; } </style> <!-- html代碼 --><div class="share-btn"> <i class="fas fa-share-alt"></i> <a target="_blank" title="分享到Facebook"><i class="fab fa-facebook-square"></i></a> <a target="_blank" title="分享到Twitter"><i class="fab fa-twitter-square"></i></a> <a target="_blank" title="分享到微博"><i class="fab fa-weibo"></i></a> </div>
以上代碼實現了一個固定在頁面右上角的分享按鈕,鼠標移至按鈕上時會有放大效果,在點擊不同的圖標后會彈出對應社交媒體的分享窗口。可以將href參數中的鏈接地址替換為自己的網頁鏈接,以適應不同網站的需求。
上一篇docker六大優勢
下一篇mysql具備數據備份