Biểu tượng I
Bài học 13 trên 23 trong khóa học Dự án slider giao diện người dùng của Coddy.
Thử thách
DễChọn bộ chọn .wrapper i (các biểu tượng):
1. Đặt position thành absolute.
2. Đặt top thành 50%.
3. Đặt height và width thành 50 pixel.
4. Đặt màu nền theo ý bạn.
5. Đặt bán kính đường viền thành 50%.
6. Đặt bóng hộp theo ý bạn.
7. Đặt transform thành translateY(-50%)
8. Đặt cursor thành pointer
9. Đặt cỡ chữ theo ý bạn (giá trị này sẽ thay đổi kích thước của biểu tượng).
10. Căn giữa văn bản theo chiều ngang.
11. Đặt line-height thành 50px (căn giữa theo chiều dọc).
12. Đặt hiệu ứng chuyển tiếp thành transform 0.1s linear
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Viết code HTML ở đây -->
<script src="script.js"></script>
</body>
</html>Tất cả bài học trong Dự án slider giao diện người dùng
Tự luyện tập: Playground Web