HTML 목록 스타일
- PHPz원래의
- 2024-09-04 16:16:13579검색
- 목록은 형식화된 방식으로 데이터를 배치하기 위한 일반적인 요구 사항입니다. 예를 들어 호텔의 피자 메뉴 콘텐츠를 표시해야 하는 웹페이지를 만든 경우 HTML 목록 스타일이 될 가능성이 높습니다. 명확하고 분리된 방식으로 나타납니다.
- 다른 경우로는 학급의 최고 성과자 사이에 나타난 일련의 학생들이 있는 경우가 있습니다. 이러한 맥락에서 요구 사항은 순위가 오름차순으로 1위 학생을 맨 위에 배치하고 다른 학생을 그 아래에 배치하는 것입니다. 이를 위해 이를 정렬된 목록으로 형식화해야 합니다.
- 또 다른 유형은 Javascript와 Html을 함께 사용하여 만들 수 있는 사용자 정의 목록으로, 개체의 역학도 설정할 수 있으며 목록에 사용자 정의된 전망을 적용할 수 있습니다.
HTML의 다양한 목록 스타일
다음은 다양한 HTML 목록 스타일에 대한 설명입니다.
1) 순서가 지정되지 않은 목록
여기서 콘텐츠 표시 순서는 신경 쓸 필요가 없습니다. HTML 페이지에서 사용자 앞에 형식이 잘 맞고 명확한 방식으로 배치되도록 항목을 잘 배치하면 됩니다.
HTML 언어에는 이러한 목록을 처리하는 태그가 두 개 있으며, 이 태그만 사용하여 탐색 바와 세로 사이드바를 만들 수 있습니다.
- : 순서가 지정되지 않은 목록을 나타냅니다. 순위를 매길 필요가 없거나 무작위 순서로 배치할 필요가 없을 때마다 이 태그가 통합됩니다.
- : 이는 목록 항목, 즉 순서가 지정되지 않은 목록, 즉
- 아래에 배치될 항목 세트를 나타냅니다. 태그는
- 꼬리표. 이러한 마크업으로 표시된 항목은 시작 부분에 자동으로 글머리 기호나 원이 표시됩니다. 이것이 기본 HTML 기능입니다.
이제
- 에 대한 코드를 살펴보겠습니다. 그리고
- 순서가 지정되지 않은 목록을 기반으로 하며 HTML 페이지가 어떻게 보이는지; 해당 파일을 실행한 후에는 메모장과 같은 편집기에서 작성하고 ".html" 확장자로 파일을 저장할 수 있습니다. 따라서 어떤 브라우저에서든 열 수 있습니다.
예제 조각 –
코드:
<html> <head> HTML Lists </head> <body> <h2> list of pizzas <h2> <ul> <li style="color:red"> farmhouse </li> <li style="color:green"> peppy paneer </li> <li style="color:blue"> onion pizza </li> </ul> </body> </html>
출력:
2) 순서가 지정된 목록
이제 수업 순위에 따라 학생들을 순서대로 배치하는 경우를 살펴보겠습니다. 이는
- HTML의 태그이며 여러 개의
- 태그에는 목록 항목이 포함됩니다.
- : 이 태그는 순서가 지정된 목록을 설정하는 데 사용되며 모든 요소는 그 안에 있는
- 태그.
- 태그에 대해서는 위에서 설명했습니다.
이 경우에도 예시를 보시고 위와 같이 저장을 해주시면 됩니다.
코드:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <ol> <li style="color:red"> John </li> <li style="color:green"> Harris </li> <li style="color:blue"> Plunket </li> </ol> </body> </html>
출력/HTML 페이지
이제 HTML 페이지에 CSS 속성을 추가하여 목록을 사용자 정의하거나 형식을 잘 지정할 수 있는 몇 가지 변형을 살펴보겠습니다. 이렇게 하면 페이지 모양이 더 좋아집니다.
- 순서가 지정되지 않은 목록에는 다음과 같은 속성을 부여할 수 있습니다.
- 목록 스타일 유형 – 디스크, 원형, 정사각형 또는 없음이 될 수 있습니다. 따라서 여기서 없음을 선택하면 순서가 지정되지 않은 목록 항목에 표시된 원이 표시되지 않습니다.
예 –
코드:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <ul style="list-style-type:none"> <li style="color:red"> John </li> <li style="color:green"> Harris </li> <li style="color:blue"> Plunket </li> </ul> </body> </html>
출력/HTML 페이지 –
그래서 원형 글머리 기호는 더 이상 존재하지 않습니다. 위에 제공된 옵션을 사용하여 맞춤설정할 수 있습니다.
마찬가지로 주문 목록 값을 숫자, 로마자, 알파벳으로 표시할지 여부를 선택하는 조항이 있습니다.
- 에서 속성 유형을 설정할 수 있습니다. 동일한 태그를 사용하며 유형은 다음 값을 사용할 수 있습니다.
유형: “1”,” A”,” a”, “I”,” i.”
동일한 예제 코드를 살펴보겠습니다 –
코드:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <ol type = "i"> <li style="color:red"> John </li> <li style="color:green"> Harris </li> <li style="color:blue"> Plunket </li> </ol> </body> </html>
출력/HTML 페이지 –
마찬가지로 설명을 추가해야 하는 항목을 정의할 수 있는 설명 목록도 있습니다. 일부 키워드에 대한 몇 가지 정의를 배치해야 하는 페이지를 만들고 있다고 가정하면 설명 목록을 선택할 수 있습니다.
태그
동일한 작업을 처리하기 위해 다음과 같은 태그가 있습니다.
– 이 태그는 설명 용어를 제공합니다
– this tag carries the description of each term
Example –
Code:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <dl> <dt style="color:red"> Docker </dt> <dd> -: this is used to make environment portable application containers </dd> <br> <dt style="color:green"> Kubernetes </dt> <dd> -: this is an orchestrator for those containers make by docker </dd> </dl> </body> </html>
Output/HTML page –
You can also define the start property in the ordered lists in
- tag, which tells from where the count starts. Let’s see an example of the same –
Code:
<html> <head> HTML Lists </head> <body> <h2> list of students <h2> <ol type = "1" start="10"> <li style="color:red"> John </li> <li style="color:green"> Harris </li> <li style="color:blue"> Plunket </li> </> </body> </html>
Output:
Conclusion
So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.
위 내용은 HTML 목록 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
- 태그에는 목록 항목이 포함됩니다.