Trận chiến CSS #6

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

Nội dung chính Show

• Vấn đề
• Giải pháp
• Giải pháp thay thế
• kết thúc
• me-rakib / cssbattle
• Mirzohid22 / cssbattle. nhà phát triển
• thaian161 / CSS-chiến
• Voltrifrodec / CSSBattle
• AndyKhông tìm thấy / CSSBattleDev
• amappola7 / thực hành mã hóa
• hankolsen / trận chiến css
• Trận chiến CSS là gì?
• Làm cách nào để tổ chức trận chiến CSS?
• Làm thế nào để học viết mã CSS?

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ả

 class="box">
  

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

• Mã số
• Vấn đề
• Yêu cầu kéo

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

• Mã số
• Vấn đề
• Yêu cầu kéo

giải pháp cssbattle

css-battle giải pháp css-battle

• Cập nhật20/04/2022
• HTML

thaian161 / CSS-chiến

Sao 0

• Mã số
• Vấn đề
• Yêu cầu kéo

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

• Cập nhật17/11/2022

Voltrifrodec / CSSBattle

Sao 0

• Mã số
• Vấn đề
• Yêu cầu kéo

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

• Mã số
• Vấn đề
• Yêu cầu kéo

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

• Cập nhật17/06/2022
• HTML

amappola7 / thực hành mã hóa

Sao 0

• Mã số
• Vấn đề
• Yêu cầu kéo

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

• Mã số
• Vấn đề
• Yêu cầu kéo

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ì?

Làm cách nào để tổ chức trận chiến CSS?

Làm thế nào để học viết mã CSS?