HTML と CSS に関する基本的なメモ (フロントエンドでは必読)

HTML と CSS に関する基本的なメモ (フロントエンドでは必読)

HTMLに触れた当初はレイアウトにいつもテーブルを使っていましたが、とても面倒で見た目も悪かったので、最初はあまり興味がありませんでした。半年ほど前からdiv+cssを使ってページを書くようになってから、興味を持つようになりました。新人として、主に自分自身のためにレッスンと成果を記録していますが、今後学習したい学生の参考になればと思っています。同時に、先輩たちに自分の欠点を指摘してもらうこともしています。

1. 意味のないタグの使用を減らす

以下に簡単な例を示します。

このトップ構造では、

エラー: 列全体 > ページ中央 > 左側 + (右側 > ul > li*9 > a)

正解: 全列 > ページ中央 > 左側 + (ul > li*9 > a)

右側の部分では、ul を囲むために div を使用する必要はありません。1 つの ul でこれを実現できることは明らかです。では、なぜ余分な div タグを使用してネストするのでしょうか。したがって、記述する際に、1 つのタグだけで問題が解決できる場合は、意味のない複数の階層のネストされたタグを使用しないでください。

2 命名について

Java を勉強していたとき、英語があまり得意ではなかったため、ピンインを使って名前をつけるのが好きでした。これは良い考えではありませんでした。勉強を始めた当初はそれを知っていたものの、あまり気にしていませんでした。周りの人からの注意や、特に私自身がピンインの使用に不便さを感じたため、自分自身を訂正し、今後は命名にもっと注意を払うつもりです。英語が得意でなくても大丈夫です。Youdao や Baidu はまだあるのではないでしょうか?

もう 1 つは、タグがネストされている場合の命名です。一般的に、同じレベルのタグの命名は大きな問題ではなく、1 つの単語のみを使用する必要があります。ただし、ネストが発生する場合は、「-」を使用して接続する必要があります。そうしないと、どのラベルがどのラベルであるかを混乱しやすくなります。例えば、上の一番上の列はtop、右側はtop-right、最後にtop-right-detail-linkと名付けることができます。長すぎる場合はtop-rd-linkと省略できます。それでも長すぎる場合はtrd-linkと省略することもできます。長すぎる場合にのみ省略されていることに注意してください。短い場合は、意味の理解を確実にするために省略する必要はありません。また、最後の単語は理解のために省略しない方がよいでしょう。

3 特殊記号の使用

上のドロップダウン矢印はダイヤモンド記号 ◇ を使用して作成され、ネストされた書き込みには 2 つのタグが使用されています。

 < i >< s ></ s ></ i >

s タグは position を使用して表示する必要がある部分の位置を制御し、i タグはウィンドウのサイズを制御してオーバーフロー部分を非表示にします。

CSSコードコンテンツをクリップボードにコピー
  1. i {
  2.     : 15px ;
  3.     高さ: 8px ;
  4.     位置:相対的;
  5.     オーバーフロー:非表示;
  6. }
  7. は {
  8.     フォント: 400 14px / 14pxコンソール;
  9.     位置:絶対;
  10.      top : - 6px ;
  11. }

上記は一般的な方法です。初心者としては、互換性を考慮せずに、1つのタグを使用することで問題を解決できると感じています。文字の場合は、行の高さを使用して垂直位置を制御し、幅と高さを使用して表示領域を制限します。

XML/HTML コードコンテンツをクリップボードにコピーします
  1. <!DOCTYPE html >   
  2. <html>   
  3. <ヘッド  lang = "ja" >   
  4.      <メタ 文字セット= "UTF-8" >   
  5.      <タイトル>テスト</タイトル>   
  6.      <スタイル>   
  7. i {
  8. 表示: インラインブロック;
  9. 高さ: 50px;
  10. 幅: 100px;
  11. オーバーフロー: 非表示;
  12. フォント: 400 100px/0px SimSun;
  13. }
  14.      </スタイル>   
  15. </ヘッド>   
  16. <本文>   
  17. < i > </ i >   
  18. </本文>   
  19. </html>   

効果は次のようになります:

現在、GoogleとFirefoxでのみ効果をテストしており、問題はありません。何か問題があればご指摘ください。

4 隣接するインライン ブロック要素間の距離

上記のナビゲーションをインライン ブロック要素に変換すると、隣接する 2 つの要素の間に数ピクセルの距離が生じます。一見すると見えないかもしれませんが、拡大するとわかります。この問題を解決する唯一の方法は、フローティングを使用することです。

5 数値の連続記述:

CSSでは、一部の属性の値を連続して記述することができます。たとえば、padding と border-radius です。前者は上、右、下、左、後者は左上、右上、右下、左下です。それらはすべて時計回りに配置されていますが、開始点は異なります。 4つの方向をa、b、c、dとすると、したがって、その後ろに連続する 2 つの数字が書かれている場合、それらは ac、bd を表します。3 つの数字は a、bd、c を表します。言うまでもなく、4 つの数字は a、b、c、d を表します。

6 フロートのクリア フロート

をクリアする方法は 4 つありますが、最も一般的な方法は疑似要素を使用することです。

CSSコードコンテンツをクリップボードにコピーします。clearfix
  1. :before、.clearfix:after {
  2.     コンテンツ "" ;
  3.     表示: テーブル;
  4. }
  5. .clearfix:after {
  6.     クリア:両方;
  7. }
  8. .clearfix {
  9. *ズーム: 1; /*IE/7/6*/    /*IE6と互換性あり*/   
  10. }

7 高さを設定します。

フローティングについて話しているときに、セクションの高さの問題を突然思い出しました。一般的に、セクションをハードコードするために固定の高さを使用しないようにしてください。ハードコードしないでください。死んでも書かないでください!死んでも書かないでください!重要なことは3回言うべきです。ハードコードされている場合、レスポンシブにするにはどうすればよいでしょうか?

8 要素のマージンとパディングは

、すべての要素のマージンとパディングの水平方向 (左右) に有効であり、行内の要素の垂直方向 (上下) のみが補助的な役割を果たしません。パディングによって要素の境界が拡張されますが、要素を元の垂直位置から押し出すことはできないことに注意してください。

 

9 相対位置決めと絶対位置決めの使用

位置決めには、絶対位置決め、相対位置決め、固定位置決め、静的位置決めの 4 種類があります。後者の 2 種類の位置決めについては、特に言うことはありません。前の 2 種類と同じです。注意すべき点は、相対位置決めはドキュメント フローの元の位置を占めますが、絶対位置決めはドキュメント フローの元の位置を占めないことです。したがって、位置決めを使用する必要がある場合は、実際の状況に応じて具体的な状況を分析し、相対位置決めを使用するか絶対位置決めを使用するかを検討する必要があります。例:

CSS コードコンテンツをクリップボードにコピー
  1. * { margin : 0; padding : 0; color : #fff ; font-size : 20px ; }
  2. .nav { height : 30px ; background-color : pink; border-bottom : 4px  固体  div : red ; }
  3. .w { width : 100px ; margin : 0 100px ; position : relative ; height : 30px ; z-index : 1; }
  4. .nav-list { height : 30px ; background-color : red ; }
  5. .left { width : 100%; height : 400px ; background-color : peru; position : absolute ; }
  6. .b { margin-left : 210px ; width : 100px ; height : 100px ; background-color : lightblue; position : relative ; }
XML/HTML コードコンテンツをクリップボードにコピー
  1. < div  クラス= "nav" >   
  2.      < div  クラス= "w" >   
  3.          < div   class = "nav-list" >リスト</ div >   
  4.          < div   class = "nav-list" >リスト</ div >   
  5.          < div   class = "nav-list" >リスト</ div >   
  6.          < div   class = "nav-list" >リスト</ div >   
  7.          < div   class = "nav-list" >リスト</ div >   
  8.      </div>   
  9. </div>   
  10. < div  クラス= "left" ></ div >   
  11. < div  クラス= "b" > b </ div >   

 

リストは上部に属し、leftは下部の広告、bは下部のコンテンツです。相対配置と絶対配置を使用して問題を解決する場合、leftは下部に影響を与えないように絶対を使用する必要があります。このようにして、上部を超えたリストがカバーされます。したがって、リストの親ボックスには一定のレベルを設定する必要があります。論理的には、依然として上部に属しているため、相対を使用して上部の位置を占める必要があります。この場合、b にも relative を設定し、ブロックされないように左マージンを設定する必要があります。

10 配置を使用して要素を中央に配置します。

ブロック レベル要素を水平方向に中央に配置するには、margin: 0 auto を使用します。配置を使用した解決策は、配置を設定した後、左 (上) を 50% に設定し、margin-left を使用してその位置の半分を後ろに移動します。

CSSコードコンテンツを
  1. クリップボードにコピーheight : 20px ;
  2. : 50px ;
  3. 位置:絶対;
  4. :50%;
  5. margin-left : - 25px ;

11 背景と画像 画像

を挿入する際に img を使用するタイミングと背景を使用するタイミングについてよく質問されます。簡単に言うと、一般的なウェブサイトのアイコンはすべて背景を使用し、特定の製品に関連する場合はimg画像が使用されていると思います。

フロントエンド必読のHTMLとCSSの基本ポイントを解説した上記記事が、編集者が皆さんにシェアする内容の全てです。皆さんの参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/qing9442/archive/2016/07/26/5709413.html

<<:  互換性を維持しながら他のウェブページのデータを適用する iframe の使い方

>>:  CSS3ダイヤモンドパズルはdivのみを回転し、背景画像は回転しない機能を実現します

推薦する

WindowsはVMwareを使用してLinux仮想マシンを作成し、CentOS7.2オペレーティングシステムをインストールします。

目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...

Firefox で Flash を再生するためのオブジェクトとパラメータの書き方

コードをコピーコードは次のとおりです。 <object classid="clsid...

Apache クロスドメイン リソース アクセス エラーの解決策

多くの場合、大規模および中規模の Web サイトでは、静的リソース (フォント ファイル、画像など)...

HTML+CSSを使用してTG-visionホームページを作成する方法

今回はHTML+CSSレイアウトを使用して、TG-vision Shuanghui Mediaのホー...

オンライン MYSQL 同期エラーのトラブルシューティング方法の概要 (必読)

序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...

ARM64アーキテクチャでmysql5.7.22をインストールするプロセス全体

MySQLダウンロードアドレス: https://obs.cn-north-4.myhuaweicl...

ボタンの権限判定を実装するためのVueカスタムv-has命令

アプリケーションシナリオバックグラウンド管理システムを例にとると、各ユーザーには異なるボタン権限があ...

MySQLプロセスを安全かつ適切にシャットダウンする方法

序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...

Linux には make コマンドがありません (make: *** ターゲットが指定されておらず、makefile または make コマンドのインストール方法が見つかりません)

知らせ! ! !この状況は、実際には仮想マシンのインストール中に回避できます。次回仮想マシンをテスト...

Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明

目次序文1. 親コンポーネントが子コンポーネントに値を渡す2. サブコンポーネントのprops型制約...

テーブルの幅を固定して、テキストによって幅が変わらないように設定

ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

ウィンドウ表示効果を実現するJavaScript

この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Windows DNS サーバーに「ワームレベル」の脆弱性が露呈、17 年間存在

脆弱性の紹介SigRed の脆弱性はワーム化可能であるため非常に危険です。つまり、ユーザーの介入なし...

MySql の集計関数に条件式を追加する方法

MySQL のフィルタリングのタイミングは、集計関数で使用される where 条件と having ...