search

Làm thế nào để bạn vẽ một đường thẳng trong css?

Ngày đăng: 31/12/2022
Trả lời: 0
Lượt xem: 78

Trong bài viết này, chúng ta sẽ xem cách thêm Đường kẻ ngang trong HTML. Đối với điều này, có 2 cách tiếp cận

  • By using the
    tag
  • Bằng cách sử dụng Thuộc tính CSS

Chúng tôi sẽ thảo luận tuần tự cả hai cách tiếp cận để thêm đường ngang

Adding the Horizontal Line using

tag: The Horizontal Rule tag (
) is used for the purpose of inserting horizontal lines in the HTML document in order to separate sections of the document. It is an empty or unpaired tag that means there is no need for the closing tag.

cú pháp

Example 1: This example describes the  

tag to add the horizontal line.

HTML




.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
2

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
3
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
4
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
6

_______43____48____45

0______43____421
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
22
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
21
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
25
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
8
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
6

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
3
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
30
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

0______43____434
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
22
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
34
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

0______43____440
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

0______43____444
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
45
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
44
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

_______425____430____45

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
6

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
25
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
4
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

đầu ra

Làm thế nào để bạn vẽ một đường thẳng trong css?

Example 2: This example describes the

tag with various attribute & their values to style the horizontal line.

HTML




.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
2

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
3
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
4
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
6

_______43____48____45

0______43____421
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
66
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
21
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
25
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
8
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
6

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
3
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
30
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

0______43____434
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
39
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
34
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

0______43____440 
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
85
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
86
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
87

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
88
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
89
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
86
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
51

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
88
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
53____486
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
55
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

0______43____440 
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
85
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
86
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
87

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
88
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
89
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
86
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
51

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
88
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
53____486
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
200

_______488____4202____486____4204 

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
205

0______43____440 
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
85
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
86
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
211

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
88
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
202____486
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
215

_______488____489____486

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
219

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
88
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
53____486
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
223
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
224

_______425____430____45

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
6

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
25
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
4
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
5

đầu ra

Làm thế nào để bạn vẽ một đường thẳng trong css?

Thêm đường Ngang bằng Thuộc tính CSS. Trong trường hợp này, chúng ta sẽ sử dụng Thuộc tính kiểu viền để tạo đường kẻ ngang. Chúng ta có thể sử dụng thuộc tính border-top chỉ định kiểu của đường viền trên cùng hoặc thuộc tính border-bottom, có thể đặt kiểu cho đường viền dưới cùng của một phần tử. Cả hai thuộc tính có thể được sử dụng để thêm đường ngang

ví dụ 3. Ví dụ này mô tả cách vẽ đường ngang bằng Thuộc tính kiểu viền

2. Chris Coyier thực hiện tổng quan toàn diện về cách vẽ các đường ngang bằng CSS. Rất khuyến khích

Trong hướng dẫn tiêu chuẩn về viết mã HTML/CSS, bạn sẽ không học cách vẽ một đường ngang. Ít nhất thì tôi đã không làm như vậy khi tôi học tại CodeCademy (mặc dù đó là một khóa học tuyệt vời)

Vì vậy, lần đầu tiên tôi phải vẽ một cái, tôi đã phải vật lộn

Điều quan trọng là nhận thức một đường thẳng như một phần của đường viền hộp. Sử dụng thuộc tính CSS 

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
6

Để biết cách tiếp cận khác, hãy xem bài viết khác trên Phương tiện của tôi về việc sử dụng phần tử 

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
7 với 
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
8 và 
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
9

Hình trên được tạo bằng cách viết mã HTML và CSS như sau. Đầu tiên, mã HTML

Tôi tuân theo quy ước BEM về đặt tên các lớp tại đây

Lớp

0 định nghĩa một đường ngang. Các lớp

1 và

2 thay đổi độ dài của một dòng. Để định vị từng dòng, tôi đính kèm mỗi lớp

0 với lớp

4. Các lớp còn lại được sử dụng để định vị từng dòng theo một cách khác

Và mã CSS

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}

Lưu ý rằng tôi áp dụng quy ước sắp xếp thứ tự bảng chữ cái cho mã hóa CSS. Nó giúp tiết kiệm thời gian viết mã (bạn không cần phải suy nghĩ xem nên sắp xếp các thuộc tính CSS theo thứ tự nào) và giúp dễ dàng kiểm tra xem một thuộc tính nhất định có được xác định hay không và cách thức xác định (hãy tưởng tượng một từ điển sao chép trên giấy không được sắp xếp theo thứ tự bảng chữ cái…đó là một

Dưới đây tôi phá vỡ mã này từng chút một

Vẽ các đường ngang

Đầu tiên, vẽ một đường ngang đơn giản trên toàn bộ màn hình bằng mã HTML

và một mã CSS

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
3

Lớp

4 với

6 và

7 (hoặc bất kỳ giá trị chiều cao nào) đảm bảo rằng dòng xuất hiện ở giữa màn hình, thay vì cạnh trên gần nhất. Vì vậy, chúng tôi có một cái gì đó như thế này

Độ dày của đường được đặt thành

8. Tất nhiên chúng ta có thể làm dày nó lên. Nhưng trong hầu hết các trường hợp, tốt hơn là nên có các đường kẻ càng mỏng càng tốt. Ngay cả với chiều rộng 1px, chúng ta có thể nhìn thấy rõ ràng. Vai trò của các dòng trên một trang web là tăng cường tổ chức thông tin. Bản thân các dòng gần như chắc chắn sẽ không có giá trị thông tin. Vì vậy, chúng tôi không muốn họ nổi bật

Kiểu đường kẻ được đặt thành

9. Tất nhiên chúng ta có thể thay đổi điều này thành 
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
30 hoặc 
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
31. Nhưng kiểu đường như vậy truyền đạt ý nghĩa riêng của nó (chẳng hạn như vô thường) và trừ khi ý nghĩa đó là cần thiết trong thiết kế trang web, chúng ta nên chọn một đường liền nét đơn giản

Đối với màu đường kẻ, tôi tạm thời sử dụng 

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
32. Một trong những mẹo thiết kế đồ họa tiêu chuẩn là tốt nhất nên tránh sử dụng màu đen thuần trên nền trắng thuần vì nó quá chói đối với mắt của chúng ta. Tôi tin rằng mắt người không quen với màu đen thuần khiết vì không có vật chất nào trong thế giới vật chất là hoàn toàn đen. Màu đen tuyền là sự sáng tạo nhân tạo của màn hình máy tính

Sau đó chúng tôi thêm hai dòng nữa

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
2

Nhờ có lớp

4 với các giá trị thuộc tính CSS của nó là

6 và

7, ba dòng này sẽ không được vẽ ở cùng một vị trí, như được hiển thị bên dưới

Mỗi dòng cách nhau 80pxThay đổi độ dài của dòng

Bây giờ chúng tôi muốn làm cho mỗi dòng ngắn hơn, với dòng ở giữa là ngắn nhất. Vì vậy, chúng tôi thêm các lớp sửa đổi

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
6

và đặt độ dài dòng trong các lớp mới này

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
7

để chúng ta có ba dòng xuất hiện như thế này

Định vị từng dòng

Cuối cùng, chúng tôi muốn căn phải hai dòng cuối cùng. Tốt nhất là sử dụng flexbox để định vị từng dòng

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
8

với mã CSS

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
9

Theo mặc định, giá trị của thuộc tính 

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
36 là 
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
37. Nhưng để dễ đọc mã, nên làm cho mã rõ ràng

Bây giờ chúng ta có cái này

Bằng cách nào đó nó bắt đầu trông arty một chút. Tôi nghĩ đó là vì bố cục các đường này nhắc chúng ta về chuyển động ngang của những đám mây phản chiếu trên mặt nước. Thiên nhiên là nguồn cảm hứng quan trọng nhất cho nghệ thuật

Nếu bạn cần đặt một dòng cách xa mép bên của màn hình, hãy sử dụng 

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
38 hoặc 
.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
39 cho div vùng chứa

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
4

và thêm khai báo CSS sau

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
0

Sau đó, dòng cuối cùng được tách ra khỏi cạnh phải bằng 10% chiều rộng của toàn bộ màn hình

Điều tương tự cũng có thể đạt được bằng cách áp dụng thuộc tính 

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
20 cho chính dòng đó

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
1

và thêm khai báo CSS sau

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
2

Nhưng để dễ đọc mã, tất cả các thuộc tính định vị phải được đặt cho div vùng chứa

Thay đổi màu của các dòng

Để thêm một chút thay đổi, tôi đã thay đổi màu của các đường kẻ và nền của chúng

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
3

Bây giờ chúng tôi có hình ảnh ở đầu bài viết này

Tôi đã trực giác chọn màu 

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
21 cho nền có lẽ vì tôi đã quen nhìn thấy các sản phẩm sơn mài màu đỏ từ Nhật Bản lịch sử

Để tạo sự tương phản đẹp mắt nhưng tinh tế với nó, tôi kết xuất các dòng trong 

.lineHorizontal__container {
  align-items: center;
  background-color: firebrick;
  display: flex;
  height: 80px;
}.lineHorizontal__container--leftAligned {
  justify-content: flex-start;
}.lineHorizontal__container--rightAligned {
  justify-content: flex-end;
}.lineHorizontal__container--detachedFromRight {
  padding-right: 10%;  
}.lineHorizontal {
  border-top: 1px solid azure;
}.lineHorizontal--long {
  width: 70%;
}.lineHorizontal--short {
  width: 40%;
}
22. Nó có màu xám xanh. Màu đỏ và màu xanh khi đặt cạnh nhau sẽ làm cho nhau trông rực rỡ hơn (đọc Tầm nhìn và Nghệ thuật. sinh học của việc nhìn, nếu bạn quan tâm đến lý do khoa học cho điều này) Vì vậy, một chút màu xanh trong màu xám làm cho những đường này trông đẹp hơn trên nền màu đỏ

programming css

Bài Viết Liên Quan

Bài tập hóa học lớp 11 trang 193 năm 2024
Bài tập hóa học lớp 11 trang 193 năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Học
Những lúc khó khăn nhất trong cuộc đời là gì năm 2024
Những lúc khó khăn nhất trong cuộc đời là gì năm 2024

là ai Hỏi Đáp Là gì
Cách tối ưu hóa rune trong summoner war năm 2024
Cách tối ưu hóa rune trong summoner war năm 2024

mẹo hay Mẹo Hay Cách
Basid đãu đã biết tình không như thế nào năm 2024
Basid đãu đã biết tình không như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào
Lương cơ bản tiếng trung là gì năm 2024
Lương cơ bản tiếng trung là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng trung
Top 10 trang hieu ung âm thanh free năm 2024
Top 10 trang hieu ung âm thanh free năm 2024

mẹo hay Top List Top
Cách up top bai đăng trên trang facebook năm 2024
Cách up top bai đăng trên trang facebook năm 2024

mẹo hay Mẹo Hay Cách Top List Top Công Nghệ Facebook
Lỗi kết nối bị nhiễm smb cve là gì năm 2024
Lỗi kết nối bị nhiễm smb cve là gì năm 2024

là ai Hỏi Đáp Là gì
Những bài văn thuyết minh về món ăn ngày tết năm 2024
Những bài văn thuyết minh về món ăn ngày tết năm 2024

mẹo hay Món Ngon Món
Thiên môn bỏ lõi trong dược liệu gọi là gì năm 2024
Thiên môn bỏ lõi trong dược liệu gọi là gì năm 2024

là ai Hỏi Đáp Là gì Cây thiên môn
Bài tập vật lý lớp 7 bài 7 năm 2024
Bài tập vật lý lớp 7 bài 7 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Bluestack là gì chơi có quảng cáo không năm 2024
Bluestack là gì chơi có quảng cáo không năm 2024

là ai Hỏi Đáp Là gì BlueStacks BlueStacks 5 Bluestacks la gì BlueStacks 4 BlueStacks chuanroi
Máy tính và tivi cái nào tốn điện hơn năm 2024
Máy tính và tivi cái nào tốn điện hơn năm 2024

mẹo hay Công Nghệ Máy tính Máy
Những câu nói xin lỗi người yêu dễ thương nhất năm 2024
Những câu nói xin lỗi người yêu dễ thương nhất năm 2024

mẹo hay
Toán 8 bài 2 tính chất cơ bản sbt năm 2024
Toán 8 bài 2 tính chất cơ bản sbt năm 2024

mẹo hay
Năng lực là gì tâm lý học năm 2024
Năng lực là gì tâm lý học năm 2024

là ai Hỏi Đáp Là gì Học Tốt Học
Hàng hóa và dịch vụ của chính phủ năm 2024
Hàng hóa và dịch vụ của chính phủ năm 2024

mẹo hay Ngôn ngữ Dịch
Hệ cơ sở dữ liệu tiếng anh là gì năm 2024
Hệ cơ sở dữ liệu tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Database
Kiếp nào có yêu nhau minh phụng lệ thủy năm 2024
Kiếp nào có yêu nhau minh phụng lệ thủy năm 2024

mẹo hay
Bài văn tả một người bạn lon hon của em năm 2024
Bài văn tả một người bạn lon hon của em năm 2024

mẹo hay

Quảng Cáo

Có thể bạn quan tâm

Làm gì khi máy tính bị lỗi win năm 2024
1 ngày trước . bởi SenileMolasses
Cửu trùng thiên là gì so với thượng giới năm 2024
1 ngày trước . bởi DrollOracle
Do dac de xac dinh trong luong hang hóa năm 2024
1 ngày trước . bởi UnperturbedEstimation
Chèn nền chữ draff và văn bản trong wold năm 2024
1 ngày trước . bởi SensibleInnocence
Van quả khế dùng cho máy nén khí là gì năm 2024
1 ngày trước . bởi BestsellingSemiconductor
Giống nhau giuwxax văn hóa đông và tây năm 2024
1 ngày trước . bởi GruffAppendix
Các chuyên đề toán 7 của thầy tạ anh sơn năm 2024
1 ngày trước . bởi JumpyParadox
Kết quả của 1 biểu thức logic là gì năm 2024
1 ngày trước . bởi PromotionalSeduction
Bài văn ăn quả nhớ kẻ trồng cây lớp 7 năm 2024
1 ngày trước . bởi NonalignedDomination
0nằm ngủ nhưng nảo ko ngũ là bệnh gì năm 2024
1 ngày trước . bởi HurtfulRestaurant

Toplist được quan tâm

#1
Top 4 uống nước chanh sả mật ong có tác dụng gì 2023
5 tháng trước
#2
Top 10 bài tập làm văn số 5 lớp 7 de 4 2023
5 tháng trước
#3
Top 3 vừa chơi đã có tài khoản vương giả chap 1 2023
5 tháng trước
#4
Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 2023
5 tháng trước
#5
Top 7 tài liệu quản lý nhà nước và quản lý ngành giáo dục đào tạo 2023
5 tháng trước
#6
Top 7 hãy ra khỏi người đó đi hợp âm 2023
5 tháng trước
#7
Top 6 giáo án thơ về thăm nhà bác 2023
5 tháng trước
#8
Top 8 giáo án ngữ văn 6 cánh diều 2023
5 tháng trước
#9
Top 9 tinh bột tham gia phản ứng nào 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Cong văn 3722 ngay 4 thang 10 nam 2023 năm 2024
1 tuần trước . bởi TionalExtinction
Các sở ban ngành tiếng trung là gì năm 2024
1 ngày trước . bởi LoathsomeOuting
Top những người được yêu thích nhất thế giới năm 2024
1 tuần trước . bởi WorthlessJuncture
Đề thi môn toán lớp 8 học kì 2 năm 2024
2 ngày trước . bởi AgonizedHostility
Trung tâm dịch vụ nông nghiệp 2023 báo bình định năm 2024
1 tuần trước . bởi SeedyPullman
Top 10 leadership qualities that make good leaders năm 2024
1 ngày trước . bởi ParalyzedInstructor
Xe bus 22 đi qua những điểm nào năm 2024
1 tuần trước . bởi HardenedFundraiser
Công văn thu hồi hóa đơn xuất dư năm 2024
3 ngày trước . bởi NarrowRunoff
Theo dõi thai có nguy cơ cao là gì năm 2024
1 tuần trước . bởi EsteemedObscurity
Mổ mắt cận thị ở bệnh viện nào tốt nhất năm 2024
2 ngày trước . bởi NamelessProspectus

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Hàng Hiệu Inc.