H5 튜토리얼

H5 모바일 단말기에서 다양한 목록을 만드는 방법 (1)

黄舟

Mar 10, 2017 pm 04:28 PM

H5 모바일 단말기에서 다양한 목록을 만드는 방법(1)

머리말

모바일 인터넷의 발달로 많은 수가 하지만 PC 쪽 프론트엔드 경험이 모바일에 적용되지 않는 경우가 많습니다. 제가 며칠 전에 쓴 블로그 게시물 "모바일 H5의 몇 가지 기본 지식 요점 정리" 그래서 FungLeo는 다음에는 모바일 단말기에 대한 일련의 튜토리얼을 시작하기로 결정했습니다.

이 기사 시리즈의 CSS 부분은 모두 다음 언어로 작성될 것입니다. SASS 구문을 모르는 경우에는 "CSS 사전 컴파일 기술을 사용한 SASS 학습 경험 요약" 튜토리얼을 포함한 관련 튜토리얼을 읽어보는 것이 좋습니다. 이번 시리즈에서는 브라우저 스타일을 재설정하는 데 사용되는 두 가지 기본 문서인 Reset.scss 및 mixin.scss와 일부 기본 SASS 코드 블록을 참조하겠습니다. 코드가 길기 때문에 "모바일 터미널 시리즈 블로그 기본 사항"을 참조하세요. Reset.scss and mixin.scss》obtain.

레벨이 제한되어 있고 실력도 보통 수준이라 글에 오류나 누락이 있을 수 있으니 다들 댓글 남겨주세요. 최대한 빨리 신고하겠습니다. 모두 감사드립니다.

가장 간단한 목록

먼저, 우리가 이루고자 하는 효과는 다음과 같습니다. 아래:

H5 모바일 단말기에서 다양한 목록을 만드는 방법 (1)

위와 같이 우리가 구현하고자 하는 것은 이렇게 간단한 목록입니다.

html 코드

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>list 1</title>
<link rel="stylesheet" href="../style/style.css">
</head>
<body>
<p class="list_1">
    <ul>
        <li><a href="">这是一个列表1</a></li>
        <li><a href="">这是一个列表2</a></li>
        <li><a href="">这是一个列表3</a></li>
        <li><a href="">这是一个列表4</a></li>
        <li><a href="">这是一个列表5</a></li>
        <li><a href="">这是一个列表6</a></li>
        <li><a href="">这是一个列表7</a></li>
        <li><a href="">这是一个列表8</a></li>
    </ul></p></body></html>

여기서 설명해야 할 것은 모바일 단말기에

이 코드를 추가해야 한다는 것입니다. 그렇지 않으면 모바일 브라우저는 이를 확장 가능한 PC 버전의 웹 페이지로 취급합니다<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

SASS 코드로 인해 문자가 깨지는 것을 방지하려면 서버, 데이터베이스, 백엔드 프로그램, 프런트엔드 HTML 및 CSS를 모두 utf-8 인코딩으로 통합하는 것이 좋습니다.

.list_1 {    ul {}
    li {
        border-bottom: 1px solid #ddd;padding:0 1.6rem;        
        a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
    }
}

여기의 모든 단위는

을 사용합니다.
에서는 rem의 글꼴 크기를 reset.scss로 설정했습니다. 이는 일반적인 상황에서는 10px에 해당합니다. 즉, 위의 html은 62.5%과 동일합니다. 왜 이렇게 썼는지에 대해서는 앞서 쓴 글의 설명을 보시려면 이 글의 시작 부분에 있는 링크를 참조하세요. Sass를 모르신다면 어렵다고 생각하지 마시고 먼저 Sass 관련 튜토리얼을 읽어보세요. 확실히 한 시간이면 배울 수 있고 이틀이면 아주 원활하게 플레이할 수 있습니다. >여전히 간단한 목록입니다1.6rem16px우선 렌더링을 살펴보겠습니다.

얼핏 보면 이 목록과 별 차이가 없습니다. 그러나 자세히 살펴보면 아래 라인이 상위 라인이 아니라는 것을 알 수 있습니다.

디자이너들은 디자인할 때 자신만의 디자인 컨셉을 가지고 있는 경우가 많습니다. 이렇게 하면 디자이너의 디자인 중 일부를 충실하게 복원해야 합니다. 다소 불필요하다고 생각하더라도 ㅋㅋㅋ

H5 모바일 단말기에서 다양한 목록을 만드는 방법 (1) html 코드는 처음과 완전히 동일합니다. 예를 들어 여기서 코드는 반복되지 않습니다.

SASS 코드

.list_1 {    ul {padding-left: 1.6rem;}
    li {        border-bottom: 1px solid #ddd;padding-right: 1.6rem;        
    a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
    }
}

사실 약간의 변환일 뿐입니다. 여기서는 데모1에 로드된 li의 패딩 값을 ul에 할당하면 됩니다.

요약

이 두 가지 데모를 통해 FungLeo는 다음 장에서 목록의 복잡성을 점차적으로 증가시킬 것입니다.

이것은 매우 간단합니다. 다음 사항을 설명해야 합니다.

어떤 요소의 너비도 설정하지 마세요. 한 줄을 차지하는 리스트입니다

위 내용은 H5 모바일 단말기에서 다양한 목록을 만드는 방법 (1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

HTML5 및 H5 : 일반적인 사용법 이해Apr 22, 2025 am 12:01 AM

HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.

HTML5 : 현대 웹의 빌딩 블록 (H5)Apr 21, 2025 am 12:05 AM

HTML5는 W3C에 의해 표준화 된 하이퍼 텍스트 마크 업 언어의 최신 버전입니다. HTML5는 새로운 시맨틱 태그, 멀티미디어 지원 및 양식 향상을 도입하여 웹 구조, 사용자 경험 및 SEO 효과를 개선합니다. HTML5는 웹 페이지 구조를 더 명확하게하고 SEO 효과를 더 좋게하기 위해, 등 등과 같은 새로운 시맨틱 태그를 소개합니다. HTML5는 멀티미디어 요소를 지원하며 타사 플러그인이 필요하지 않으므로 사용자 경험을 향상시키고 속도를로드합니다. HTML5는 양식 함수를 향상시키고 사용자 경험을 향상시키고 양식 검증 효율성을 향상시키는 새로운 입력 유형을 도입합니다.

H5 코드 : 깨끗하고 효율적인 html5 작성Apr 20, 2025 am 12:06 AM

깨끗하고 효율적인 HTML5 코드를 작성하는 방법은 무엇입니까? 답은 태그, 구조화 된 코드, 성능 최적화 및 일반적인 실수를 피함으로써 일반적인 실수를 피하는 것입니다. 1. 코드 가독성 및 SEO 효과를 향상시키기 위해 시맨틱 태그 등을 사용하십시오. 2. 적절한 계약과 의견을 사용하여 코드를 구성하고 읽을 수 있도록하십시오. 3. CDN 및 압축 코드를 사용하여 불필요한 태그를 줄임으로써 성능을 최적화합니다. 4. 태그가 닫히지 않은 것과 같은 일반적인 실수를 피하고 코드의 유효성을 확인하십시오.

H5 : 웹에서 사용자 경험을 향상시키는 방법Apr 19, 2025 am 12:08 AM

H5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.

H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AM

HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.

H5 코드 이해 : HTML5의 기본 사항Apr 17, 2025 am 12:08 AM

HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.

H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AM

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

See all articles