ホームページ >ウェブフロントエンド >H5 チュートリアル >H5モバイル端末での各種リスト作成方法を詳しく解説(3)

H5モバイル端末での各種リスト作成方法を詳しく解説(3)

黄舟オリジナル: 2018-05-28 16:21:292667ブラウズ

H5モバイル端末で各種リストを作成する方法(3)

前回のレビュー

前回のブログ記事「モバイル端末で各種リストを作成する方法(2)」では、2つのデモを通して、モバイル端末で H5 でさらに要件のリストを作成します。ただし、この章ではさらに詳しく説明します

この記事を最初に見た場合は、リンクにアクセスすることをお勧めします。文脈が一貫しており、この記事の内容を理解しやすくするために、まず上記を参照してください。

小さなアイコン付きのリスト

上記の 2 つの章では、いくつかの通常のリストを作成しました。 mobile H5 では、1 行に 1 つの小さなアイコンを含むリストを作成することがよくあります。このタイプのリストを次の図に示します。ここでは小さなアイコンを使用しません。代わりに円を使用します。

html コード H5モバイル端末での各種リスト作成方法を詳しく解説(3)

<!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 の詳細な解釈」

i标签来制作图标.给每一个i标签加上不同的class是为了订制不同的图标.

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

在这个例子当中,我们采用了定位布局的方式.如果您对定位布局不是很了解,请阅读我的博文《Css 详细解读定位属性 position 以及参数》.

此外,由于每个图标都得不一样,所以我在html中给每一个i标签都加上了不同的class方便在CSS中调用不同的图标图片.也就是说,我们使用背景图片的方式来制作图标.

SASS是支持循环输出的,因此,只需要一个循环代码,就可以将所有的图标都制作OK了.这里呢,也需要使用到background-size来处理图标,关于background-size的使用,本文的上一章中有阐述.这里不再赘述.

SASS循环,建议在sass入门 - sass教程官方网站查看实现方法.这里不再过多的阐述了.

H5モバイル端末での各種リスト作成方法を詳しく解説(3).

首先,我们来看效果图:

H5モバイル端末での各種リスト作成方法を詳しく解説(3)

这个列表和上面的列表乍一看没什么不同.但仔细看就会发现,这个分割线是和文字对齐,而不是和图标对齐的.

不要怪我事儿逼,设计师就是这么设计的.如果没有做到的话,设计师很生气.

html代码和上面的DEMO是一致的.这里不再重复

话不多说,调整css

SASS代码

rrreee

原来在a上的左填充,给加到ul上面去了.这样,就可以压缩li来达到边线缩小的效果.
而在图标的处理上,left值采用了负数,给移到ul さらに、各アイコンは異なる必要があるため、html で各 i タグは、容易にするために異なるクラスで追加されます。 CSS でさまざまなアイコン画像を呼び出します。つまり、背景画像を使用してアイコンを作成します。

SASS はループ出力をサポートしているため、必要なコードは 1 つだけです。ここでは、background-size を使用してアイコンを処理します。 `background-size` の使用については、前の章で説明しましたので、ここでは詳しく説明しません。 SASS ループについては、「Getting Started with Sass - Sass Tutorial」の公式 Web サイトで実装方法を確認することをお勧めします。ここでは詳しく説明しません。

アイコン付きのリストですが、分割線はテキストに合わせてください。 .

まず、レンダリングを見てみましょう:

それがデザイナーのデザインの仕方であるため、私を責めないでください。
あまり言うことはありませんが、css
rrreee
a の元の左パディングが ul に追加されます。 のように、li を圧縮してエッジを減らす効果を実現します。
アイコンの処理では、left の値に負の数を使用します。これにより、ul のパディングに移動されます。

概要🎜🎜 この章では、SASS ループの処理方法には焦点を当てません。これらはすぐに学ぶことができます。 SASS チュートリアルを参照してください。🎜🎜ここでは、小さいアイコンを実現するために、background Picture メソッドを使用していると仮定します。もちろん、CSS アイコンやフォントアイコンなど、小さいアイコンの作成を実現する方法はたくさんあります。これらの実装方法にはそれぞれ長所と短所がありますが、それらは今日検討する問題ではありません。🎜🎜 この章では次の点に焦点を当てます: 🎜🎜🎜🎜 これは非常に重要です 🎜🎜🎜🎜 さまざまな方法を柔軟に使用します。要素を使用するには、内側の塗りつぶしまたは外側の塗りつぶしを使用して、目的の効果を実現します🎜🎜🎜🎜 使用異なる小さなアイコンを実装するには、異なるクラス名が使用されます。

以上がH5モバイル端末での各種リスト作成方法を詳しく解説(3)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：H5モバイル端末での各種リスト作成方法(2)次の記事：H5モバイル端末での各種リスト作成方法(2)

続きを見る