모바일 HTML5 목록을 만드는 방법-H5 튜토리얼-php.cn

모바일 HTML5 목록을 만드는 방법

一个新手

풀어 주다： 2017-09-06 10:21:19

원래의

2089명이 탐색했습니다.

머리말

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

제 레벨은 제한되어 있고 실력은 보통 수준이라 글에 오류나 누락이 있을 수 있으니, 언제든지 글에 댓글 남겨주시면 답변해드리겠습니다.

가장 간단한 목록

먼저 우리가 이루고 싶은 효과는 아래 그림과 같습니다.

모바일 HTML5 목록을 만드는 방법

위에서 보듯이 달성하려면 이렇게 간단한 목록이 필요합니다.

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>

로그인 후 복사

여기서 설명해야 할 것은 모바일 단말기가 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />이 코드를 추가해야 한다는 것입니다. 그렇지 않으면 모바일 브라우저가 이를 다음과 같이 처리합니다. 확장 가능한 웹 페이지의 PC 버전입니다.

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

SASS 코드

.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;}
    }
}
这里的单位全部使用的是,我们里面,已经将的字体大小设置为了,也就相当于正常情况下的10px.也就是说,上面的相当于.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释. 
不会sass的,请先阅读sass相关教程.不要觉得难,一个小时保证学会,两天能玩的非常溜.

로그인 후 복사

여전히 간단한 목록입니다

먼저 렌더링을 살펴보겠습니다.

모바일 HTML5 목록을 만드는 방법

얼핏 보면 이 목록과 위 목록 사이에 차이가 없습니다. 자세히 보면 아래 선이 직선이 아니라는 것을 알 수 있습니다.

놀라지 마세요. 디자이너들은 이런 디자인을 하는 경우가 많습니다. 프론트엔드 직원으로서 우리는 일부를 충실히 복원해야 합니다. 디자이너가 디자인한 작은 디테일이죠 ㅎㅎ

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과 li에 할당하면 됩니다.

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