H5 チュートリアル

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

黄舟

May 28, 2018 pm 04:21 PM

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コードの理解：HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コード：Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

See all articles