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%;        
        }
    }
}

로그인 후 복사

원래

에 있던 왼쪽 패딩이