目次
H5モバイル端末で各種リストを作成する方法(6)
複雑なグラフィックとテキストのリスト
H5モバイル端末での各種リスト作成方法⑥
html代码
苹果iPhone6s
苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s
SASS代码
小结
html コード h3>rrreee ご覧のとおり、この HTML 構造では、li に異なるクラスを追加していません。実際、バックエンドが出力するときに、異なるクラスが出力される可能性があります。そのため、ここでは純粋なクラスのみを記述します。ちなみに、以前のブログ記事「CSS3 の nth-child セレクターの詳細な説明」を参照してください。

SASS コード

概要
ホームページ ウェブフロントエンド H5 チュートリアル H5モバイル端末での各種リスト作成方法⑥

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

Mar 10, 2017 pm 04:44 PM

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

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

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

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

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

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

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 id="苹果iPhone-s">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">¥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s苹果iPhone-s苹果iPhone-s苹果iPhone-s">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">¥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s苹果iPhone-s苹果iPhone-s苹果iPhone-s">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">¥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s苹果iPhone-s苹果iPhone-s苹果iPhone-s">苹果iPhone6s苹果iPhone6s苹果iPhone6s苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">¥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">¥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s" >
            </a>
        </li>
        <li>
            <a href="goods/goods.html">
                <h3 id="苹果iPhone-s">苹果iPhone6s</h3>
                <p class="goods_info">A1700</p>
                <em class="goods_price">¥4679.00</em>
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="苹果iPhone6s" >
            </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 サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

See all articles