モバイルページproduction_html/css_WEB-ITnose

デザイン画をもらったときに、マークマンを使ってサイズやフォントサイズ、色などをマークするのですが、それが何のフォントなのかわからないので、どうやって判断すればいいのかわかりません。デザイナーさんに聞いてみないといけないと思います！

これは携帯電話用の HTML5 Web ページです。一般的に、Webkit カーネルに適応すると考えられています。さらに、スケーリングや適応などを防ぐためにメタ タグを設定する必要があります。コードは次のとおりです。

幅はデバイスの幅で、初期の拡大縮小率は1です。最小ズーム率は1であり、ズームすることはできません。

背景色が白ではないことがわかったので、本文CSSスタイルのbackground-color属性を設定して背景を全体的に統一させ、ブラウザによっては自動的に本文にマージン値を追加することも考慮しています。コードは次のとおりです:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

会社タイトルは垂直方向と水平方向の中央揃えです:

1. text-align を中央に設定します。

2. line-height を div の高さと同じ高さに設定します。

ドキュメントの上部から 10 ピクセルのギャップを残し、使用します:

        body {            background-color: #f2f2f2;            margin: 0;        }

主要な情報には ul li レイアウトを使用し、右側の特定の情報には右フローティング表示を使用します:

margin-top:10px;

中央に配置されている場合, すべてテキストなので、line-height を一律に使用します 高さと同じ高さです。

画像が存在するため、以下の他の情報は常に img を使用して実装したいと考えていましたが、垂直方向の中央揃えに多くの問題があることがわかりました。その後、計画を変更して div を直接使用して背景画像を設定しました。 。

これらの情報ストリップにクリック効果があることを考慮して、margin-left と padding-left についてよく考えたところ、margin-left の li click 効果を使用すると、右半分のみがクリック効果を持つことがわかり、色が変化することがわかりました。左側の小さな部分のオフセットが原因で一貫性がありません。変更はありません。これは私たちが望む効果ではありません。

そこで、私は依然としてpadding-left liを使用し、最後にliにdivを追加して下端の境界線を設定しました。具体的なコードは次のとおりです:

            float: right;            margin-right: 14px;

:not(:last-child) は微妙な美しさを表現するためのものです。理由は、最後のものにはこの境界線がないことを願っています。

==========カット: github コード============

https://github.com/sisilai/pywork