집 > 기사 > 웹 프론트엔드 > H5 모바일 단말기에서 다양한 목록을 작성하는 방법에 대한 자세한 설명(3)

H5 모바일 단말기에서 다양한 목록을 작성하는 방법에 대한 자세한 설명(3)

黄舟원래의: 2018-05-28 16:21:292627검색

H5 모바일 단말기에서 각종 목록 만드는 방법(3)

이전 상황 리뷰

이전 블로그 포스팅 "모바일 단말기에서" 다양한 목록 작성 방법(2)"에서는 두 개의 DEMO를 사용하여 모바일 H5에서 더욱 까다로운 목록 작성을 보여줍니다. 그러나 매우 간단한 것 같습니다. 이 장에서는 더 자세히 설명합니다.

이 글을 먼저 보신 분들은 위의 링크로 가서 해당 내용을 먼저 읽어보시면 문맥이 일관되고 이 글의 내용을 더 쉽게 이해하실 수 있을 것입니다.

작은 아이콘이 있는 목록

위의 두 장에서는 일반적인 목록을 만들었습니다. 모바일 H5에서는 한 줄에 하나의 작은 아이콘으로 목록을 만드는 경우가 많습니다. 이 DEMO에서는 다음과 같은 유형의 목록을 만들어 보겠습니다.

H5 모바일 단말기에서 다양한 목록을 작성하는 방법에 대한 자세한 설명(3)

여기서는 작은 아이콘을 사용하지 않고 대신 원을 그려보겠습니다.

html code

<!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=""><i class="ico ico_1"></i>这是一个列表1</a></li>
        <li><a href=""><i class="ico ico_2"></i>这是一个列表2</a></li>
        <li><a href=""><i class="ico ico_3"></i>这是一个列表3</a></li>
        <li><a href=""><i class="ico ico_4"></i>这是一个列表4</a></li>
        <li><a href=""><i class="ico ico_5"></i>这是一个列表5</a></li>
        <li><a href=""><i class="ico ico_6"></i>这是一个列表6</a></li>
        <li><a href=""><i class="ico ico_7"></i>这是一个列表7</a></li>
        <li><a href=""><i class="ico ico_8"></i>这是一个列表8</a></li>
    </ul></p></body></html>

html 여기서는 i 태그를 추가하여 각 아이콘에 다른 i 태그를 추가합니다. 🎜>다른 아이콘을 사용자 정의하는 것입니다.class

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;            
            background:url("../image/icon_goto.png") right center no-repeat;            
            background-size: auto 1.4rem;            
            padding-left: 3rem;            
            position: relative;        
            }
        .ico {            
        display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: 0;top: .8rem;            
        background: #f60;border-radius: 50%;        
        }
    }
}

이 예제에서는 위치 지정 레이아웃을 사용합니다. 위치 지정 레이아웃에 대해 잘 모르신다면 블로그 게시물 "위치 지정 속성 및 매개변수에 대한 CSS 상세 해석"을 읽어보세요.

, 각 아이콘은 달라야 하기 때문에 편의상 html의 각

태그에 다른 클래스를 추가했습니다. 즉, CSS에서 다른 아이콘 이미지를 호출하여 아이콘을 만듭니다. SASS는 루프 출력을 지원하므로 모든 아이콘을 만드는 데 하나의 루프 코드만 필요합니다. 여기서는 i을 사용하여 아이콘을 처리해야 합니다. 여기서는 자세히 설명하지 않겠습니다.

Getting Started with Sass Tutorial의 공식 웹사이트에서 SASS 루프를 확인하는 것이 좋습니다. background-size background-size아이콘이 있는 목록이지만 구분선은 텍스트와 정렬되어야 합니다.

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

이것은 목록은 얼핏 보면 위의 목록과 다르지 않습니다. 하지만 자세히 보면 구분선이 아이콘과 정렬되지 않고 텍스트와 정렬되어 있음을 알 수 있습니다.

H5 모바일 단말기에서 다양한 목록을 작성하는 방법에 대한 자세한 설명(3) 저를 비난하지 마세요. 강요해서 디자이너가 디자인한 거고 안 하면 디자이너가 엄청 화낼 거예요.

HTML 코드는 위의 DEMO와 일치합니다. 더 이상 반복하지 마세요

ado, CSS 조정

SASS 코드

.list_1 {    
ul {padding-left: 4.6rem;}
    li {        
    border-bottom: 1px solid #ddd;        
    padding-right: 1.6rem;        
    position: relative;        
    a {
            display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;            
            background:url("../image/icon_goto.png") right center no-repeat;            
            background-size: auto 1.4rem;        
            }
        .ico {            
        display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: -3rem;top: .8rem;            
        background: #f60;border-radius: 50%;        
        }
    }
}

원래

에 있던 왼쪽 패딩이

상단에 추가됩니다. 이런 식으로

를 압축할 수 있습니다.

아이콘 처리 시 a 값이 음수를 사용하여 ul 채우기로 이동됩니다.li
요약leftul이 장에서는 SASS 루프를 처리하는 방법에 중점을 두지 않습니다. 이는 SASS 튜토리얼을 참조하면 빠르게 배울 수 있습니다.

여기에서는 물론, CSS 아이콘, 글꼴 아이콘 등 작은 아이콘을 구현하는 방법에는 여러 가지가 있습니다. 이러한 구현 방법에는 각각 장단점이 있습니다. 오늘 다룰 내용은 아닙니다.

이 장에서는 다음 사항에 중점을 둡니다.

포지셔닝 레이아웃이 매우 중요합니다.

다양한 요소를 유연하게 사용하고 내부 채우기 또는 외부 채우기를 사용하여 원하는 효과를 얻으세요.
다른 클래스 이름을 사용하여 다양한 작은 아이콘을 만드세요.

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

성명：

이전 기사：H5 모바일 단말기에서 다양한 목록을 만드는 방법 (2)다음 기사：H5 모바일 단말기에서 다양한 목록을 만드는 방법 (2)