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으로 문의하세요.

관련 기사

HTML 오디오 및 비디오 이해 : 속성 및 접근성May 16, 2025 am 12:05 AM

html5audioandvideoElementsEnhanceFunctionAccessificeSpecificAttributes.1) 'Attrols'AttributeadDSSTandardPlayBackControls, white'Aria-label'improvesscreenReaderAccessibility

마스터 링 마이크로타 : HTML5를위한 단계별 안내서May 14, 2025 am 12:07 AM

microdatainhtml5enhancesseoanduserexperiencebyprovidingstructureddatatosearchengines.1) useitemscope, itemtype, anditempropattriptomArkContentlikeProductSorevents.2) testMicrodataWithTools likeSgoogle'sStructureddatestStingStingStingStingSugingjson-ld

HTML5 양식의 새로운 기능은 무엇입니까? 새로운 입력 유형 탐색May 13, 2025 pm 03:45 PM

html5introducesnewinpestenhanceuserexperience, simplifydevelopment 및 improveAcessibility.1) 자동 ValidatesEmailformat.2) andsimplifydateandtimeinputs, retgenedforcustomsolutions.

H5 이해 : 의미와 중요성May 11, 2025 am 12:19 AM

H5는 HTML의 다섯 번째 버전 인 HTML5입니다. HTML5는 웹 페이지의 표현력과 상호 작용성을 향상시키고 시맨틱 태그, 멀티미디어 지원, 오프라인 스토리지 및 캔버스 드로잉과 같은 새로운 기능을 소개하며 웹 기술 개발을 촉진합니다.

H5 : 접근성 및 웹 표준 준수May 10, 2025 am 12:21 AM

웹 사이트에는 접근성 및 네트워크 표준 준수가 필수적입니다. 1) 접근성은 모든 사용자가 웹 사이트에 동등하게 액세스 할 수 있도록 보장합니다. 2) 네트워크 표준은 웹 사이트의 접근성 및 일관성을 향상시키기 위해, 3) 접근성은 시맨틱 HTML, 키보드 내비게이션, 색상 대비 및 대체 텍스트를 사용해야합니다.

HTML의 H5 태그는 무엇입니까?May 09, 2025 am 12:11 AM

HTML의 H5 태그는 작은 타이틀 또는 하위 타이틀을 태그하는 데 사용되는 5 레벨 타이틀입니다. 1) H5 태그는 컨텐츠 계층을 개선하고 가독성과 SEO를 개선하는 데 도움이됩니다. 2) CSS와 결합하여 스타일을 사용자 정의하여 시각적 효과를 향상시킬 수 있습니다. 3) 학대를 피하고 논리적 컨텐츠 구조를 보장하기 위해 H5 태그를 합리적으로 사용하십시오.

H5 코드 : 웹 구조에 대한 초보자 안내서May 08, 2025 am 12:15 AM

HTML5에서 웹 사이트를 구축하는 방법에는 다음이 포함됩니다. 1. 의미 태그를 사용하여 웹 페이지 구조를 정의하는 등; 2. 멀티미디어 컨텐츠, 사용 및 태그를 포함; 3. 양식 검증 및 로컬 스토리지와 같은 고급 기능을 적용하십시오. 이 단계를 통해 명확한 구조와 풍부한 기능을 갖춘 최신 웹 페이지를 만들 수 있습니다.

H5 코드 구조 : 가독성을위한 컨텐츠 구성May 07, 2025 am 12:06 AM

합리적인 H5 코드 구조를 사용하면 페이지가 많은 컨텐츠 중에서 눈에 띄게 나타납니다. 1) 구조를 명확하게하기 위해 컨텐츠를 구성하려면 시맨틱 레이블 등을 사용하십시오. 2) Flexbox 또는 그리드와 같은 CSS 레이아웃을 통해 다른 장치에 대한 페이지의 렌더링 효과를 제어하십시오. 3) 반응 형 디자인을 구현하여 페이지가 다른 화면 크기에 맞게 조정되도록하십시오.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.