简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

H5モバイル端末での各種リスト作成方法⑥

黄舟
リリース： 2017-03-10 16:44:53
オリジナル
1596 人が閲覧しました

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

この記事を最初に見た場合は、まず上記のリンクにアクセスして、文脈がわかるように該当するコンテンツをご覧になることをお勧めしますこの記事の内容をわかりやすく説明します。前の 2 つの章では、グラフィック リストの 2 列レイアウトについて説明しました。実際、この章では、グラフィック リストの 2 列レイアウトについて説明します。さらに一歩進んで、比較的複雑なレイアウト メソッドを実装します

そして、Android 4.4 以下およびいくつかの愚かな国内モバイル ブラウザと互換性を持たせるために、実際には calcvhvw を放棄します。 code><code>css3 の最新の属性を待ちます。このレイアウトを実現するには、比較的単純なパラメーターのみを使用します。

複雑なグラフィックとテキストのリスト

ただし、この部分は比較的複雑です。これは非常に一般的です。まず最終的なレンダリングを見てみましょう

calcvhvw等css3最新属性.只使用比较简单的参数,来实现这个布局.

H5モバイル端末での各種リスト作成方法⑥

这部分是比较复杂的,但是,特别特别的常见.我们先来看一下最终效果图.

H5モバイル端末での各種リスト作成方法⑥

如上图所示,这应该算是一个比较复杂的图文列表了.不知道你看到这个布局,你会构建怎么样的DOM框架.

我是这样考虑的.为了后端能够方便的输出,这六个产品,必须格式统一.因此,我的HTML代码如下:

html代码

<!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 4</title><link rel="stylesheet" href="../style/style.css">
</head>
<body>
<p class="list_4">
    <ul>
        <li>
            <a href="goods/goods.html">
                <!-- 只有第一个有这个热售,其他的木有!~ -->
                <i class="goods_words">热售</i>
                <h3 class="goods_title">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 class="goods_title">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">￥4679.00</em>
                <img src="../image/goods.jpg" alt="苹果iPhone6s" class="goods_photo">
            </a>
        </li>
    </ul></p></body></html>
ログイン後にコピー

可以看到,在这个HTML结构中,我并没有给li加上不同的class.而事实上,在后端输出的时候,是可以输出不同的class的.但这回使事情复杂.因此,在这里,我们就只输出纯的代码.顺便,温习一下我之前的博文《css3的nth-child选择器的详细探讨》.

SASS代码

.list_4 {
    margin-top: 0.8rem;background:#fff;border-top: 1px solid #ddd;
    ul {@extend .cf;}
    li {
        background:#fff;outline: 1px solid #ddd;
        &:nth-child(-n+3) {
            width: 50%;height: 0;position: relative;
            a {display: block;position: absolute;left: 0;top: 0;height: 0;width: 100%;}
            .goods_photo {display: block;position: absolute;right:0.5rem;}
            .goods_title,.goods_info,.goods_price {z-index: 2;width: 60%;}
        }
        &:nth-child(1) {
            float: left;padding-bottom: 55%;
            a {padding-bottom: 110%;}
            .goods_photo {width: 50%;bottom: 5%;}
            .goods_title,.goods_info,.goods_price,.goods_words {margin-left: 1.6rem;}
            .goods_words {margin-top: 1.6rem;}
        }
        &:nth-child(n+2):nth-child(-n+3) {
            float: right;padding-bottom: 27.5%;
            a {padding-bottom: 55%;}
            .goods_photo {height: 70%;top: 15%;}
            .goods_title,.goods_info,.goods_price,.goods_words {margin-left: 1.2rem;}
            .goods_title {margin-top: 1.6rem;}
        }
        &:nth-child(n+4) {
            width: 33.3%;float: left;
            a {display: block;padding: 1rem;}
            .goods_photo {width: 70%;max-width: 15rem;margin: 0.5rem auto 0;display: block;}
        }
    }
}

// 全站范围内用到的图文基本样式
.goods_words {
    display:inline-block;
    padding:0.3rem 0.5rem;border-radius: 0.3rem;background:#f60;color:#fff;font-size: 1.2rem;margin-bottom: 0.5rem;
}
.goods_title,.goods_price,.goods_info {
    display: block;position: relative;
    @include ts(); // 引用文字描白边代码片
    @include online(1.8rem); // 引用文字超出一行省略号代码片
}
.goods_title {color:#000;font-size: 1.2rem;}
.goods_info {color:#999;font-size: 1.2rem;}
.goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}
ログイン後にコピー

在我之前的一篇博文《纯CSS实现移动端常见布局——高度和宽度挂钩的秘密》里面,我就是讲解的这个布局的实现方法.在那篇文章的发布之后,有人问我,你这样布局,里面的内容怎么排布呢?我说用定位布局,他还是没听明白.不知道看到我这篇文章之后,明白了没有.

具体代码是什么意思,我这里就不详细解释了.自己看了分析吧.重点是 nth-child的使用,可以参考我上面的博文,理解我每一个选择器是什么意思.以及,定位布局等.

小结

这一章的重点有

  1. CSS如何实现元素的高度和宽度挂钩.

  2. 定位布局,相当的重要

  3. nth-child複雑な画像とテキストの混合リスト

    4. 上の図に示すように、これは、いつどのような DOM フレームワークを構築するかはわかりませんが、比較的複雑な画像とテキストのリストとみなすべきです。このレイアウトが表示されます。
これは私が考えたものです。バックエンドが便利に出力するには、これらの 6 つの製品が統一された形式を持つ必要があります。したがって、私の HTML コードは次のとおりです。

html コード h3>rrreee ご覧のとおり、この HTML 構造では、li に異なるクラスを追加していません。実際、バックエンドが出力するときに、異なるクラスが出力される可能性があります。そのため、ここでは純粋なクラスのみを記述します。ちなみに、以前のブログ記事「CSS3 の nth-child セレクターの詳細な説明」を参照してください。

SASS コード

rrreee
以前のブログ記事「純粋な CSS 実装」の「共通レイアウト」を参照してください。モバイル端末で使える高さと幅の連動の秘密」で、このレイアウトの実装方法を説明しました。その記事の公開後、「このレイアウトではどうやってコンテンツを配置するのですか？」と質問されましたが、まだ理解できていませんでした。彼が私の記事を読んで理解したかどうかはわかりませんが、ここでは詳しく説明しませんので、自分で読んで分析してください。 nth-child
の使用については、上記のブログ投稿を参照して、各セレクターの意味や配置レイアウトなどを理解してください。clac vw vh

概要


。この章の焦点は次のとおりですhello world
  1. CSS で要素の高さと幅のフックを実装する方法🎜
  2. 🎜レイアウトの配置は非常に重要です🎜🎜
  3. 🎜nth -child は、実際には非常に強力な CSS セレクターです。特定のプロジェクトでの使用方法🎜🎜🎜🎜🎜🎜強調: 🎜 (1.) Android 4.4 以下および一部の国内モバイル ブラウザは 🎜 などの最新の CSS 属性をサポートしていないため、この記事の方法では、従来の CSS 手法を使用して問題を解決します。 (2.) この一連の記事では、モバイル端末に関する私の経験と洞察を段階的に説明する予定です。最初の章を読んだ後、「これは簡単すぎる、質問したい」と叫ぶ人もいました。どのプログラミングの本でも 🎜 から始まります。とても簡単ですよね?🎜🎜。

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

関連ラベル：
HTML5，移动端，列表
ソース：php.cn
前の記事：H5モバイル端末での各種リスト作成方法(5) 次の記事：H5モバイル端末での各種リスト作成方法（全7章）
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
テーブルの列をモバイルビューにスタックすることが私の目標です 列が 5 つあり、それをコード化するのが最も簡単な方法なので、テーブルとして作成しています。モバイルビューに重ねて表示したい。どうすればいいでしょうか？私の形式は次のとおりです: ...
から 2024-04-02 20:50:17
0
1
274
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！