關閉窗口是Web開發中比較基礎的功能之一。在實現此功能時,我們需要用到CSS代碼。下面是一些常用的關閉窗口的CSS代碼:
/* 給關閉按鈕添加樣式 */ .close { position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; cursor: pointer; } /* 普通關閉按鈕樣式 */ .close::before, .close::after { position: absolute; content: ''; width: 2px; height: 15px; background: #fff; } .close::before { transform: rotate(45deg); } .close::after { transform: rotate(-45deg); } /* 鼠標懸浮時的樣式 */ .close:hover::before, .close:hover::after { background: #ccc; }
以上代碼中,我們首先使用了.position屬性設置關閉按鈕的位置,然后使用.width和.height屬性確定按鈕的大小,最后使用.cursor屬性設置鼠標指針的形狀。接著我們使用偽元素::before和::after創建兩條直線,再使用.rotation屬性對這兩條線進行旋轉,使其形成一個叉形。最后在:hover狀態下,我們用.background屬性改變按鈕顏色,增加用戶交互性。