シンプルなノートCSSのドロップダウンメニューとポップアップフォームやレイヤー

ドロップダウンメニュー

表示:ブロック、ボックスの収縮によって囲まれた要素を満たすために拡大するには、親要素となる
位置:親要素の絶対位置に対する絶対座標は、プルダウンメニュー整列されるように、親要素に対するものです

CSSコードをクリップボードにコピー

  1. .menuリチウムUL {
  2. 表示ブロック;
  3. 位置:絶対;
  4. 左:0;
  5. トップ:100%;
  6. }

フォーム

タイプの入力:
テキスト:基本的な単一行のテキストボックス。
パスワード:テキストをマスクとして表示されます。
チェックボックス:チェックボックスをオンにします。
ラジオ:ラジオボタン。
提出:フォームの送信ボタンを。
時間、日付、検索:バリアントHTML5のテキストボックスを。
複数行のテキストボックスのTextArea
ドロップダウンリストを生成するためにSELECT要素、生成されたオプションのテキスト要素と各候補オプション
フロートと(例えば、インライン要素として)スパンを使用して、効果の配置のレベルに達することができるが、問題をどのように選択するか
、カーソルを:点要素を置くであろう小さな手のカーソルの変更
の遷移は遷移を追加し、遷移は、5つの属性があります
遷移プロパティ、遷移CSSプロパティ名、色、幅など;
遷移期間、遷移の持続時間を、秒またはミリ秒単位で設定されている、例えば2Sため、 500msの、
遷移タイミング機能、高速遷移関数は、滑らかなアニメーションは、最初に低速でもあるか否かを判断
した後スローダウンは、使いやすさで、容易にアウトなど、容易にインアウトまたはリニア(デフォルト値)
;遷移遅延、秒またはミリ秒の遷移の開始までの時間遅延は、例えば、LS、200msのためのセットであり、
遷移、遷移簡略性、例えば遷移:色2S容易インの1ms ;。

フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。

CSSコードをクリップボードにコピー

  1. 入力{ボーダー色:黒; 遷移:ボーダー色2S;}
  2. 入力:フォーカス{ボーダー色:緑;}
  3. //遷移プロパティを使用している場合、すべてのブラウザのベンダープレフィックスを追加するには注意してください。
  4. //接頭語版を追加
  5. 国境半径:10pxの; -webkit-遷移:2S幅。

ポップアップ

CSSは、z屈折率特性を有し、制御要素の文脈における積層順序が使用されます。換言すれば、積層された要素のシーケンスにより、デフォルトを変更することができます。z屈折率の値が大きい要素は、要素の階層上記スタックにおける小さいz屈折率の値に配置されました。Z-index属性の値は0に任意の大きな値であってもよく、負であってもよいが、一部のブラウザでは信頼性がありません。デフォルトでは、すべてのスタック要素のzインデックスが0に等しい自動車です。

公開された38元の記事 ウォンの賞賛4 ビュー20000 +

おすすめ

転載: blog.csdn.net/html886/article/details/104524568