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

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

me-rakib / cssbattle

Sao 0

Giải pháp CSSBattle

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

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

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

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 .

Chủ Đề