Trong bài viết này, tôi sẽ giải quyết Thử thách CSS vuông đơn giản trong Trận chiến CSS. Hãy nhìn vào vấn đề đầu tiên
Vấn đề
Chúng ta cần tạo vùng chứa sau chỉ bằng cách sử dụng Thuộc tính CSS
Giải pháp
Vì vậy, bây giờ hãy xem Giải pháp và cách chúng ta sẽ đạt được điều này
HTML
Đầu tiên, hãy tạo một HTML cho việc này, tôi đã sử dụng hai vùng chứa để làm điều đó. bạn cũng có thể sử dụng các lớp giả
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
CSS
Bây giờ hãy tạo kiểu cho các thùng chứa
.box {
width: 400px;
height: 300px;
background: #5d3a3a;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau khi áp dụng CSS cho .box
nó sẽ như thế này
Bây giờ chúng ta tạo kiểu cho con div
của .box
.box div {
background: #b5e0ba;
width: 200px;
height: 200px;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau khi áp dụng CSS, đây là kết quả
Bây giờ vấn đề được giải quyết đơn giản bằng các kiểu trên
mã hóa
Giải pháp thay thế
Đây là một cách nữa bạn có thể làm điều này mặc dù có nhiều cách, tôi thích cách sau
HTML
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
CSS
body{
background: #5d3a3a;
margin:0;
}
div {
width: 200px;
height: 200px;
background: #b5e0ba;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
kết thúc
Nếu bạn thích điều này thì đừng quên ❤️ nó. Và tôi sẽ gặp bạn trong bài viết tiếp theo. hẹn sớm gặp lại
Kho lưu trữ này chứa các giải pháp, mã thực hành và tất cả những thứ liên quan đến HTML, CSS mà tôi làm việc trên đó
css html5 css3 html-css css-battle-solutions
- Cập nhậtNgày 15 tháng 5 năm 2022
- HTML
me-rakib / cssbattle
Sao 0
Giải pháp CSSBattle
css-battle giải pháp css-battle
- Cập nhật ngày 8 tháng 6 năm 2022
- HTML
Mirzohid22 / cssbattle. nhà phát triển
Sao 0
giải pháp cssbattle
css-battle giải pháp css-battle
thaian161 / CSS-chiến
Sao 0
Tạo nội dung chỉ bằng HTML và CSS - https. // cssbattle. nhà phát triển/
css-battle giải pháp css-battle
Voltrifrodec / CSSBattle
Sao 0
Kho lưu trữ cho nhiệm vụ đã giải quyết trên https. // cssbattle. nhà phát triển
css-battle lập trình cạnh tranh css-battle-solutions
- Cập nhật ngày 10 tháng 1 năm 2023
- HTML
AndyKhông tìm thấy / CSSBattleDev
Sao 0
Thử thách CSS của www. cssbattle. dev dành cho nhà phát triển giao diện người dùng để trau dồi kỹ năng bố cục của họ
css html thử thách css-battle-solutions
amappola7 / thực hành mã hóa
Sao 0
Kho lưu trữ này lưu trữ tất cả các bài tập mà tôi đã thực hiện để thực hành và cải thiện kỹ năng mã hóa của mình
javascript css leetcode-solutions hackerrank-solutions codewars-solutions css-battle-solutions
- Cập nhật ngày 10 tháng 1 năm 2023
- JavaScript
hankolsen / trận chiến css
Sao 0
Giải pháp của tôi cho một vài Trận chiến Css. Mục tiêu không phải là viết css khó đọc, mà là sử dụng càng ít phần tử html càng tốt
Trận chiến CSS là gì?
CSSBattle là trò chơi Chơi gôn bằng mã CSS trực tuyến . Tại đây, người chơi từ khắp nơi trên thế giới cố gắng sao chép trực quan "Mục tiêu" bằng mã CSS nhỏ nhất có thể và chiến đấu với nó để đứng đầu bảng xếp hạng.
Làm cách nào để tổ chức trận chiến CSS?
Với Trận đấu tùy chỉnh, bạn có thể tổ chức Trận đấu CSS của riêng mình cho khán giả của mình. Tải lên các mục tiêu của riêng bạn, đặt thời lượng của riêng bạn và nhận bảng xếp hạng của riêng bạn. Để bắt đầu, hãy tìm phần mới này trên trang chủ. Để tổ chức một trận chiến tùy chỉnh, chỉ cần nhấp vào nút Tổ chức trận chiến và làm theo hướng dẫn .
Làm thế nào để học viết mã CSS?
Trong CSS, trước tiên hãy đọc lý thuyết về CSS là gì, cách CSS hoạt động trong trình duyệt, cú pháp cơ bản và cách sử dụng CSS. Tìm hiểu về các loại biểu định kiểu khác nhau có sẵn, sự khác biệt, bộ chọn và kiểu dáng cơ bản của chúng, chẳng hạn như cỡ chữ, chiều rộng, chiều cao, v.v. Bạn có thể bắt đầu bằng cách xem qua các hướng dẫn tại MDN .