BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

簡単なhtmlとcssの使い方を解説

2022-01-26 09:07:48

htmlとcssを含む神宮のホームページの静的ページ効果を3日間使って完成させる予定です。

<フォント 1. sublime webstorm vscode Hbuilder atomなどの開発ソフトをインストールする必要があるので、どれかひとつを選んでください。私が使っているのはwebstormです。

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

インクルード：プロジェクトに関連するいくつかのファイル

トップページまたはホーム画面 index.html default.html

 cssファイル用のCssフォルダ  

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

 Images フォルダは、サイト内のすべての画像を格納するために使用されます。

 Jsファイル

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

3. この後、我々はスタイルを初期化する必要があり、一般的にすべてのウェブサイトは、淘宝網、京東などの大規模なウェブサイトとして、開発前に初期化され、独自のスタイルの初期化CSSファイルを持っています。たとえば、次のようになります。

XML/HTMLコード 内容をクリップボードにコピーする
  1. html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {。  
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  6. <スパン fieldset、img、input、button {。  
  7.     border: none;   
  8.     padding: 0;   
  9.     margin: 0;   
  10.     outline-style: none;   
  11. }   
  13. <スパン ul, ol {   
  14.     list-style: none;   
  15. }   
  17. /*元のスタイルから小さな黒い点を削除する*/   
  18. input {   
  19.     padding-top: 0;   
  20.     padding-bottom: 0;   
  21.     font-family: "SimSun", "宋体".Font-family:SimSun"。  
  22. }   
  24. select, input {   
  25.     vertical-align: middle;   
  26. }   
  28. /*入力された単語のセンタリング*/   
  29. select, input, textarea {   
  30. <スパン     font-size: 12px;   
  31.     margin: 0;   
  32. }   
  34. /**/   
  35. テキストエリア {   
  36. <スパン     resize: なし。  
  37. }   
  39. /*ドラッグ防止*/   
  40. img {   
  41.     ボーダー 0;   
  42.     vertical-align: middle; /* 画像下部のデフォルトの3ピクセルのギャップを削除します */   
  43. }   
  45. テーブル {   
  46.     border-collapse: collapse; /*外部リンクをマージ*/   
  47. }   
  49. ボディ {   
  50.     フォントを使用します。12px/150% Arial, Verdana, "\b8b4f53" /*unitedCode's writing style, Song's writing style*/   
  51.     色になります。#666; /*現在のフォントサイズに基づく150%の行間スペース*/   
  52.     背景 #fff。  
  53. }   
  55. .clearfix:before、.clearfix:after {。  
  56.     /* clearfloat, 最高で標準的な書き方です */.   
  57.     content: ""。  
  58.     display: テーブル。  
  59. }   
  61. .clearfix:after{。  
  62.     clear: both;   
  63. }   
  65. .clearfix{。  
  66.     *zoom: 1; /*IE/7/6*/ /*IE6での記述に互換性があります*/。  
  67. }   
  69. a {   
  70.     color: #666;   
  71.     text-decoration: none;   
  72. }   
  74. a:hover {   
  75.     color: #C81623。  
  76. }   
  78. h1, h2, h3, h4, h5, h6 {.   
  79.     text-decoration: none;   
  80.     font-weight: normal;   
  81.     font-size: 100%;   
  82. }   
  84. s, i, em {   
  85.     font-style：ノーマル。  
  86.     text-decoration: none;   
  87. }   
  89. .col-red{。  
  90.     color: #C81623 !important;/*京東方神起のメインカラー*/   
  91. }   
  93. /*public class*/   
  94. .w {   
  95.     /* エディションハート抽出 */   
  96.     width: 1210px;   
  97. <スパン     margin: 0 auto;   
  98. }   
  100. .fl {   
  101.     float: left;   
  102. }   
  104. .fr {   
  105.     float: right;   
  106. }   
  108. .al {   
  109.     text-align: left;   
  110. }   
  112. .ac {   
  113.     text-align: center;   
  114. }   
  116. .ar {   
  117.     text-align: right;   
  118. }   
  120. .hide {   
  121.     display: none;   
  122. }  

これにより、開発者は個々のタグのスタイルを初期化し、パブリック・クラスを再利用することが容易になります。

4. サイト構造の分析

また、ホームページを作るときの規範や一般的なルールがあります 

レイアウトは上から下、左から右の順が一般的です

ページを書くときは、一般的に標準的なフロー要素を使うことを考え、フロートやポジショニングは二の次にしましょう。

標準的なフロー要素としては、幅と高さが一番安定しているので、実はパディングを使ってもいいし、最後にマージンを使ってもいいかもしれませんね。

当サイトの構造上、どのタグもボックスモデルとみなすことができ、widthとheightに設定することができますが、一部の要素はwidthとheightに設定しても機能しません。

インライン要素の幅と高さを機能させるために。

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

2.オフターゲットをフロートさせる  

3.オフラベルの位置

インラインブロック要素をレイアウトする場合、インラインブロック要素間に数ピクセルのデフォルトの間隔があります。この数ピクセルの間隔は、floatを使用することで初めてクリアすることができます。

ポジショニングには4つのタイプがあります。

固定 絶対 相対 静的

一般に、Webサイトの構造を分析する場合、Firefoxでページのスクリーンショットを撮り、以下のように保存します。

そして、fireworksを使って、サイト内の特定のコンテンツの幅、高さ、色などを抽出することができる。

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

I ドロッパーツール 色を吸収する

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

Z拡大鏡ツール  

V 移動

ポインターツール

よく使われる複合属性

背景

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

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

2. クリア：両方

3.オーバーフロー：hiddenはBFCモードをトリガーし、フロートをクリアするためにも使用できます。

4. 擬似要素またはダブル擬似要素の削除

XML/HTMLコード 内容をクリップボードにコピーする
  1. .clearfix:before、.clearfix:after {。  
  2.     /* クリアフロート、最も標準的な書き方です*/。  
  3.     content: ""。  
  4. <スパン     display: テーブル。  
  5. }   
  7. .clearfix:after {   
  8.     clear: both;   
  9. }   
  11. .clearfix {   
  12.     *ズーム 1; /*IE/7/6*/ /*IE6での記述に互換性があります*/。  
  13. }   

(フロートをクリアするための疑似要素として一般的によく使われるものです）

位置決め要素の階層構造の問題

trbl値を書かずに要素だけ絶対位置指定した場合、元の位置で表示されてしまう

位置決めされた（相対的および絶対的または固定的）要素には、階層的な特性または概念があります。複数の要素が同じ場所で隣り合って配置されている場合、デフォルトでは後に配置された要素が先に配置された要素をオーバーライドします。同じ要素が配置されている場合、デフォルトでは、後の要素が前の要素を上書きする以外は、すべて階層が0になります。現在の要素を後の要素より上に表示させたい場合は、z-indexを使用して階層を変更する必要があります。

z-indexは0〜99999999で、できれば正の数、ただし負の数は使わないでください。

また、position:relativeは標準的なストリームで位置を占め、他のコンテンツがそのレベルに表示されるのを防ぐことに注意してください。
透明度(Transparencyopacity)

不透明度：互換性の問題があり、背景色だけでなく、その中のコンテンツも透明になる

background: rgba(0,0,0,.3);

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

隣接する要素の階層化

タオバオのページでマウスオーバー後にボーダーが点滅する効果

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン < スタイル >
  2. <スパン         * {   
  3.             margin: 0;   
  4.             padding: 0;   
  5.         }   
  6.         div {   
  7.             width: 200px;   
  8.             height: 500px;   
  9.             ボーダー 10px solid blue;   
  10.             float: left;   
  11.             /*margin-right: 10px;*/   
  12.             margin-left: -10px;   
  13.             position: relative; /* 位置指定された要素はデフォルトで階層の概念を持ち、デフォルトの階層は0*/となります。  
  14.         }   
  15.         div:hover {   
  16.             border-color: red;   
  17.             position: relative;   
  18.             z-index: 1;   
  19.         }   
  20. <スパン </ スタイル >
  21. <スパン <スパン </ ヘッド >
  22. <スパン <スパン <

    本体 >
  23. <スパン <スパン <

    ディブ > </ ディブ >
  24. <スパン <スパン <

    ディブ > </ ディブ >
  25. <スパン <スパン <

    ディブ > </ ディブ >
  26. <スパン <スパン <

    ディブ > </ ディブ >
  27. <スパン <スパン <

    ディブ > </ ディブ >
  28. <スパン <スパン </ 本体 >
  29. <スパン

これにより、隣接する要素の階層を ホバー 擬似要素でボーダーの色などをコントロールし、タオバオのような効果を実現します。

以上、簡単なhtmlとcssの使い方を紹介しましたが、参考にしていただき、スクリプトハウスを応援していただければと思います。

元の投稿は、http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.html にあります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します