コメント:登録フォームはHTML5+CSS3レイアウトを使用して実装されており、その効果は非常に良好です。興味のあるフロントエンドのWebデザイナーはそれを参照できます。私はそれがあなたを助けることができることを願っています
レンダリングは次のとおりです。HTMLソースコード:
<!doctype html>
<html>
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<link href = "css /style.css" />
<スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
</head>
<body>
<div id = wrapper>
<div id = lbl> </div>
<form>
<fieldset id = account>
<伝説>個人情報</legend>
<ラベル= username>アカウント:</label>
<入力ID = username class = textbox type = text name = username required placeholder = "アカウントに入力してください" />>
<ラベル= password1>パスワード:</label>
<入力id = password1 class = textbox type = password name = password1必要なプレースホルダー= "パスワードに入力してください"/>
<ラベル= password2>繰り返しパスワード:</label>
<入力id = password2 class = textbox type = password name = password2必要なプレースホルダー= "パスワードを繰り返してください"/>
<ラベル=電子メール>メールアドレス:</label>
<入力ID =電子メールclass = textbox type = email name = email execly placeholder = "www.csdn.com" />
</fieldset>
<fieldset id = personal>
<伝説>その他の情報</legend>
<label for = website> personal url:</label>
<入力ID = website class = textbox type = url name = website required placeholder = "http://www.example.com"/>
<ラベル= age> age:</label>
<入力id = age class = textbox type = number name = age min = 18 step = 2 pattern = "[0-9] {1,3}" Placeholder = "fill in the age">
<ラベル=給与>月給:</label>
<入力ID =給与クラス=テキストボックスタイプ=範囲名=給与min = 0 max = 50000 step = 500 pattern = "[0-9] {2、}" placeholder = "what what what what what the any many Sal" value = 10000 onchange = "show.value)" />>
<スパンID = rangeValue> 10000 </span>
<スクリプト>
関数showValue(value){
document.getElementById( "rangevalue")。innerhtml = value;
}
</script>
<ラベル=説明>説明:</label>
<TextArea ID =説明名=説明cols = 30行= 5 PlaceHolder = "ここに詳細な説明があります"> </textarea>
</fieldset>
<フィールドセットID =確認>
<入力タイプ=送信値= "submit" />
<div> </div>
</fieldset>
</form>
</div>
</body>
</html>
CSSソースコード:
体{
背景:url(bg.jpg)繰り返し。
フォントファミリー:arial狭い、arial、sans-serif;
マージン:0;
パディング:0;
}
ヘッダー、セクション、フッター{
表示:ブロック;
}
ヘッダ{
幅:100%;
背景色:RGB(0、0、0);
背景色:RGBA(0、0、0、0.9);
色:#ccc;
パディング:15px 0;
レター間隔:1px;
マージンボトム:20px;
位置:相対;
}
ヘッダーH1 {
マージン:0 50px;
Text-Shadow:2px 2px 2px#888;
フロート:左;
}
#backlinks {
フロート:そうです;
マージン:-10px 20px;
ラインハイト:25px;
font-weight:bold;
フォントサイズ:12px;
テキストアライグ:右;
}
#backlinks a {
色:#ccc;
テキスト装置:なし;
マージン:3px 0 0;
表示:ブロック;
}
#backlinks a:hover {
色:#ffff;
}
フッター{
背景色:RGB(0、0、0);
背景色:RGBA(0、0、0、0.8);
高さ:25px;
幅:100%;
ラインハイト:25px;
位置:相対;
フォントファミリー:arial、helvetica、sans-serif;
下:0;
左:0;
色:#888;
フォントサイズ:11px;
}
フッタースパン{
パディング左:20px;
}
フッターA {
色:#1FA2E1;
}
#wrapper {
幅:770px;
マージン:0 Auto;
テキストアライグ:センター;
}
#wrapper hgroup {
マージン:20px 0;
テキストシャドウ:1px 1px 1px #ccc;
}
#Wrapper H1 {
色:#146FA0;
フォントサイズ:42px;
マージン:0;
}
#Wrapper H2 {
色:#71C1ED;
フォントサイズ:27px;
マージン:0;
}
#LBL {
色:#777;
フォントサイズ:17px;
font-weight:bold;
テキストシャドウ:1px 1px 0 #fff;
マージン:10px 0;
}
*:集中{
アウトライン:なし;
}
ラベル、入力、Textarea、Fieldset {
表示:ブロック;
}
fieldset#アカウント、fieldset#personal {
幅:250px;
パディング:0 50px 50px;
マージン:10px;
フロート:左;
背景:RGB(244,244,244);
背景:RGBA(244,244,244,0.7);
-webkit-border-radius:25px;
-moz-border-radius:25px;
ボーダーラジウス:25px;
国境:3pxダブル#999;
}
fieldset#確認{
パディングトップ:10px;
クリア:両方;
国境:なし;
ラインハイト:15px;
マージン:10px 0;
}
フィールドセット#ラベル確認、フィールドセット#入力確認{
表示:インライン;
フロート:左;
マージン:15px 5px 0;
}
伝説{
フォントサイズ:20px;
font-weight:bold;
レター間隔:5px;
色:#999;
マージン左:-20px;
テキストアライグ:左;
パディング:0 10px;
テキストシャドウ:1px 1px 0 #ccc;
}
ラベル{
フォントサイズ:17px;
font-weight:bold;
マージン:17px 0 7px;
テキストアライグ:左;
テキストシャドウ:1px 1px 0 #fff;
}
Textarea {
サイズのサイズ:両方;
最大幅:230px;
}
input.textbox、textarea {
パディング:5px 10px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
ボーダーラジウス:15px;
ボーダー:1pxソリッド#ffff;
幅:200px;
テキストシャドウ:1px 1px 1px#777;
-moz-box-shadow:0px 2px 0px#999;
-webkit-box-shadow:0px 2px 0px#999;
Box-Shadow:0PX 2PX 0PX#999;
-webkit-transition:0.5sがすべて容易になりました。
-moz-transition:0.5sがすべて容易になりました。
遷移:0.5秒すべて容易。
背景:url(必須.png)繰り返し200px 5px#f0f0ef;
背景:-webkit-gradient(線形、左上、左下、(#e3e3e3)、(#fffff)まで); / * saf4+、chrome */
背景:-webkit-linear-gradient(top、#e3e3e3、#fffff); / * Chrome 10+、SAF5.1+ */
背景:-moz-linear-gradient(top、#e3e3e3、#fffff); / * ff3.6+ */
背景:-ms-linear-gradient(top、#e3e3e3、#ffffff); / * ie10 */
背景:-o-linear-gradient(top、#e3e3e3、#fffff); / *オペラ11.10+ */
}
input.textbox:Focus、Textarea:Focus {
-webkit-transform:スケール(1.1);
-moz-transform:スケール(1.1);
変換:スケール(1.1);
-moz-box-shadow:5px 3px 1px #ccc;
-webkit-box-shadow:5px 3px 1px #ccc;
Box-Shadow:7px 7px 2px #ccc;
テキストシャドウ:1px 1px 3px#777;
}
input.textbox:必須{
背景:url(必須.png)繰り返し200px 5px#f0f0ef;
背景:url(必須。png)ノーレピート200px 5px、-webkit-gradient(線形、左上、左下、(#e3e3e3)、(#fffff)); / * saf4+、chrome */
背景:url(必須。png)ノーレピート200px 5px、-webkit-linear-radient(top、#e3e3e3、#fffff); / * Chrome 10+、SAF5.1+ */
背景:url(必須。png)ノーレピート200px 5px、-moz-linear-gradient(top、#e3e3e3、#fffff); / * ff3.6+ */
背景:url(必須。png)ノーレピート200px 5px、-ms-linear-gradient(top、#e3e3e3、#ffffff); / * ie10 */
背景:url(必須。png)ノーレピート200px 5px、-o-linear-gradient(top、#e3e3e3、#fffff); / *オペラ11.10+ */
}
input.textbox:必須:有効{
背景:url(valid.png)No-Repeat 200px 5px#f0f0ef;
背景:url(valid.png)No-Repeat 200px 5px、-webkit-gradient(線形、左上、左下、(#e3e3e3)、(#fffff)); / * saf4+、chrome */
背景:url(valid.png)No-Repeat 200px 5px、-webkit-linear-gradient(top、#e3e3e3、#fffff); / * Chrome 10+、SAF5.1+ */
背景:url(valid.png)No-Repeat 200px 5px、-moz-linear-radient(top、#e3e3e3、#fffff); / * ff3.6+ */
背景:url(valid.png)No-Reepeat 200px 5px、-ms-linear-gradient(top、#e3e3e3、#ffffff); / * ie10 */
背景:url(valid.png)No-Repeat 200px 5px、-o-linear-radient(top、#e3e3e3、#fffff); / *オペラ11.10+ */
}
input.textbox:Focus:invalid、input.textbox:not(:必須):無効{
背景:url(invalid.png)繰り返し200px 5px#f0f0ef;
背景:url(invalid.png)No-Repeat 200px 5px、-webkit-gradient(線形、左上、左下、(#e3e3e3)、(#fffff)); / * saf4+、chrome */
背景:url(invalid.png)No-Repeat 200px 5px、-webkit-linear-gradient(top、#e3e3e3、#fffff); / * Chrome 10+、SAF5.1+ */
背景:URL(Invalid.png)No-Repeat 200px 5px、-moz-linear-ragient(top、#e3e3e3、#fffff); / * ff3.6+ */
背景:URL(Invalid.png)No-Reepeat 200px 5px、-ms-Linear-Gradient(Top、#e3e3e3、#fffff); / * ie10 */
背景:URL(Invalid.png)No-Repeat 200px 5px、-o-linear-radient(top、#e3e3e3、#fffff); / *オペラ11.10+ */
}
入力[type = submit] {
パディング:10px;
マージン:0 10px!重要。
幅:300px;
}
@media画面と(-webkit-min-device-pixel-ratio:0){
input [type = range] {padding:0;}
}
#RangeValue {
表示:ブロック;
テキストアライグ:右;
マージントップ:-25px;
}
入力:: - webkit-input-placeholder、textarea :: -webkit-input-placeholder {
色:#aaa;
フォントスタイル:イタリック;
テキストシャドウ:1px 1px 0 #fff;
}
入力:-moz-placeholder、textarea:-moz-placeholder {
色:#aaa;
フォントスタイル:イタリック;
テキストシャドウ:1px 1px 0 #fff;
}
.ClearFix {
クリア:両方;
}