Day_11。初心者向けに次のコードが思い浮かびます_html/css_WEB-ITnose

過去 2 日間で、新人 (卒業したばかりでこれまでフロントエンドに触れたことのない人) がページを切り、いくつかの問題を発見しました。私が初めてフロントエンドに入ったとき、必然的に多くの回り道をしてしまいました。誰も私を指導してくれる人がいなかったので、彼に説明する機会を利用して、初心者がページをカットするときによくある問題と悪い習慣のリストを示します。
まず PSD を提出します:

彼が提出した宿題は次のとおりです:

まず、ページ上の最も直感的な問題を分析しましょう:

1. ナビゲーション バーのホバー効果は追加されません: の位置についてフロントエンドエンジニアの皆さん、気をつけてください！慎重に！慎重に！大事なことは3回言いましょう。

2. バナーボタンと画像は一緒にカットされています。

3. 一見、背景全体が 1 つの大きな画像に切り取られているように見えますが、大きな画面では見えません。問題になるだろう。これには 2 つの欠点があります。1 つは、上に示したように、背景画像より大きい画面に適応できないこと、2 つ目は、リソースが大きすぎること、ネットワーク速度が遅い場合は、白い画面の背景が表示されることです。

4. 右側のリストでは ul と li の組み合わせが使用されており、多くの初心者は dl>dt>dd の組み合わせを知らないため、ul>li の組み合わせよりもここに記載する方が適切です。

5. フォントは設定されていません

6. ラベルのデフォルトのスタイルは削除されていません

7. フッター内のテキストは垂直方向の中央揃えではありません

もう一度コードを見てみましょう:

1. ID名が統一されていないので、ナビゲーションをバナーとして、バナーをヘッダーとして記述すると、多くの人が反対するでしょう。スタイルがタグに対応していれば十分ではないでしょうか。このように書くと、まず、他の人はあなたが専門的ではないと考えるでしょう、また、検索エンジンの SEO はあなたが書いたコードをまったく認識しません。

2. クラスを使用してパブリック スタイルを定義する方法がわかりません。小さな赤い点の画像の各タイトルが 1 回追加されます。
   
   
   CSS ファイルをもう一度見てみましょう:

3. 追加した背景を削除せずにテストします

4. 位置の過剰な使用 相対と絶対の関係がまったくわかりません。多くの初心者は位置を使用することを好みます。絶対位置を記述して上と左の値を調整する限り、常に希望する効果が得られるからです。とても大きいので、わかりません。

5. パブリック スタイルは、使用時に再度書き出されません。

6. もう 1 つの非常に一般的な問題は、とにかく高さを設定したいということです。これにより、多くの問題が回避されますが、まず第一に、これは根本的に間違っています。第 2 に、高さを設定するため、フローティング クリアなど、発見できない問題が数多くあります。

7. フォントのインデントなど、px 単位のみを使用してください。

一般的に、主な問題は上記の問題です。 経験者として、フロントエンドを初めて使用する人に伝えたいのは、

1. 画像を正確に切り取ってくださいピクセルレベルでは、感覚に頼らないでください。PSDドラフトとほぼ同じように感じます。単純に発見できない問題がたくさんあります。

2. よく考えてください。問題が解決すればいいのでコードを積み上げるのではなく、なぜこのように問題を解決するコードを書くのか、原理は何なのかを考えてみましょう。このようにすると、inline-block を設定してから float: left を設定するようなことはなくなります。

3. 頻繁にアドバイスを求めてください。コード検査のない会社で、あなたが書いたコードをフォローするのを誰も助けてくれなければ、自分でたくさんの穴を掘ることになります。