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

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

黄舟オリジナル: 2017-03-10 16:39:071862ブラウズ

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 src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题1</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题2</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题3</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题4</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
    </ul></p></body></html>

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

これにより、サイト全体で共通のスタイルがいくつか抽出されます。
概要

この章では、グラフィックとテキストのリストの単純な 2 列レイアウトを使用して、次の点に焦点を当てます:

モバイル端末で、左右の境界線を使用する必要がある場合は、次のことを試してください。 `border` の境界線を使用しないでください。この例では、`outline` を使用してシミュレートします。

outline を使用して境界線をシミュレートする場合は、必ず注意してください。 2px の境界線を避けるために背景色を使用します。

CSS3 のテキストストロークの実装方法。`text-shadow`

css3 Sass でコードブロックを導入する 2 つの方法と類似点と相違点 (自分で検討するか、関連するチュートリアルを参照してください)

html5 では、a タグはブロックレベルの要素をネストできます。これは、xhtml またはそれ以前の html バージョンでは推奨されません。ここで混乱したり、不適切だと感じたりしないでください。border边框来实现.本例使用 outline来模拟.

在使用 outline 来模拟边框的时候,一定要配合背景颜色的使用,来避免 2px 边框.

CSS3文字描边的实现方法.text-shadow

css3一行文字标题超出显示省略号的实现方法

sass引入代码块的两种方法,以及之间的异同(请自行考虑或参考相关教程)

在html5 中 a 标签是可以嵌套块级元素的.而在xhtml或者更早的html

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

声明：

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

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

続きを見る