「CSS3実戦」ノートセレクター(2)_html/css_WEB-ITnose

書籍「CSS3 Practical Combat」を読んで勉強することによる要約
「CSS3 Practical Combat」/Cheng Lin.—Beijing Machinery Industry Press 2011.

UI要素ステータス疑似クラスセレクター

UIのステータス要素は一般的なものです: 利用可能、利用不可、選択済み、選択解除、フォーカスの取得、フォーカスの喪失、ロック、スタンバイなど。

フォームデザインの原則:

UIデザインの中核の1つは、フォームをより使いやすく、使いやすく、使いやすいものにすることです。フォームのデザインは 3 層モデルに準拠する必要があります。つまり、フォームには 3 つの属性が必要です: perception (ページ表示のレイアウト)、dialogue (コンテンツのプレゼンテーションでの質問と回答)、relationship (対話型タスク)構造）。

＾ ＾ ＾ ＾ ＾

実践体験 1: 使いやすいフォームのデザイン

＾ シンプルで美しく、使いやすく、Web 標準に準拠したフォームをデザインして実装することは、Web デザイナーが追求する目標です。

＾ ＾ ＾

特徴: シンプルなワイヤーフレーム、かわいい小さなアイコン、ログインフォームを絶妙で快適なものにします

HTML: まず第一に、合理的なフォーム構造を設計する必要があります。フォームの補助要素。このうち label 要素は渡す必要があります。 for 属性はフォーム フィールドにバインドされ、for 属性値はフォーム フィールドの name 属性値に設定される必要があります。

うわー

CSS: テキスト ボックスの左側のアイコンをデザインするには、少しスキルが必要です。背景を表示するには、左側のパディングに少しスペースを確保します。もちろん、背景を正確に配置し、静的に並べて配置する必要があります。また、テキスト ボックスの高さと入力テキストの中央揃えの問題も考慮する必要があります。

<fieldset id="login">    <legend>用户登录</legend>    <form action="" method="POST" class="form">        <label for="name">姓名            <input name="name" type="text" id="name" value="" />        </label>        <label for="password">密码            <input name="password" type="text" id="password" value="" />        </label>        <input type="image" class="button" src="images/login1.gif" />    </form></fieldset>

無効状態 (disabled="disabled")

ユーザーが正常にログインしたら、スクリプトを通じてテキスト ボックスを使用不可状態 (disabled="disabled") に設定することもできます。 を選択します。 E: 無効 ツール は、テキスト ボックスがグレーで表示され、テキスト ボックスが使用できないことをユーザーに伝えます。

＾ ＾ ＾

HTML: テキストボックスにdisabled属性を追加します

<style type="text/css"> h1{ font-size:20px; } #login { width:400px; padding:1em 2em 0 2em; font-size:12px; }label { /*表单项中标签样式*/ line-height:26px; display:block; /*label是一个行内元素，增加该声明，确保每个表单项独立一行*/ font-weight:bold; }#name, #password { /*文本框公共样式*/ border:1px solid #ccc; width:160px; height:22px; /*固定高度*/ padding-left:20px; /*挤出位置*/ margin:6px 0; line-height:20px; /*让输出文本居中*/ }#name { background:url(images/name.gif) no-repeat 2px 2px; }#password { background:url(images/password.gif) no-repeat 2px 2px; }.button { margin:6px 0; }</style>

CSS: 基本スタイルに次のスタイルを追加します

<fieldset id="login">    <legend>用户登录</legend>    <form action="" method="POST" class="form">        <label for="name">姓名            <input name="name" type="text" id="name" value="" disabled="disabled" />        </label>        <label for="password">密码            <input name="password" type="text" id="password" value="" disabled="disabled" />        </label>        <input type="image" class="button" src="images/login1.gif" />    </form></fieldset>

さらなる美化: 美しくデザインされたフォームはユーザーの注意を引きつけ、さらにはユーザーを引き付けることができますログインします。

デザインアイデア: 全体の構造は 4 つの部分に分割され、それぞれフォームの異なる領域を構築します

CSS スタイル

#login input:disabled#name { /*姓名文本框处于不可用状态时的样式*/ background:#ddd url(images/name1.gif) no-repeat 2px 2px; border:1px solid #fff;}#login input:disabled#password { /*密码域处于不可用状态时的样式*/ background:#ddd url(images/password1.gif) no-repeat 2px 2px; border:1px solid #fff;}

実践体験 2: フレンドリーで使いやすいデザインを作成するフォーム

スタイルシートなし

HTML:

<style type="text/css">body { font-family: Helvetica, arial, sans-serif; margin: 0px 0px 0px 15px; font-size: 14px; background-color: #ffffff}/*设计文本框外框样式*/div.wrapper { background-image:url(images/bg.gif); background-repeat:no-repeat; width:348px; height:384px; margin-left:14px; padding-top:75px;}/*设计标题样式*/div.ribbon { background-image:url(images/ribbon.png); background-repeat:no-repeat; width:358px; height:45px; float:left; margin-top:25px; margin-left:10px; padding-left:25px; padding-top:5px; color:#ffffff; font-weight:bold;}/*设计Logo效果*/div.logo { background:url(images/logo.png) no-repeat; width:330px; height:115px;}div.loginwrapper { margin-left:40px; }/*设计动态文本框效果*/span.usertext { color:#478fab; font-weight:bold;}input.textbox { background:url(images/text_field.png) 0px -25px; width:264px; height:20px; border:0px; padding-top:5px; padding-left:4px;}input.textbox:hover { background:url(images/text_field.png) 0px 0px; border:0px;}div.bottomwrapper { margin-left:40px; margin-top:50px;}a:link, a:visited { color:#ffffff; text-decoration:none;}a:hover { color:#95ddf9; }/*设计动态按钮效果*/input.button { background:url(images/login_btn.png) 0px 0px; width:92px; height:31px; border:0px; float:right; margin-right:20px; margin-top:5px;}input.button:hover { background:url(images/login_btn.png) 0px -31px; }input.button:active { background:url(images/login_btn.png) 0px -62px; }</style>

Style 1

CSS style:

<form id="form1" name="form1" method="post" action="">    <fieldset>        <legend>学生信息登记表</legend>        <p class="top">            <label for="textfield" class="title">姓名：</label>            <input type="text" name="textfield" id="textfield" />        </p>        <p>            <label for="textarea" class="title">备注：</label>            <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>        </p>        <p><span class="title">兴趣：</span>            <label for="checkbox">文学</label>            <input type="checkbox" name="checkbox" class="checkbox" id="checkbox" />            <label for="checkbox2">艺术</label>            <input type="checkbox" name="checkbox2" class="checkbox" id="checkbox2" />            <label for="checkbox3">体育</label>            <input type="checkbox" name="checkbox3" class="checkbox" id="checkbox3" />            <label for="checkbox4">其他</label>            <input type="checkbox" name="checkbox4" class="checkbox" id="checkbox4" />        </p>        <p><span class="title">性别：</span> 女            <input type="radio" name="radio" id="radio" value="radio" />            男            <input type="radio" name="radio" id="radio" value="radio2" />        </p>        <p>            <label for="select" class="title">专业：</label>            <select name="select" id="select">                <option value="1">法律</option>                <option value="2">英语</option>                <option value="3">计算机</option>                <option value="4">财会</option>            </select>        </p>        <p class="center">            <input type="submit" name="button" id="button" value="提交" />            <input type="reset" name="button2" id="button2" value="重置" />        </p>    </fieldset></form>

スタイルの改善 1: タイトルクラスのスタイルシートに右揃えを追加するステートメントを使用すると、ラベルのプロンプト テキストが右側に表示されるため、ユーザーの目は左右に移動する必要がなくなります。

<style type="text/css">h1 { font-size:20px; }fieldset { width:615px; height:346px; background:url(images/bg7.png) no-repeat center; padding:12px; border:none;} /*表单框样式*//*清除默认的图注，以背景效果显示会更好看*/fieldset legend { display:none; }/*以下是各类表单域样式*/#textfield { width:16em; border:solid 1px #aaa; position:relative; top:-3px;}#textarea { width:25em; height:3em; border:solid 1px #aaa;}.checkbox { border:solid 1px #d8bca9; position:relative; top:3px; left:-2px;}select { border:solid 1px #d8bca9; }#radio { border:solid 1px #d8bca9; position:relative; top:3px; left:-1px;}/*以下是几个辅助设计的样式表*/.title { width:160px; float:left; font-weight:bold; margin-left:20px;}.top { margin-top:80px; }.center { text-align:center; }</style>

スタイル改善 2: 単純なフォームの場合は、2 列レイアウトの使用を避けた方がよい場合があります

ユーザーにとっては、1 行レイアウトの方が親しみやすく、使いやすいでしょう。ユーザーの目が左右に動く頻度が減るからです。

.title { width:100px; float:left; text-align:right; font-weight:bold; margin:0 40px;}

スタイルの改善 3: 必要なプロンプト情報の追加

CSS:

form { width:615px; height:450px; background:url(images/bg8.png) no-repeat center; padding:12px 0 12px 40px;}fieldset { border:none; }fieldset legend { display:none; }/*重设该样式表，让标签文本块状显示*/.title { display:block; font-weight:bold;}

HTML:

.red { color:red; margin-left:-10px; padding-right:2px;}

スタイルの改善 4: フレンドリーな検証フィードバック情報

HTML:

<p class="top">            <label for="textfield" class="title"><span class="red">*</span>姓名</label>            <input type="text" name="textfield" id="textfield" />        </p>

CSS:

<p class="top">            <label for="textfield" class="title"><span class="red">*</span>姓名</label>            <input type="text" name="textfield" id="textfield" /><span class="error">请填写真实姓名，不要输入别名或者昵称</span>        </p>

スタイル改善 5: フォーム項目の順序を最適化します

スタイル改善 6: 適切なグループ化のユーザー エクスペリエンスが向上します

スタイル改善 7 :フォームのデザインは、ユーザーが入力しやすく、ユーザーが入力内容を確認するのにも便利であるように、壮大である必要があります

最終的な Web ページのコード:

.error { color:white; background:red; padding:2px; margin:0 4px;}