简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Detailed explanation of how to make various lists on H5 mobile terminal (3)

Detailed explanation of how to make various lists on H5 mobile terminal (3)

黄舟
黄舟Original
2018-05-28 16:21:292628browse


How to make various lists on H5 mobile terminal (3)

Review of previous situation

In the previous blog post "Mobile terminal In "Various List Making Methods (2)", we use two DEMOs to demonstrate the list making that is more demanding in mobile H5. However, it seems to be quite simple. This Chapter, then go deeper.

If you saw this article first, it is recommended that you go to the link above and read the corresponding content first, so that the context is coherent and it is easier to understand the content of this article.

List with small icons

In the above two chapters, we made some ordinary lists. In mobile H5, we often make lists with one small icon per line. In this DEMO, we Let’s make this type of list. The example is as shown below.

Detailed explanation of how to make various lists on H5 mobile terminal (3)

I will not use the small icon here, but draw a circle instead.

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>

The html code here is different from the previous example. Here we add a i tag to make the icon. Give each i# The ## tag plus different class is to customize different icons.

SASS code

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

In this example, we use the positioning layout method. If you don’t know much about positioning layout, please read my blog post "Css Detailed Interpretation of Positioning Attributes and Parameters".

In addition, since each icon must be different, I give each icon in the html

i tags are added with different classes to facilitate calling different icon images in CSS. In other words, we use background images to make icons.

SASS supports loop output , therefore, only one loop code is needed to make all the icons. Here, you also need to use

background-size to process the icons, about background-size## The use of # is explained in the previous chapter of this article. I will not go into details here. SASS loop, it is recommended to check the implementation method on the official website of Getting Started with Sass - Sass Tutorial. I will not elaborate too much here.

A list with icons, but the dividing line must be aligned with the text.

First, let’s look at the rendering:

Detailed explanation of how to make various lists on H5 mobile terminal (3)This list and The above list looks no different at first glance. But if you look closely, you will find that the dividing line is aligned with the text, not the icon.

Don’t blame me for being awkward, that’s how the designer designed it. If it is not done, the designer will be very angry.

The html code is consistent with the DEMO above. I won’t repeat it here

Without further ado, adjust the css

The left padding of SASS code 

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

originally on

a

is added to ul. In this way, li can be compressed to achieve The effect of reducing the edge. In the processing of the icon, the left
value uses a negative number and is moved above the ul filling. The design effect is achieved.Summary

This chapter does not focus on how to deal with SASS loops. These are technical issues. You can learn them quickly by referring to the SASS tutorial.

I am here Assume that the background image method is used to realize small icons. Of course, there are many ways to realize the production of small icons, such as CSS icons, such as font icons. Each of these implementation methods has its own advantages and disadvantages, which is not the issue I will consider today. .

This chapter focuses on the following points:

    Positioning layout. This is very important.

    2. Flexible use For various elements, use inner filling or outer filling to achieve the effect you want.

    3. Use different class names to achieve different small icons.

The above is the detailed content of Detailed explanation of how to make various lists on H5 mobile terminal (3). For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to make various lists on H5 mobile terminal (2)Next article：How to make various lists on H5 mobile terminal (2)

Related articles

See more