強力な HTML_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:44:53
オリジナル
3541 人が閲覧しました

HTMLの基本タグ(1)

1. HTMLとは

html: Hyper TextMakeup言語: ハイパーテキストマークアップ言語

html: Webページの「ソースコード」

ブラウザ: HTMLソースの「解釈と実行」コード ツール

2. Web ページの概要情報

Web ページの概要情報は、ブラウザ分析と検索エンジンの検索に役立ちます:

2.1 タグを使用します </p> <p><head></p> <p><tlite>最大のポータルウェブサイト&lt;/gt;</p>&lt;/head&gt; 3. HTMLページのブロックと行<p>HTMLタグ分類(後続のレイアウトデザインを促進するため)</p>‐ 's<p></p> <p>‐ ‐ ‐ - - - ブロックレベルタグ:</p>の前後の1行で「ブロック」として表示されます<p>:ブロックレベルと行レベルのタグの違い:</p>ブロックレベル:1つのラインで表示レイアウトで一般的に使用されるレベル タグ、ブロック レベル タグ <p> </p> 基本ブロック レベル タグ: <p> </p>001.Title タグ<p> </p><h1>Title</h1><p> </p>…<p> </p><h6>Title</h6><p> </p>h1 が最大、h6 が最小です<p> </p> 002 .段落タグ <p> </p><p>...</p><p> </p> 003. 水平線タグ <p> </p><hr/><p> </p> ブロックレベルレイアウトで一般的に使用されるタグ: <p> </p>001. 順序付きリスト タグ <p> </p><ol><p> </p> <li>リスト項目 1</li><p> </p></ol><p> </p>002.順序なしリスト タグ<p> </p>< ul><p> </p> <li>リスト項目 1</ li><p> </p></ul><p> </p>003 説明タグを定義します (グラフィックとテキストの混合によく使用されます)<p> </p><dl><p> </p><dt>タイトル</dt><p><dd>説明1</dd></p> <p></p> <p>「#」></p> <p>...</p></form><p></p> <p></p>007。 v<p> </p>キーポイント: 通常、構造化されたブロック要素として使用され、論理パーティション (ブロック) またはコンテナーとして使用されます。 <p> </p> <p> </p>04. 実際の開発でよく使われる4つのブロック構造を教えてください。 <p> </p> 01.div-ul(ol)-li: カテゴリ ナビゲーションやメニューなどによく使用されます。 ... フォームのレイアウト <p> 5 505。行レベルのラベル </p> 001、画像ラベル <p> & & lt; img src = "画像アドレス" alt = "プロンプト テキスト" title = "プロンプト テキスト" & gt;プロンプトテキストが確実に表示されるように Title 属性を使用することをお勧めします </p> <p> alt: 画像が表示されていない場合、画像上に表示されるテキスト </p> Title: 画像上に表示されるテキスト 002 上にマウスが留まります <p> 002. :Show特定の行内の固有のスタイル</p> <p> <span>テキストなどの行レベルのコンテンツ</span></p> <p>003. 改行タグ<br/></p> <p> </p>06. w3c 標準が必要なのはなぜですか? <p>w3c:World Wide Web Consortium、World Wide Web Consortium </p> <p>W3C の機能: Web 業界標準の策定と維持を担当します </p> <p> W3C が提唱する Web 構造: </p> <p>1. コンテンツ (構造) とパフォーマンス (スタイル) の分離 </p> <p> 2. HTML コンテンツ構造にはセマンティクスが必要です </p> <p>07. 文書型宣言を追加する必要があります </p> <p>文書宣言は文書の先頭にある必要があります: Strict (厳密型)、Transitional (移行型) の 3 つのレベルがあります。 , Frameset(フレームタイプ) </p> <p> </p> <p> HTML基本タグ(2) </p> <p>01.ハイパーリンク--ページ間のナビゲーションを実現します</p> <p>構文: <a href="リンク アドレス" target="ターゲット ウィンドウの位置">ホット テキストまたは画像をリンク</a></p> 例: <p> </p>02. 相対パス: 現在のディレクトリからの相対アドレス。一般的に使用される <p> </p><a href="login/login.htm">Login</a><p> </p>絶対パス: ターゲット アドレスの完全な説明を指し、使用数は少なくなります <p> </p><a href="memAdmin/ログイン/ログイン.htm">ログイン</a><p> </p><a href="http://www.sohu.com">Sohu</a><p> </p>重要: 上部にアクセスしたい場合は、現在のパスのレベル パス ../<p> </p> <p> 03. ハイパーリンクの 3 つのアプリケーション </p> <p>002. アンカー リンク </p> <p> 001. ページ間のリンク </p> <p> href="login/login.htm">[ログイン]</a></p> <p> 適用される場面: Web サイトのナビゲーションによく使用されます</p> <p> 002. アンカーリンクの実装 (同一ページアンカーリンクとページ間アンカーリンクに分けられます) ) </p> <p> 同じページへのアンカー リンク: </p> <p> 1. タグ (アンカー) を定義します: <a name="タグ名">ターゲット位置</a></p> <p> 2. タグの位置へのリンクを設定します: <a href="# タグ名">現在地</a></p> <p> 該当する場合: ページのコンテンツが大きく、1 画面を超える場合に適しています</p> <p> ページ間リンク: </p> <p> 1.タグの位置: <a name=" タグ名">[スターゾーン]</a></p> <p> アンカーリンクは同じページまたはページをまたいで使用できます </p> <p> 2. マークされた位置にリンクを設定します: <a href="anchor.html#star"> ;セレブエリア</a></p> <p> 003. 機能リンク</p> <p>電子メール、QQ リンクなど</p> <p>書くべき...</p> <p>04.コメント</p> <p><!--コメント内容--!></p> <p>はコメントされています。行はコードの可読性を高めるために使用されており、</p> <p>05は表示されません。特殊記号</p> <p>スペース: </p> <p>より大きい: > ;</p> <p> 以下: <</p> <p>引用符 ("): "</p> <p>著作権番号 (): ©</p> <p> <、> などの記号は HTML で使用されているため、他の記号に置き換える必要があります。すべて; で終わります。 </p> <p> </p> <p>06. 共通のフォーム要素 </p> <p> 単一行テキスト ボックス (テキスト) </p> <p> パスワード ボックス (パスワード) </p> <p><textarea></textarea></p> <p>ラジオボタン(ラジオ)</p> <p>チェックボックス(チェックボックス)</p> <p>送信ボタン(送信)</p> <p>ドロップダウンリスト(選択)</p> <p><select></p> <p><option vlalue=”1”>1月</option> </p> <p></select></p> <p>リセットボタン(リセット)</p> <p> </p>07. フォームの基本構文<p> </p><form action="フォーム提出先アドレス" method="提出方法">: 提出は2つだけですメソッド: 投稿と取得<p> </p> テキスト ボックスやボタンなどのフォーム要素<p> </p></form><p> </p> アクション: 送信後に送信を処理するサーバー上のハンドラーを指定します<p> </p>メソッド: サーバーに送信するメソッドを指定します: 通常は post メソッドまたは get メソッドですが、post メソッドの方が安全です。 <p> </p>08. フォームの実行原理<p> </p>クライアント: ログインを要求し、フォームを通じてアカウント情報を入力します<p> </p> クライアントとサーバーは通信する2人のようなものであり、それによってインタラクティブなアクティビティが確立されます<p> </p>サーバー: アカウント情報を確認します送信してから、フィードバックを送信してください。 <p> </p>09. フォーム要素の基本フォーマット<p> </p><input name="フォーム要素名" type="タイプ" value="値" size="表示幅" maxlength="最大長"checked="選択有無"/ ><p> </p>10. フォーム要素を一つずつ紹介<p> </p>テキストボックス<p><input name="name" type="text" value="初期値" size="number"></p> <p>nameを使用サーバー側でデータを取得します。例: request.getParameter("userName")</p> <p>Password box</p> <p><input name="name" type="password" value="initial value" size="number"> </p> <p>button</p> <p> <input name="名前" type="ボタンの種類" value="ボタンのテキスト" src="画像ボタンの画像URL"></p> <p>通常ボタン: button</p> <p>送信ボタン: submit</p> <p>リセット(クリア)ボタン:リセット</p> <p>写真ボタン:画像</p> <p>ラジオボタン</p> <p><input name="グループ名" type="radio" value="text" selected="..."></p> <p>同じ名前は同じグループに属していることを示します</p> <p>特徴: 単一選択</p><p> チェックボックス</p> <p><int type="checkbox" name=" "value=" " selected=" "></p> <p>機能: 複数選択</p> <p>ファイルフィールド</p> <p><input type="file" name= "" ></p> <p>例:<p><input type="file" name="files"/><br/></p> <p><input type="submit" name="upload" value ="アップロード"/></p></p> <p><select name="リスト名を指定" size="行数"></p> <p><option value="オプション値" selected="選択済み"> 。 ..</option></p> <p></select></p> <p>機能: ユーザー入力エラーを回避するための固定オプションを提供します</p> <p>複数行のテキストボックス</p> <p><textarea name=""cols="列幅" rows= 「線幅」></p> <p>テキストコンテンツ</textarea></p> <p> </p> <p>隠しフィールド</p> <p> サーバーがクライアントの情報を「記憶」するのは便利ですが、クライアントにデータを見られることは望ましくありません </p> <p> < ;input type= "hidden" name="" value=""></p> <p> </p> <p>読み取り専用属性と無効な属性</p> <p>readonly: 特定のボックス内のコンテンツはユーザーのみが表示でき、変更できないことを望みます</p> <p>無効: 使用条件が満たされていないため、ユーザーの使用を制限します </p> <p> </p> <p><textarea name="content"cols="60" rows="8" readonly="readonly"></p> <p>へようこそ利用規約、Guimei の権利と義務を読みます</p> <p>< /textarea><br/><br/></p> <p>上記の契約に同意します<input name="agree" type="checkbox"/ ></p> <p><input name="btn" type="submit " value="Register" disabled="disabled"/></p> <p> </p> テーブルのアプリケーションとレイアウト <p> </p>1. テーブルを使用する理由<p> </p>テーブルの一般的なアプリケーション: <p> </p>01 フォーラム <p> </p>02. ショッピング Web サイト <p> </p>03. ポータル アプリケーション フォーム <p> </p> <p> </p> テーブルの基本構造 <p> </p> 行、列、セル <p> </p>特徴: 通常この場合、同じ行の高さ、同じ列の幅は同じです <p> </p> <p> </p>3. テーブルの基本構文 <p> </p><table><p> </p><tr><p> </p>< td>百度</td><p> </p><td>新那</td><p> </p><tr><p> </p><tr><p> </p><td>Google</td><p> </p><td>56 ネット< ;/td><p> </p>< /tr><p> </p></table><p> </p> <p> </p> <p> </p> <p>テーブルを作成するには? </p> <p><table> はテーブルの先頭を表し、border="2" は境界線の幅が 2 であることを意味します</p> <p> </p>4. テーブルは行と列にまたがります (強調、強調!!!) <p> </p> 列をまたぐ方法<p> </p> ;td>数学< ;/td><p> </p> <p> </p> <p> </p>rowspan 属性は、行数を示します <p> </p> <p> </p>5. テーブルの詳細ラベル <p> </p>テーブル タイトル: <caption> <p> </p>ヘッダー: <th><p> </p>ヘッダー: <thead><p> </p>データ件名: <tbody><p> </p>フッター: <tfoot><p> </p> <p> </p>6. テーブルレイアウト<p> </p>グラフィックの実装方法そしてテキストレイアウト? <p> </p>実装手順: <p> </p>01. 行と列の数を決定します: 5 行 2 列 <p> </p>02. 5 行 2 列のテーブルを作成します <p> </p>03. 行と列にまたがるセルを決定します: <p> </p> 1行、1列、セルは2列にまたがります <p> </p> 2行と1列のセルは4行にまたがります <p> </p>04. rowspanとcolspanを追加して、冗長なセルを削除します。 <p> </p> <p> </p><table border="1px"><p> </p> <tr><p>&lt; td rowspan = "4"&lt; ;/tr> </p> <p> </p>< ;/table><p> </p> <p> </p> 7. フォームレイアウトを実装するには? <p> </p> レイアウトにテーブルを使用する場合、データを表示するための要件は何ですか?実装のアイデアは何ですか? <p> </p> 使用場面: データ表示要件は定期的であり、テーブル レイアウトの特性と一致しています <p> </p> レイアウト実装のアイデア: <p> </p> 01. テーブルの行と列は何行必要ですか? <p> </p> 02. 行または列にまたがるセルはどれですか? <p> </p> 03. 実装するテーブル コードを作成します <p> </p> <p> </p> 注: 1. 同じ列内のセルの幅は、その列内で最大の幅を持つセルによって決まります <p> </p> 2. 同じ行内のセルの幅は行内で最も高い高さのセルによって決定されます <p> </p> <p> </p> 8. ネストされたレイアウト <p> </p> ネストされたテーブル レイアウトの欠点: <p> </p> 01、大量のコード <p> </p> 02、階層構造が比較的複雑 <p> </p> 03、役に立たないGoogle やその他の検索エンジンでデータを検索して見つけるため <p> </p> 9. テーブル レイアウトが適しています 用途: <p> </p> 01、通常のデータ表示 <p> </p> 02、フォーム ページ <p> </p> ヒント: テーブル レイアウトは、不規則で複雑なページには適していません。この場合 <p> </p> DIV+CSS レイアウトを使用する必要があります <p> </p> <p> </p>フレームワーク <p> </p>1. フレームを使用する理由<p> </p> フレームの 2 種類の使用: <p> </p> 01. マルチウィンドウ ページの表示 - <frameset> フレームセットを使用します <p> </p> 02. ページの再利用 - <iframe/> を使用します <p> </p> <p> </p> 2.フレームファイル<p> </p> 複数のページファイルで構成されています<p> </p> メインファイル(index.html): <p> </p> 01.top.html 02.left.html 03.right.html<p> </p> <p> </p> 3. フレームの基本構造 <p> </p>フレーム Web ページを作成する手順: <p> </p> 01. 各サブウィンドウに対応する HTML ファイルを作成します <p> </p> 02. フレーム ページ ファイル全体を作成し、サブウィンドウ ファイルを参照します <p> </p> フレーム ページの基本構文: <p> </p> &lt; frameset cols = "25%、50%。左、中央と右側の3部は、2つの部品に分割するために、Out Out Off Off Off -Off -Off -Off -‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ Outを使用して使用して使用して使用して使用しています。 <p> , *" border="5"></p> <p> <frame src="subframe/the_first.html" name="top" /></p> <p> <frame src="subframe/the_first.html" name=" middle" /></p> <p> <frame src="subframe/the_third.html" name="bottom" /></p> <p></frameset></p> <p><noframes></p> <p> <body>フレームはサポートされていないため、本文のコンテンツのみが表示されます </body></p> <p></noframes></p> <p> 注: 01. フレームと本文は共存できません</p> <p> 02. 互換性のために、<noframes> を使用できます。タグ </p> <p> でウィンドウを水平に分割します :</p> <p> <framesetcols="200,*,200" border="5" bordercolor="#FF0000"></p> <p> <frame name="leftFrame" src="subframe/ the_first.html" /> </p> <p></p> <p></p> <p></p> <p>フレームマルチウィンドウページを実装します。 "name =" leftframe "scrolling =" no "</p> <p> </p> <p> </p> <p> & & LT; Frame SRC =" Subframe/Rightml "Name =" Rightframe " /& Gt; </p> & lt;/Frameset & GT ;<p> </p> < ;/frameset><p> </p> <p> </p> ウィンドウ間の関連付けを実現する方法: <p> </p> 01. ウィンドウ名 (フレームのホームページ) を設定します <p> </p> <frameset rows="20%,*" farmeborder="0"> <p> <frame src="subframe/right.html" name="rightFrame"></p> <p> href="buy.html" ">Go for a</a></p> <p> リンクを次のように設定します右側のウィンドウで開きます </p> <p> </p> <p> target のその他の使用法: </p> <p> 新しいウィンドウで表示: _blank</p> <p> 独自のウィンドウで表示: _self</p> <p> 上位ウィンドウで表示: _top</p> <p> 親ウィンドウで表示: _parent</p> <p> </p> <p> 3. <iframe/>を使用する理由</p> <p> 01.<frameset> は複数のファイルを使用する必要があり、ディレクトリ構造が複雑です </p> <p> 02. 埋め込みはより柔軟で、Web ページのどこでも使用できます </p> <p> 03. このウェブサイトの複数のページでテンプレートとして再利用できます </p> <p> </p> <p> iframe の基本的な使い方 </p> <p> <iframe src ="参照ページアドレス" name="フレーム識別名"</p> <p> Frameborder=" border"scrolling="no"></p> <p> 注: <frameset> とは異なり、iframe は <body> タグ内に配置されます</p> <p> </p> <p> 共通プロパティ </p> <p> インライン ウィンドウ表示の設定方法 </p> <p> <a href ="subframe/the_third.html" target="mainFrame"></p> <p> 以下の 3 ページ目を表示します </p> <p> </a></p> <p> <iframe name="mainFrame" width="800px" height="150px"</p> <p>scrolling="yes" noresize="noresize"</p> <p> src="subframe/the_second.html"/> </p> <p> </p> <p> CSS スタイル テーブル (1) </p> <p>1. CSS スタイル シートを使用する理由</p> <p>CSS フルネーム (カスケード スタイル シート) </p> <p> </p>スタイル シートはコンテンツとスタイルを分離できるため、チーム開発が容易になります<p> </p>スタイルの再利用により、Web サイトの事後メンテナンスが容易になります<p> </p>美しく複雑なページを実現するためのページの正確な制御<p> </p> <p>説明: CSS はページを美しくするために使用され、ページ要素のより詳細な設定を行うことができます。スタイルは主に要素のフォントの色、背景色、境界線などを記述します。 </p> <p>2. CSSの目的</p> <p> </p>外観の美化<p> </p>レイアウト、配置<p> </p> CSSの基本構文: <ol> <li> <head></li> <li><style type="text/css"></li> <li>セレクター (それは変更されたオブジェクトです) {</li> </ol> オブジェクトの属性 1: 属性値 1; <p> </p> オブジェクトの属性 2: 属性値 2 <p> </p>}<ol> <p>      </style></p> <p>  <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div></p> <p>例子:</p> <p>  Li</p> <p>{</p> <p>  Color:red;</p> <p>  Font-size:30px;</p> <p>  Font-family:隶书;</p> <p>}</p> <p>  3.选择器的分类</p> <p>  选择器分为:标签选择器、类选择器、ID选择器(重点)</p> <ol> <li>标签选择器</li> </ol> <p><style type=”text/css”></p> <p> Li{</p> <p>   Color:red;</p> <p>   Font-size:28px;</p> <p>   Font-family:隶书;</p> <p>} </p> <p></style></p> <p>作用:用于修饰同类HTML标签的共同风格</p> <ol> <li>类选择器</li> </ol> <p><style type="text/css"></p> <p>         .blue{color:blue;}                </p> <p>        ……</p> <p></style></p> <p>    ……</p> <p><ul></p> <p><li class="blue">家用电器</li></p> <p><li>各类书籍</li></p> <p><li class="blue">手机数码</li></p> <p><li>日用百货</li></p> <p></ul></p> <p>注意:类名有点号</p> <ol> <li>ID选择器</li> </ol> <p>    <style></p> <p>#menu{</p> <p>    width:200px; background:#ccc;</p> <p>    font:bold 14px 宋体;</p> <p>}</p> <p></style></p> <p>… …</p> <p><div id="menu"></p> <p>  <ul></p> <p>    <li>家用电器</li></p> <p>   ……</p> <p>  </ul></p> <p></div></p> <p>4.文本属性</p> <p>字体、字号:</p> <p>  Font(缩写形式)</p> <p>  Font-weight(粗细)</p> <p>  Font-size(大小)</p> <p>  Font-family(字体)</p> <p> 行距、对齐等:</p> <p>  Line-height(行高)</p> <p>  Text-align(对齐)</p> <p>  Letter-spacing(字符间距) 我  是</p> <p>  Text-decoration(文本修饰) </p> <p> </p> <p> White-space(空白处理) 属性值:nowrap:不换行</p> <p><style tylie="text/css"></p> <p>li{</p> <p>  font: 12px 宋体;</p> <p>  text-align:left;</p> <p>  line-height:28px;</p> <p> }</p> <p>.title{ </p> <p>  letter-spacing:5px;</p> <p>  white-space:nowrap;</p> <p>  text-decoration:underline;</p> <p> }</p> <p>.bigFont {</p> <p>  font-size:16px;</p> <p>  color:red;    </p> <p> }</p> <p></style></p> <p> </p> <p>5.背景属性</p> <ol> <li>background(缩写形式)</li> <li>background-color(背景色)</li> <li>background-image(背景图)</li> <li>background-repeat(背景图重用方式)</li> <li>background-position(位置坐标、偏移量)</li> </ol> <p> </p> <p>div{ </p> <p>     background:url(images/bg.jpg) no-repeat; </p> <p>     background-position: -70px -60px</p> <p>}</p> <p>6 .背景属性的经典应用</p> <p>图标截取-背景偏移量技术:理解清楚是左移还是右移,然后设置div的宽度和高度以适应图片的显示。</p> <p><html></p> <p><head></p> <p><title>文本属性

 

   

购 物 车

   

 

   

帮助中心

   

&lt;/body&gt;

&lt;/html&gt; -style:circle;一緒にブラッシングを終了する, -Stedyle: Square; ■ ブラシ

10 進数 (& LT; OL & GT; デフォルトタイプ) list-style: 10 進数; 1. ブラシ

共通属性を形成します。

: テキストの色

border-style: 実線の境界線 (デフォルトはなし)、および点線 (点) に相当します

border-color: 境界線の色

border-width: 境界線の幅0)

CSS スタイル表 (2)

1. CSS スタイルの制御方法

ボックスモデル

Web ページ内のすべての要素を 1 つずつボックスとして見ることができます

ボックス モデルには以下が含まれます。

要素の内容

パディング (内側のエッジとも呼ばれます) 間隔):padding

ボーダー: border

ボーダー (外側のマージンとも呼ばれます): margin

スタイル コントロールのアイデア

インボックス スタイルの変更: Web 要素の色、フォント、その他の外観

    ボックスの位置レイアウト: OK ボックスの位置と他の Web ページ要素との関係
  1. 2. ボックス モデルの詳細な説明

box 属性が必要な理由

1. ボックス モデルは Web ページ レイアウトの基礎です

2. ボックス属性はボックス モデルのキー属性です

  1. マージン (外側の距離) /boundary)

各属性は 4 つの方向に分割されます

Margin-top

Margin-Right

Margin-BOTTOM
  1. Margin -left
Margin: 1px, 2px, 3px, 4px (各値は次のとおりです)右、下、左、時計回り)

マージン: 値 1、値 2、値 3; (意味: 上が値 1、左と右の値が 2、下が値 3)

マージン: 1px,2px; (意味: 上下の値が 1、左右の値が 2)
  1. Margin:0 auto; つまり、上下です。は 0、左右は自動で、中央に表示するには HTTP ヘッダー プロトコルが必要です。
    1. Margin: value 1; (意味: 上、右、下、左はすべて値 1)。 -left: 1px;
Border (ボーダー)

変更属性:

Border-color

Border-width

Border-style

-top

Border-right

Border-bottom

Border -left

一般的なアプリケーション

Border-style:none;

Border:1px 実線赤;

Border-right:5px 点線青;

(実線、点線、点線)

border 属性を使用するフォームを変更するには

< /head>

名前:

パスワード:

Padding (Padding/Padding)

Padding 属性

Padding

Padding-top

Padding-right

Padding-bottom

Padding-left

3. 要素の幅 High と実際の占有領域

実際の要素の占有率(実際の幅と高さ)

ボックスの高さ = 高さ属性 + 上下のパディング高さ + 上下の境界線の高さ(上下 2 つ)

ボックスの幅 = width 属性 + 左右のパディング幅 + 左

4 . DIV+CSS レイアウトを実装するには box 属性を使用します

5. float 属性が必要な理由

float 属性を使用すると問題を解決できます。 2 つのレイアウトを並べて表示することはできません

02. float 属性とは

いわゆるフロートとは、通常のドキュメント フローから離脱して、右または左に浮いているように見えるラベルです

デフォルトの通常のドキュメント フロー: ページのコンテンツは上から下、左から右の順に配置され、DIV ブロックは新しい行に表示されます。

03、フローティングの 3 つの重要な特徴

1. DIV ブロック要素は、「ブロックのような」行折り返し表示特性を失い、インライン要素になります。

2. 前のフローティング要素(同じ方向)または親要素の境界線に近い場合、幅が足りない場合は新しい行に表示されます。

3. インライン要素のスペースを占有し、インライン要素が

の周囲に表示されるのはなぜですか? デフォルトでは、3 番目の div はウィンドウ サイズに応じて折り返すかどうかを決定します。ラップするには、clear Separation 属性を使用できます。

Clear 属性とは何ですか?

Clear 関数: 1. 前の要素が左または右に浮いている場合は、新しい行で囲んで区切ります。

2、ブロックレベル要素にのみ有効

Clear 属性の値

Right

Left

Both

None

CSS スタイルシート (3)

1. ハイパーリンクスタイルの特徴

01. 特殊な特徴ハイパーリンクスタイルの式

テキストまたは画像とリンク、元のスタイルのスタイルとリンクの継承

02. ハイパーリンクスタイルの 4 つの状態

受け入れられないステータス (A: リンク) (A: 訪問済み)

マウスの移動ステータス ( A: ホバー)

アクティブ化された選択ステータス (A: アクティブ)

注: リンクを追加した後、画像/テキストのスタイルを変更します

画像には境界線が追加され、テキストはテキストに追加されます 次の予定された行

超 2 . ハイパーリンク 擬似スタイル スタイル

はセレクターを使用します: 状態の状態によってスタイルを定義します。一般に擬似 -

擬似カテゴリと呼ばれます サンプルの説明

a: link a: link {color:#999;} 予期しないステータス

A: 訪問済み A: 訪問済み {color:#333;} アクセス状態

A: ホバー A: ホバー {color:#ff7300;} マウスの動き

A: アクティブ {color {color {color :#999;} アクティブ化選択状態(マウスクリックを離していないとき)

3. ハイパーリンクスタイルの設定方法: CSSスタイルの再利用を実装しているため

设置超链接样式的步骤:

      1.确定页面所有超链接的样式是否相同,否则分开定义

      2.先确定四个状态共有样式,再分别定义其他状态

4.如何应用样式

三类应用样式的方式:

      01.内部样式表:

            

            HTML和CSS在同一文件,方便开发时修改,样式和内容分离

            不够彻底,不利于页面复用

      02.外部样式表

                

                分别定义*.css和*.html文件,样式和内容彻底分离,多个网页可以共享同一CSS

       03.行内样式表

               日用百货

               单独定义某个元素的样式,灵活方便。但因为内容与样式混在

               一起,应尽量少用或不用。

5.样式的优先级

     01.各类样式有继承

     02.各类样式的优先级

          由低到高,“近者优先”原则

            1,浏览器默认设置

            2,外部样式表文件

            3,内部样式表

            4,行内样式表

          选择器的优先级

          a=(最高级 )

          b=(ID用到的数目)

          c=(class用到的数目)

         d=(标签用到的数目)

   03.    

    

    

    

 

     选择器优先级的案例

        

    

    

6. 典型的なローカル レイアウト構造

div-ul(ol)-li: 分類されたナビゲーションやメニューなどで一般的に使用されます。

div-dl-dt-dd: 一般的に使用される単語と写真 混合編集の機会

table-tr-td: グラフィックとテキストのレイアウトまたはデータ表示によく使用されます

form-table-tr-td: レイアウト フォームによく使用されます。 U Div-Ul-Li ローカル レイアウト スタイルの変更

実装アイデア: レイアウト構造分析、CSS スタイル分析

7. CSS コード}

アプリケーション スタイル: 複数のクラス スタイル (例:
  • div-dl-dt-dd ローカル レイアウト スタイルの変更

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    < html xmlns="http://www.w3.org/1999/xhtml">

    ; width:235px; ;/dd>

    >

    ;

    a href="#">減量とボディに最適な選択整形

    /html & gt;

    8.CSS 基本シンボル

    (タログ) (Zhachak) (#) (壊れた)

    セレクターの組み合わせ:

    +

    id+space+class+comma

    Li .pic{width:28px ;}

    div#nav{text-align:center;}

    #nav .pic{border:1px;}

    #nav .pic, #nav .text{height:26px;}

    🎜 🎜 🎜 🎜🎜 🎜🎜 🎜 🎜
  • 関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート