H5モバイル端末での各種リストの作り方(4)

前回のレビュー

『H5モバイル端末での各種リストの作り方(1)』
『H5モバイル端末での各種リストの作り方H5モバイル端末での各種リスト作成方法(2)》
《H5モバイル端末での各種リスト作成方法(3)》

この記事を先にご覧になった方は、先に上のリンクからご覧いただくことをお勧めします。文脈が一貫しており、この記事の内容を理解しやすくするために、対応する内容を記載しています。最初の 3 章はすべて、通常のリストの実装方法について説明しています。難易度は簡単なものから難しいものまでありますが、一般的にはマスターできます。この章では、画像とテキストのリストを作成します。

通常の 2 列の画像とテキストのリスト。ここでは、以下の図に示すように、最初に最も単純なものを作成しましょう。各ブロックには、写真、名前、価格が含まれています。このようなレイアウトを PC 側で実装するのは簡単ですが、ここでは携帯電話の幅が異なるため、要件は適応的です

ここにあるすべての写真は、すべて正方形です。実際のプロジェクトでは、通常、製品が正方形ではない場合、関連するチュートリアルが用意されています

コードは比較的長いですが、それでもはっきりと確認できます。さまざまな要素にさまざまなクラスを追加しました。この目的は、サイト全体でこれらの要素の基本スタイルを統一し、CSS コードを再利用することです。

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

<!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 2</title>
<link rel="stylesheet" href="../style/style.css"></head><body><p class="list_2">
    <ul>
        <li>
            <a href="">
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="商品图片" >
                <h4 id="这里是商品标题">这里是商品标题1</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="商品图片" >
                <h4 id="这里是商品标题">这里是商品标题2</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="商品图片" >
                <h4 id="这里是商品标题">这里是商品标题3</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img class="goods_photo lazy"  src="/static/imghw/default1.png"  data-src="../image/goods.jpg"   alt="商品图片" >
                <h4 id="这里是商品标题">这里是商品标题4</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
    </ul></p></body></html>

ログイン後にコピー

CSS であることをもう一度強調したいと思います。この一連のチュートリアルの一部では SASS 構文を使用します。SASS 構文を知らない場合は、30 分から 1 時間かけて SASS を学習することをお勧めします。