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

黄舟
풀어 주다: 2017-03-10 16:28:31
원래의
2535명이 탐색했습니다.

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에 해당합니다. 즉, 위의 html62.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는 다음 장에서 목록의 복잡성을 점차적으로 증가시킬 것입니다.

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

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

    너비를 설정하지 않고도 내부 패딩을 설정해도 문제가 없습니다.
  1. 오버플로 처리 숨기기 제목이 너무 길어서 줄 바꿈이 발생하는 것을 방지합니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿