在網頁設計中,有時需要添加返回箭頭,讓用戶可以方便地返回到上一頁或上一級菜單,這個功能可以通過css來實現。
.back { width: 20px; height: 20px; border: solid black; border-width: 0 3px 3px 0; transform: rotate(135deg); -webkit-transform: rotate(135deg); }
上面的代碼使用了css的transform屬性來旋轉一個正方形,形成了一個左上角朝右下方的箭頭。代碼中的.back是一個自定義的class名稱,可以根據需要更改。
在html中,我們可以使用一個標簽來包含返回箭頭,并為其添加點擊事件,在點擊時執行javascript代碼返回上一頁。
<a href="javascript:history.back()"><div class="back"></div></a>
上面的代碼中,我們在<a>標簽的href屬性中添加了javascript:history.back()代碼,這將讓點擊鏈接時返回上一級頁面。
將上面兩段代碼結合起來,我們就可以在網頁中添加一個返回箭頭了。
<a href="javascript:history.back()"><div class="back"></div></a> .back { width: 20px; height: 20px; border: solid black; border-width: 0 3px 3px 0; transform: rotate(135deg); -webkit-transform: rotate(135deg); }