Thanh tiến trình bước hoạt hình CSS
Bạn đã bao giờ muốn tạo thanh tiến trình các bước hoàn toàn tùy chỉnh chưa? Show
Kể từ khi tôi bắt đầu viết mã, tôi luôn là người thích xây dựng công cụ của riêng mình, đặc biệt khi nó liên quan đến thứ gì đó thú vị, chẳng hạn như thanh tiến trình các bước này. Đây chỉ là phiên bản đơn giản nhất của nó. Sau khi bạn tìm hiểu cách xây dựng khung, bạn có thể thêm biểu mẫu vào khung hoặc một số bước khác mà người dùng tiềm năng cần tương tác với Một vài điều cần xem xét, trước khi chúng ta bắt đầu viết mã
Được rồi, bây giờ không còn cách nào khác, chúng ta có thể vào phần thú vị. Chúng ta hãy viết một số mã, phải không?👨🏻💻 1. Thêm thiết lập ban đầu Đối với thiết lập ban đầu, tôi chỉ thêm một số HTML và CSS cơ bản, phần này sẽ thêm hầu hết nội dung, biến và một số thiết lập lại Trong phần đặt lại CSS, tôi cũng đã thêm dòng này vào font-size: 1.6rem;6font-size: 62.5%; // 100% / 16px = 62.5%Vì tôi đang sử dụng font-size: 1.6rem;7 cho kích thước phông chữ của mình và những thứ khác, nên việc chuyển đổi font-size: 1.6rem;7 thành font-size: 1.6rem;9 trở nên khá khó khăn. Vì vậy, đây là một thủ thuật giúp tính toán font-size: 1.6rem;0 dễ dàng hơn. Ví dụ: với thiết lập này, font-size: 1.6rem;1 bằng với font-size: 1.6rem;2 và font-size: 1.6rem;0 bằng với font-size: 1.6rem;1 Tuy nhiên, chúng tôi vẫn cần đưa kích thước phông chữ mặc định trở lại font-size: 1.6rem;1 vì lý do trợ năng, vì vậy tôi cũng thêm dòng này vào font-size: 1.6rem;3font-size: 1.6rem;Và trong trường hợp nếu bạn không quen với SCSS, thì đây là cách bạn khởi tạo các biến trong SCSS font-size: 1.6rem;4$color-primary: #2f2e41;Bạn có thể đặt bất kỳ tên nào bạn muốn, đây chỉ là một quy ước mà tôi sử dụng để sắp xếp màu sắc của mình hoặc bất kỳ biến nào khác 2. Thêm CSSTrong giai đoạn này, tôi đã thêm một số CSS mà không có bất kỳ truy vấn phương tiện nào, nhưng đừng lo, chúng tôi sẽ quay lại với chúng sau Hãy đi qua các lớp học một chút
Nếu bạn muốn thêm nhiều bước hơn hay còn gọi là vòng kết nối, hãy đảm bảo thay đổi $color-primary: #2f2e41;5 của $color-primary: #2f2e41;6 và font-size: 1.6rem;9, khi ở chế độ xem trên thiết bị di động. Và, tương ứng, thay đổi $color-primary: #2f2e41;8 khi trên máy tính bảng hoặc máy tính để bàn chiều rộng cổng xem2. 1 Thêm CSS khác. Truy vấn phương tiện truyền thôngKhông có gì quá điên rồ, tôi chỉ thêm $color-primary: #2f2e41;9 cho hai thanh. $color-primary: #2f2e41;6 và font-size: 1.6rem;9, chúng chuyển từ dọc sang ngang, khi chiều rộng khung nhìn là font-size: 1.6rem;62 và hơn thế nữaNếu bạn muốn thay đổi chiều rộng khung nhìn từ font-size: 1.6rem;62, vui lòng làm như vậy, đó chỉ là một con số mà tôi thường sử dụng cho chiều rộng khung nhìn của máy tính bảng3. Thêm JavaScriptBây giờ hãy chia nhỏ, phần JavaScript
4. Kết quả cuối cùng Kết quả cuối cùng của bạn sẽ giống như thế này Ngoài ra, đây là một liên kết với tất cả các giai đoạn khác nhau của dự án Bạn có thể tùy chỉnh nó để phù hợp với thiết kế của mình, bạn cũng có thể thêm nhiều chức năng hơn cho nó, chẳng hạn như thêm biểu mẫu, hình ảnh, hoạt ảnh khác, v.v. Và nếu bạn làm như vậy, xin vui lòng chia sẻ nó với tôi và mọi người khác, trong phần bình luận Đây là bài viết hướng dẫn đầu tiên của tôi, tôi hy vọng nó hữu ích và bạn đã học được điều gì đó từ nó. Nếu bạn có bất kỳ câu hỏi nào hoặc bạn tìm thấy lỗi, vui lòng để lại nhận xét, để tôi có thể giúp bạn hoặc sửa lỗi để cải thiện hơn nữa trải nghiệm của người khác. Cảm ơn trước Đọc thêmLàm thế nào để thành thạo phát triển web trong 30 ngàyFrontend Mentor là gì và nó đã giúp tôi rèn luyện các kỹ năng của mình như thế nào và thoát khỏi địa ngục của hướng dẫn?jav. tiếng Anh đơn giản. io Vật. đối tượng đóng băng () VS. con dấu () bằng tiếng Anh đơn giảnSự khác biệt chính giữa hai phương pháp, chỉ cần đặt cạnh nhaujav. tiếng Anh đơn giản. io Làm thế nào để thành thạo giải quyết vấn đề với tư cách là một lập trình viên14 tài nguyên để thực hành giải quyết vấn đề và cách tôi thành thạo các kỹ năng của mìnhjav. tiếng Anh đơn giản. io Kết nối nàoTheo dõi tôi trên Twitter ﹫kens_visuals👨🏻💻👾Twitter. com kens-visuals - Tổng quanLập trình viên Front-End. Người say mê JS. Nhà văn công nghệ. kens-visuals có sẵn 63 kho lưu trữ. Thực hiện theo mã của họ trên…github. com Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Tham gia cộng đồng của chúng tôi |
