ホームページ >ウェブフロントエンド >htmlチュートリアル >モバイルページ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