ホームページ > 記事 > ウェブフロントエンド > モバイル HTML5 リストの作成方法
モバイル HTML5 リストの作成方法
- 一个新手オリジナル
- 2017-09-06 10:21:192027ブラウズ
前書き
この一連の記事の CSS 部分はすべて SASS 構文で書かれます。SASS を知らない場合は、私の「CSS プリコンパイル テクノロジー - SASS 学習体験」などの関連チュートリアルを読むことをお勧めします。 「概要」チュートリアル。
このシリーズの記事では、ブラウザーのスタイルをリセットするために使用される 2 つの基本ドキュメント reset.scss および mixin.scss と、いくつかの基本的な SASS コード ブロックについて説明します。コードは長くなるので、「モバイル ターミナル シリーズ ブログの基本」を参照してください。 .reset.scssとmixin.scss》を取得します
私のレベルは限られており、私の能力は平均的なので、記事には間違いや漏れが必ずあります。そのため、記事にコメントを残してください。できるだけ早く皆さんに感謝します。
最も単純なリスト
まず、達成したい効果は次のとおりです。
<!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 1</title><link rel="stylesheet" href="../style/style.css"></head><body><p class="list_1">
<ul>
<li><a href="">这是一个列表1</a></li>
<li><a href="">这是一个列表2</a></li>
<li><a href="">这是一个列表3</a></li>
<li><a href="">这是一个列表4</a></li>
<li><a href="">这是一个列表5</a></li>
<li><a href="">这是一个列表6</a></li>
<li><a href="">这是一个列表7</a></li>
<li><a href="">这是一个列表8</a></li>
</ul></p></body></html>
ここで説明する必要があるのは、モバイル端末がこのコードを追加する必要があるということです。そうしないと、モバイルブラウザはそれを次のように扱います。スケーラブルな Web ページの PC バージョン。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
エンコードによる文字化けを避けるため、サーバー、データベース、バックエンド プログラム、フロントエンド HTML および CSS をすべて utf-8 でエンコードすることをお勧めします。SASSコード
.list_1 {
ul {}
li {
border-bottom:1px solid
#ddd;padding:0 1.6rem;
a {display: block;
height: 4rem;
line-height:
4rem;overflow:
hidden;font-size: 1.4rem;}
}
}
这里的单位全部使用的是,我们里面,已经将的字体大小设置为了,也就相当于正常情况下的10px.也就是说,上面的相当于.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释.
不会sass的,请先阅读sass相关教程.不要觉得难,一个小时保证学会,两天能玩的非常溜.
これはまだ単純なリストですまず、レンダリングを見てみましょう:
です。考え方を少し変えただけです。demo1 のローディング li のパディング値を ul と li に代入するだけです。
以上がモバイル HTML5 リストの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。