다음은 다양한 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>
출력:
이제 수업 순위에 따라 학생들을 순서대로 배치하는 경우를 살펴보겠습니다. 이는
이 경우에도 예시를 보시고 위와 같이 저장을 해주시면 됩니다.
코드:
<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
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:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
