ホームページ >ウェブフロントエンド >H5 チュートリアル >H5モバイル端末での各種リスト作成方法を詳しく解説(4)
『H5モバイル端末での各種リストの作り方(1)』
『H5モバイル端末での各種リストの作り方H5モバイル端末での各種リスト作成方法(2)》
《H5モバイル端末での各種リスト作成方法(3)》
通常の 2 列の画像とテキストのリスト。ここでは、以下の図に示すように、最初に最も単純なものを作成しましょう。各ブロックには、写真、名前、価格が含まれています。このようなレイアウトを PC 側で実装するのは簡単ですが、ここでは携帯電話の幅が異なるため、要件は適応的ですこの記事を先にご覧になった方は、先に上のリンクからご覧いただくことをお勧めします。文脈が一貫しており、この記事の内容を理解しやすくするために、対応する内容を記載しています。最初の 3 章はすべて、通常のリストの実装方法について説明しています。難易度は簡単なものから難しいものまでありますが、一般的にはマスターできます。この章では、画像とテキストのリストを作成します。
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 を学習することをお勧めします。
これにより、サイト全体で共通のスタイルがいくつか抽出されます。 概要
border
の境界線を使用しないでください。この例では、outline
を使用してシミュレートします。outline
を使用して境界線をシミュレートする場合は、必ず注意してください。 2px
の境界線を避けるために背景色を使用します。
text-shadow
html5
では、a
タグはブロックレベルの要素をネストできます。これは、xhtml
またはそれ以前の html
バージョンでは推奨されません。ここで混乱したり、不適切だと感じたりしないでください。border
边框来实现.本例使用 outline
来模拟.
在使用 outline
来模拟边框的时候,一定要配合背景颜色的使用,来避免 2px
边框.
CSS3文字描边的实现方法.text-shadow
css3一行文字标题超出显示省略号的实现方法
sass引入代码块的两种方法,以及之间的异同(请自行考虑或参考相关教程)
在
html5
中a
标签是可以嵌套块级元素的.而在xhtml
或者更早的html
以上がH5モバイル端末での各種リスト作成方法を詳しく解説(4)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。