Sử dụng codepen thiết kế giao diện người dùng cho bàn cờ 5 x 5 bằng html và css.

Xin chào các bạn, dựa trên phương pháp bàn cờ mà tôi đã dạy trong HTML, chúng ta sẽ tạo ra một trò chơi bàn cờ đẹp mắt

Hôm nay tôi thực sự khao khát tạo ra thứ gì đó đẹp đẽ bằng HTML và CSS và sau một thời gian, tôi nhớ đến Tunde và sau đó là Chessinslum. Vì vậy, tôi đã thiết kế một trò chơi ChessBoard chỉ bằng các mã 😍

Nếu bạn thấy nó đẹp, vui lòng retweet cho người khác cùng xem. Đối với học sinh của tôi, mã bên dưới👇🏽👨🏽‍💻 pic. Twitter. com/BTGJxVPaGc

Sử dụng một phần tử bảng

Mỗi ô vuông được biểu diễn bằng một phần tử td. Mỗi phần tử hàng và cột được biểu thị bằng dấu th

Trong ví dụ này tôi cũng đã thêm CSS để tạo kiểu cho bàn cờ

    
        
        
        
    
    
        
            
                
                    
                    a
                    b
                    c
                    d
                    e
                    f
                    g
                    h
                
                
                    8
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    7
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    6
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    5
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    4
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    3
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    2
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    1
                    
                    
                    
                    
                    
                    
                    
                    
                
            
        
    

(THÊM)

Nếu bạn muốn thêm các mảnh

    
        
        
        
    
    
        
            
                
                    
                    a
                    b
                    c
                    d
                    e
                    f
                    g
                    h
                
                
                    8
                    ♜
                    ♞
                    ♝
                    ♛
                    ♚
                    ♝
                    ♞
                    ♜
                
                
                    7
                    ♟
                    ♟
                    ♟
                    ♟
                    ♟
                    ♟
                    ♟
                    ♟
                
                
                    6
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    5
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    4
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    3
                    
                    
                    
                    
                    
                    
                    
                    
                
                
                    2
                    ♙
                    ♙
                    ♙
                    ♙
                    ♙
                    ♙
                    ♙
                    ♙
                
                
                    1
                    ♖
                    ♘
                    ♗
                    ♕
                    ♔
                    ♗
                    ♘
                    ♖
                
            
        
    

Làm cách nào để thiết kế bàn cờ bằng HTML và CSS?

Bước 1. Đặt vị trí của div thành cố định và áp dụng một số chiều cao và chiều rộng

Bước 2. Bây giờ, hãy sử dụng bộ chọn trước và áp dụng thuộc tính linear-gradient lặp lại với màu đen trắng và góc được đặt là 45deg

Bước 3. Bây giờ, hãy sử dụng bộ chọn sau với các thuộc tính giống như được sử dụng trước đó chỉ cần thay đổi góc thành -45 độ

Làm thế nào để tạo một bàn cờ trong HTML?

Phương pháp tiếp cận .

STEP 1 − We start by creating a

element with an id of "chessboard". .. .

STEP 2 − We create a