実際には、これらの機能は、JS、CSSが得ることができる必要はありません。

直接タイトルへ

  1. 各単語の最初の文字が大文字
    事実を私が最初にこの機能を見て、それがこの機能を実現するために使用JS、でも想像CSSは、この機能を実行することができます。直ちにPidianpidian書き込み方法:
    機能capitalizeFirst(STR){
    LET結果= '';
    = str.toLowerCase結果()に置き換え(/(| ^)[AZ] / G、(L)=>。 L.toUpperCase());
    戻り結果は
    }
    このメソッドに記述されたコードをコピーした後、小さな誇りがあり、また、他のプログラムを考えました。1日まで、CSSは、私は明らかにCSSの問題を解決することができる反応できる前に、この機能を行うことができます参照してください、私は、より複雑なプログラムを使用します。
    次のようにCSS方式がある:
    .capitalizeFirst-CSS {
    テキスト変換:大文字;
    }
    コードをコピーして(上記のコードリポジトリのブログへのアクセス経路では、次の場合は、ルートcssDoであることができる)は、特に単純ではありません。

実際には、これらの機能は、JS、CSSが得ることができる必要はありません。

簡単なテキスト変換

これは、CSS2のプロパティであり、パラメータは大文字で|大文字|小文字|なし

パラメータ説明:

なし:デフォルト。小文字と大文字の規格で定義されたテキスト。
活用:テキストは、各単語は大文字で始まります。
大文字:大文字のみを定義しました。
小文字:大文字の定義がありません、小文字のみ。

我々はすべて大文字(小文字)を知ることができ、このプロパティからこのプロパティは容易に達成することができる必要があります。

  1. ラジオは強調して
    、「ラジオが強調され、」すぐにあなたの写真に直接明確では反応しなかったあなたが表示されることがあります。

image.png

私は、あなたが最初にどのように対処する際に、このような無線の必要性が強調されましたかどうかわかりません。私が直接JSによって制御された最初の時間。その後、私はCSSでこの要求を処理する方が便利見つけました。
コードの主部分は、CSSコードである:
//コード、コード・リポジトリにおける詳細な外観の一部省略
.input:.colorsチェック+ {
ボーダーカラー:#e63838;
色:#e63838;
}

<DIV CLASS = "SINGLE-チェック">
<INPUTクラス= "INPUT"タイプ= "ラジオ"名前= "色"値=」1" >
<DIV CLASS = "色">スカイ環境</ DIV>
</ div>の
結果を確認するためのコードをコピーします。

画像

2つのセレクタの違い
-セレクタ:要素の背後にあるすべての兄弟を探します

  • セレクター:すぐに兄弟の後ろに要素を探す
    拡大
    実際には、この技術は、ナビゲーションバーのインタラクティブな効果にも使用することができ、個人的に私は仕事の一部を簡略化することができると感じています。
    図3は、高疑問複数の列には、
    顧客の需要の絵の終了前に、PCの操作を行い、双方が(コンテンツの変化に伴って変化する左側のブロックの高さ)要求されるまで待機する必要が会いました。
    当初、私はJSを使用して、割り当ての高さを計算するが、このページでは効果が点滅します。だから我々は2つのCSSの治療プログラムを見つけます:

各カラムは、大きなパディングを設定し、大きなマージン負設定されている
使用して表示:テーブルと、

最初の明白な欠陥:

border-bottomが表示されていない
2は、設定の底がなくなっている丸め

だから私は、ディスプレイを使用:テーブルと、高い達成するための方法は、非常に便利なことができます。

矛盾テーブルにふけるしないことをお勧めし、いくつかのシーンは、まだ使用することができます。

図4に示すように、フォーム検証

最初の文:そこには使用JSはありませんが、<入力>の上で新しいHTML5属性を使用- (正規表現の制御値を確認してください)パターン。
もう一つのポイント:私は実際にそう実際のプロジェクトで使用されていません。

代码如下:
入力[タイプ= "テキスト"]:無効〜入力[タイプ= "提出"] {
表示:なし
}

<DIV CLASS = "フォーム-CSS">
の<input type = "text"の名= "電話"プレースホルダ= "電話番号を入力してください"パターン= "^ 1 [3456789] \ {D} $ 9"が必要> <BR>
<入力タイプ= "テキスト"名前= "smscode"プレースホルダ= " PINを入力し、"パターン= "\。4 {D}"> <BR>必要
<入力タイプ= "送信"> </ INPUT>
</ div>
コードをコピー結果は次の通り(スタイルが良いの質問を見ていない、無視してください)、次のとおりです。

画像

無効な擬似クラスと擬似クラスvaild
検証要素パターンマッチングによって有効な擬似クラス、
無効疑似クラスは、整合素子は、パターンによって確認されていません

おすすめ

転載: blog.51cto.com/14484771/2433356