在我們的網頁中,有時我們需要讓頁面中的一個按鈕或鏈接來實現返回上一頁的功能。這就需要使用到CSS的一些技巧了。
首先,我們需要使用一個a標簽來定義我們的按鈕或鏈接,如下所示:
<a href="#" class="back-btn">返回上一頁</a>在這里,我們定義了一個class為back-btn的a標簽,用于實現返回上一頁的功能。接下來,我們需要使用CSS來定義這個按鈕或鏈接的樣式,如下所示:
.back-btn { display: inline-block; padding: 8px 16px; background-color: #f44336; color: #ffffff; text-decoration: none; border-radius: 5px; font-weight: bold; } .back-btn:hover { background-color: #d32f2f; }在這里,我們分別定義了按鈕或鏈接的基本樣式和鼠標懸浮時的樣式。可以看到,我們使用了padding來定義按鈕或鏈接的大小,使用background-color來定義背景色,使用color來定義文字顏色,使用text-decoration來去除下劃線,使用border-radius來定義圓角邊框,使用font-weight來定義字體粗細。 最后,我們需要使用JavaScript代碼來實現返回上一頁的功能,如下所示:
<script> document.querySelector('.back-btn').addEventListener('click', function() { window.history.back(); }); </script>在這里,我們通過querySelector方法獲取了back-btn的a標簽,并為它添加了一個點擊事件,在點擊時調用window.history.back()方法返回上一頁。 綜上,這就是使用CSS實現返回上一頁的功能的完整代碼。
上一篇圣誕節css動畫
下一篇圓角css 按鈕樣式