シンプルなHTMLとCSSの使い方の詳細な説明

シンプルなHTMLとCSSの使い方の詳細な説明

HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます。

1.開発の前に、まず開発環境を構成する必要があります。Sublime、WebStorm、Vscode、Hbuilder、Atom などの開発ソフトウェアをインストールする必要があります。いずれか 1 つを選択してください。私はWebstormを使用しています。

2.メイン フォルダー内に関連するプロジェクト フォルダーを作成します。プロジェクト関連のファイルをまとめて、管理と将来のメンテナンスを容易にします。

その中には、プロジェクトに関連するいくつかのファイルが含まれています

ホームページまたはホームページ index.html default.html

CSS フォルダ CSS ファイル

ベース.css グローバル.css

画像フォルダは、Web サイト上のすべての画像を保存するために使用されます。

Jsファイル

オーディオまたはビデオファイル

3.その後、スタイルの初期化を実行する必要があります。通常、すべての Web サイトは開発前にスタイルの初期化を実行します。たとえば、Taobao や JD などの大規模な Web サイトには、独自のスタイル初期化 CSS ファイルがあります。のように:

XML/HTML コードコンテンツをクリップボードにコピー
  1. html、本文、ul、li、ol、dl、dd、dt、p、h1、h2、h3、h4、h5、h6、フォーム、フィールドセット、凡例、img {
  2. マージン: 0;
  3. パディング: 0;
  4. }
  5.   
  6. フィールドセット、画像、入力、ボタン {
  7. 境界線: なし;
  8. パディング: 0;
  9. マージン: 0;
  10. アウトラインスタイル: なし;
  11. }
  12.   
  13. ul、ol {
  14. リストスタイル: なし;
  15. }
  16.   
  17. /*元のスタイルにある小さな黒い点を削除します*/
  18. 入力{
  19. パディング上部: 0;
  20. パディング下部: 0;
  21. フォントファミリー: "SimSun", "宋体";
  22. }
  23.   
  24. 選択、入力{
  25. 垂直位置合わせ: 中央;
  26. }
  27.   
  28. /*入力した単語は中央に表示されます*/
  29. 選択、入力、テキストエリア {
  30. フォントサイズ: 12px;
  31. マージン: 0;
  32. }
  33.   
  34. /**/
  35. テキストエリア {
  36. サイズ変更: なし;
  37. }
  38.   
  39. /*ドラッグを禁止する*/
  40. 画像 {
  41. 境界線: 0;
  42. vertical-align: middle; /* 画像の下部にあるデフォルトの 3 ピクセルの空白を削除します*/
  43. }
  44.   
  45. テーブル {
  46. border-collapse: collapse; /*外部リンクを結合*/
  47. }
  48.   
  49. 体 {
  50. フォント: 12px/150% Arial、Verdana、"\5b8b\4f53"; /*UnitedCode は Songti で書かれています*/
  51. color: #666; /*現在のフォントサイズに基づいて 150% の行間隔*/
  52. 背景: #fff;
  53. }
  54.   
  55. .clearfix:before、.clearfix:after {
  56. /* クリアフローティング、これを記述する最も優れた標準的な方法 */
  57. コンテンツ: "";
  58. 表示: テーブル;
  59. }
  60.   
  61. .clearfix:後{
  62. クリア: 両方;
  63. }
  64.   
  65. .clearfix {
  66. *ズーム: 1; /*IE/7/6*/ /*IE6と互換性あり*/
  67. }
  68.   
  69. {
  70. 色: #666;
  71. テキスト装飾: なし;
  72. }
  73.   
  74. ホバー{
  75. 色: #C81623;
  76. }
  77.   
  78. h1、h2、h3、h4、h5、h6 {
  79. テキスト装飾: なし;
  80. フォントの太さ: 標準;
  81. フォントサイズ: 100%;
  82. }
  83.   
  84. s、i、em {
  85. フォントスタイル: 通常;
  86. テキスト装飾: なし;
  87. }
  88.   
  89. .col-red {
  90. 色: #C81623 !重要;/*JD.com メインカラー*/
  91. }
  92.   
  93. /*パブリッククラス*/
  94. .w {
  95. /*ページのコンテンツを抽出します */
  96. 幅: 1210ピクセル;
  97. マージン: 0 自動;
  98. }
  99.   
  100. .fl {
  101. フロート: 左;
  102. }
  103.   
  104. .fr {
  105. フロート: 右;
  106. }
  107.   
  108. .al {
  109. テキスト配置: 左;
  110. }
  111.   
  112. .ac {
  113. テキスト配置: 中央;
  114. }
  115.   
  116. .ar {
  117. テキスト配置: 右;
  118. }
  119.   
  120. 。隠れる {
  121. 表示: なし;
  122. }

これにより、開発者は各タグのスタイルを初期化し、共通クラスを再利用しやすくなります。

4.ウェブサイトの構造を分析する

ウェブサイトを作る際の標準または一般的な慣行もあります

レイアウトの順序は通常、上から下、左から右になります。

ページを作成するときは、一般的には標準フローの要素を使用し、次にフローティングまたは配置を使用することが考えられます。

標準フロー要素の中では、幅と高さが最も安定しているため、パディングが最初に使用され、マージンが最後に使用されます。

ウェブサイト構造内のどのタグもボックスモデルとみなされ、幅と高さを設定できます。ただし、一部の要素では、幅と高さを設定しても機能しません。

インライン要素の幅と高さを機能させるには:

1. インライン要素をブロックレベル要素またはインラインブロック要素に変換する

2. フローティングラベル

3. 位置決めとラベルの取り外し

インライン ブロック要素をレイアウトする場合、インライン ブロック要素間にはデフォルトで数ピクセルの間隔が設けられます。これらの数ピクセルの間隔は、フロートを使用してのみクリアできます。

位置決めには 4 つの種類があります。

固定絶対相対静的

通常、Web サイトの構造を分析する場合、Firefox を使用してこの Web ページのスクリーンショットを撮って保存できます。

次に、Fireworks を使用して、Web サイト上の特定のコンテンツの幅、高さ、色などを抽出できます。

Fw の一般的なショートカットキー:

スポイトツールで色を拾う

K スライスツール 要素の幅を計測する

Z 拡大鏡ツール

Vムーブ

ポインターツール

よく使用される複合属性:

背景

mso-char-indent-count:3.4900;">フローティングの理由は、親ボックスに高さがないためです。元の高さは、標準フロー内の子要素によってサポートされます。ただし、子要素がフローティングすると、標準フローから外れ、親要素の高さが 0 になります。

1.親ボックスの高さを設定する

2. クリア:両方

3. オーバーフロー: 隠しはBFCモードをトリガーし、フローティングをクリアするためにも使用できます。

4. 擬似要素または二重擬似要素除去法

XML/HTML コードコンテンツをクリップボードにコピー
  1. .clearfix:before、.clearfix:after {
  2. /* クリアフローティング、これを記述する最も優れた標準的な方法 */
  3. コンテンツ: "";
  4. 表示: テーブル;
  5. }
  6.   
  7. .clearfix:後{
  8. クリア: 両方;
  9. }
  10.   
  11. .clearfix {
  12. *ズーム: 1; /*IE/7/6*/ /*IE6と互換性あり*/
  13. }
  14.   

(疑似要素はフロートをクリアするためによく使用されます)

配置要素の階層:

trbl値を書き込まずに要素に絶対位置のみを指定すると、その位置に表示されます。

配置された要素 (相対的および絶対的または固定的) には、階層のプロパティまたは概念があります。複数の隣接する要素が同じ位置に配置されている場合、デフォルトでは後者の要素が前者の要素を抑制します。両方とも配置された要素である場合、デフォルトではレベルはすべて 0 ですが、後者の要素は前者の要素を抑制します。現在の要素をその背後にある要素の上に表示したい場合は、z-index を使用して階層を変更する必要があります。

z-index の値の範囲は 0 ~ 9999999 です。正の数を使用し、負の数を使用しないようにすることをお勧めします。

また、position:relative は標準フローでの位置を占有し続けるため、そのレベルで他のコンテンツが表示されなくなることに注意してください。

不透明度

不透明度: 互換性の問題があり、背景色を透明にするだけでなく、内部のコンテンツも透明になります。

背景: rgba(0,0,0,.3);

背景色のみを透明にし、コンテンツを不透明にする

隣接要素の階層

マウスがTaobaoのウェブページに入ると境界線が点滅します

XML/HTML コードコンテンツをクリップボードにコピー
  1. <スタイル>   
  2. * {
  3. マージン: 0;
  4. パディング: 0;
  5. }
  6. div {
  7. 幅: 200ピクセル;
  8. 高さ: 500px;
  9. 境界線: 10px 青実線;
  10. フロート: 左;
  11. /*右マージン: 10px;*/
  12. 左マージン: -10px;
  13. position: relative; /* 配置された要素はデフォルトで階層を持ち、デフォルトの階層は 0 です*/
  14. }
  15. div:ホバー{
  16. 境界線の色: 赤;
  17. 位置: 相対的;
  18. zインデックス: 1;
  19. }
  20.      </スタイル>   
  21. </ヘッド>   
  22. <本文>   
  23. <div> </div>   
  24. <div> </div>   
  25. <div> </div>   
  26. <div> </div>   
  27. <div> </div>   
  28. </本文>   
  29.   

このように、ホバー疑似要素を使用して、隣接する要素の階層を利用して境界線の色やその他のプロパティを制御し、Taobao と同じ効果を実現できます。

シンプルな HTML と CSS の使い方に関する上記の詳細な説明は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナルURL: http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.html

<<:  Linux環境でOpenSSL証明書を生成する

>>:  30 種類の無料の高品質英語リボンフォント

推薦する

mysql 行列変換サンプルコード

1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...

Vue でのルータービューコンポーネントの使用に関する詳細な説明

Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることが...

ホームページのデザインはウェブデザイナーのレベルを最もよく反映する

私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...

divは、自動入力スタイルをブロックする入力ボックスとして入力を使用せずにコンテンツを入力できます。

今日、私は公開用の動的なウィンドウ スタイルを設計しましたが、マウスで入力をクリックしたときにブラウ...

JavaScript の重要なブレークポイント デバッグ手法の概要 (推奨)

目次デバッガーを使用する理由は何ですか? Chromeデバッガーの基本的な使い方VS Code によ...

Vue はカードフリップカルーセル表示を実装します

Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は...

データ型の判断における js typeof と instanceof の違いと、その開発と使用について

目次1. typeof演算子2. インスタンスオブ演算子3. typeof と instanceof...

XHTML タグのネスト規則の分析

XHTML 言語では、ul タグに li が含まれ、dl タグに dt と dd が含まれることは誰...

ウェブページに埋め込まれた Flash と IE、FF、Maxthon の互換性の問題

いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...

ユーザー中心設計

最近、デジタル デザイン コミュニティで「誰が何を担当するのか」という明らかな混乱についてよく質問さ...

TypeScript 2.0 マーク付き共用体型の詳細な説明

目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...

CentOS システムのディスク パーティションを拡張する方法

問題/障害/シナリオ/要件Eve-ng の仮想マシン OVA のハードディスクは 38G しかないた...

Vite2.x に基づく Vue 3.x プロジェクトの実装

Vue 3.x プロジェクトの作成 npm init @vitejs/app my-vue-app ...