Bài 1 - Series 50 Bài Html, Css, Javascript đơn Giản - Deft Blog

HomeCssBài 1 – Series 50 bài Html, Css, Javascript đơn giản Tags:#series50lession CSS html javascript js

Mục lục

• 1 Html
• 2 Javascript
• 3 Css

Xin chào các bạn, ngày hôm nay mình sẽ bắt đầu một series về những bài tập Html, css, javascript đơn giản. Hi vọng các bạn sẽ thích series này của mình. 😀 Bài đầu tiên thì mình sẽ hướng dẫn các bạn code một bảng màu khi hover như hình minh họa dưới đây Trông thú vị phải không các bạn. Vậy làm thế nào để code được một bảng hover đầy màu sắc như này. Rất đơn giản và chỉ cần 3 file html, css, javascript rất ngắn gọn thôi.

Html

Đầu tiên thì ta cần phải tạo file index.html Chỉ cần 1 thẻ và có class với id là container, và việc còn lại là của file css và file js.

Javascript

Tạo một file script.js như đã khai báo trong file html. Và trong file script.js sẽ có đoạn code như dưới đây: Tạo một const để lấy DOM container ở html. Từ thẻ DOM này ta sẽ for để thêm từng thẻ là từng ô vuông. Add thêm sự kiện hover vào thì sẽ setColor thẻ đấy và khi hover ra thì sẽ removeColor thẻ

Css

Tạo file style.css: File css sẽ style cho container bên ngoài và từng ô vuông nhỏ có class là “square” Và thế là xong một project nho nhỏ để make color với bạn bè rồi phải không nào =)) Mình khuyến khích các bạn tự gõ lại để biết được từng dòng sẽ có chức năng gì. Hoặc có thể download source code tại đây. Chúc các bạn ngày làm việc hiệu quả và đừng quên tham gia nhóm để trao đổi học hỏi thêm nhiều điều mới mẻ nhé! Prev Article Next Article 4 1 vote Article Rating Subscribe Login Notify of new follow-up comments new replies to my comments Label {} [+] Name* Email* Label {} [+] Name* Email* 0 Comments Inline Feedbacks View all comments Load More Comments

Bài viết liên quan

• Bài 4 – Series 50 bài Html, Css, Javascript đơn giản

• Bài 3 – Series 50 bài Html, Css, Javascript đơn giản

• Bài 2 – Series 50 bài Html, Css, Javascript đơn giản

• Bài 1 – Series 50 bài Html, Css, Javascript đơn giản

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Read More

In case of sale of your personal information, you may opt out by using the link Do Not Sell My Personal Information

Accept Decline Cookie Settings I consent to the use of following cookies: Necessary Marketing Analytics Preferences Unclassified Cookie Declaration About Cookies Necessary (0) Marketing (0) Analytics (0) Preferences (0) Unclassified (0) Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies. We do not use cookies of this type. Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers. We do not use cookies of this type. Analytics cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously. We do not use cookies of this type. Preference cookies enable a website to remember information that changes the way the website behaves or looks, like your preferred language or the region that you are in. We do not use cookies of this type. Unclassified cookies are cookies that we are in the process of classifying, together with the providers of individual cookies. We do not use cookies of this type. Cookies are small text files that can be used by websites to make a user's experience more efficient. The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages. Cookie Settings

Do you really wish to opt-out? Close

Cancel Confirm wpDiscuz00Would love your thoughts, please comment.x()x| ReplyInsert