コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS 属性セレクター: 有効の場合の分析 (コード例)

易达
リリース： 2020-06-24 14:08:03
オリジナル
2500 人が閲覧しました

この記事の目標:

1. CSS で有効になる構造疑似クラス セレクターの使用法をマスターする

質問:

1. 次のフォームを実装します。純粋な DIV CSS を使用する場合は、セレクターを使用する必要があります (有効)

CSS 属性セレクター: 有効の場合の分析 (コード例)

追加メモ:

1. 年齢、ID カード、携帯電話番号はすべて可能です。を入力できますが、住所入力ボックスは入力できません。デフォルトは湖南省

2 です。全体の幅は 380、上下左右のパディングは 20、全体の中央表示は

3. アバターアイコンの幅は 40 で、他のアイコンのサイズも 40 です

さあ、具体的な操作をしてみましょう

1. 材料の準備: 目的に応じてに表示されるアイコンは、カットするすべての素材です。

CSS 属性セレクター: 有効の場合の分析 (コード例) CSS 属性セレクター: 有効の場合の分析 (コード例) CSS 属性セレクター: 有効の場合の分析 (コード例)

CSS 属性セレクター: 有効の場合の分析 (コード例) CSS 属性セレクター: 有効の場合の分析 (コード例)

2.index.html を作成します。アーキテクチャをどのように分析するか?

アイデア分析:

1. ターゲットはタイトルとフォームに分割されます

2. レイアウトすることができますul から ul までのフォームを作成し、li のアイコンの背景として使用します。この方法では、アイコンを li 内で垂直方向に左側の中央に配置するのが非常に簡単です。

わかりました。まず分析に従い、アイデアを書き留めて、当面は css の実装を無視します

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性选择器:enabled</title>
</head>
<body>
    <div class="container">
        <h2 class="title">
            请完善信息
        </h2>
        <form action="#">
            <ul>
                <li class="avatar">
                    <img  src="images/CSS 属性セレクター: 有効の場合の分析 (コード例)" / alt="CSS 属性セレクター: 有効の場合の分析 (コード例)" >
                </li>
                <li class="item age">
                    <input type="text" id="enabled" value="请输入年龄" />
                </li>
                <li class="item sfz">
                    <input type="text" id="enabled" value="请输入身份证"/>
                </li>
                <li class="item sj">
                    <input type="text" id="enabled" value="请输入手机号" />
                </li>
                <li class="item addr">
                    <input type="text" id="disabled" value="湖南" disabled="disabled" />
                </li>
                <li class="item">
                    <input type="button" value="提交" />
                    <input type="button" value="取消" />
                </li>
            </ul>
        </form>
    </div>
</body>

</html>
ログイン後にコピー

3. スタイルを記述し、css フォルダーを作成し、その中に新しいindex.cssを作成します。また、 の中にスタイルを記述する方法以下は分析アイデアです。

アイデア分析:

.container *パブリック スタイル

1. 非常に多くのケースを作成した後、このステップは基本的に不可欠です。コードの冗長性を減らすためでもあるため、ここでパブリック スタイルを定義できます

したがって、次のコードをindex.cssに追加します: 

.container *{
    padding:0;
    margin:0;
}
ログイン後にコピー

.container externalcontainer

1.追加の手順では、幅は 380 ピクセルで、表示は中央に配置されるため、上下左右の間隔を空けて、margin: 0 auto が必要です。

したがって、次のコードをindex.css に追加します。 ##

.container{
    width:380px;
    margin:0 auto;
    padding:20px;
}
ログイン後にコピー

form form

1. ターゲットによると、灰色の境界線が付いています

そこで、次のコードをindex.css:

form{
    border:1px solid lightgray;
}
ログイン後にコピー

に追加します。 avatar .avatar img avatar

1. アバターは中央に配置され、上下にパディングがある必要があります

2. アバター画像の幅は 40 で、円形の

したがって、index.css 次のコードをindex.cssに追加します。 

.avatar{
    text-align: center;
    padding:10px 0!important;
}
.avatar img{
    width: 40px;
    border: 1px solid gray;
    border-radius: 40px;
    padding: 10px;
}
ログイン後にコピー

ul li

1. li には黒い点がないため、スタイルがありません

したがって、次のコードをindex.cssに追加します:

ul li{
    list-style: none;
}
ログイン後にコピー

.item liのパブリック スタイル設定

1左側に背景アイコンがあるため、padding-left、高さ60が必要です。中央揃えにするには、line-heightも同じに設定する必要があります

2. 背景のサイズアイコンは 40 で、水平方向に左側、垂直方向中央に配置されています

3. 背景アイコンは繰り返されていません

したがって、次のコードをindex.cssに追加します: 

.item{
    padding-left: 50px;
    height: 60px;
    line-height: 60px;
    background-size: 40px;
    background-position-y: center;
    background-position-x: left;
    background-repeat: no-repeat;
}
ログイン後にコピー

li の背景アイコンの設定

1.各 li に独自の背景画像を設定します

したがって、次のコードをindex.css に追加します: 

.age{
    background-image: url(../images/CSS 属性セレクター: 有効の場合の分析 (コード例));
}
.sfz{
    background-image: url(../images/CSS 属性セレクター: 有効の場合の分析 (コード例));
}
.sj{
    background-image: url(../images/CSS 属性セレクター: 有効の場合の分析 (コード例));
}
.addr{
    background-image: url(../images/CSS 属性セレクター: 有効の場合の分析 (コード例));
}
ログイン後にコピー

text 入力ボックスのパブリック スタイルを入力します。設定

1、幅は300、高さは30、上部のスペースがあります

したがって、次のコードをindex.cssに追加します:

input[type="text"]{
    width:300px;
    height:30px;
    margin-top: 10px!important;

}
ログイン後にコピー

編集可能な入力フレーム設定


1. ここでは、有効なナレッジ ポイントを使用して設定し、input[type="text"]:enabled を一致させて、2 ピクセルの灰色の左境界線を追加します。色は薄緑色です。

次のコードをindex.cssに追加します:

input[type="text"]:enabled {
    border-left:2px solid lightgray;
    background-color:lightgreen;
}
ログイン後にコピー

ボタン設定

1、幅は150ピクセル、高さは40ピクセルです。

したがって、次のコードをindex.cssに追加します: 

input[type="button"]{
    width:150px;
    height:40px;
}
ログイン後にコピー

h2 タイトル設定

1. タイトルは中央に配置され、上下にパディングがある必要があります

それではインデックス。次のコードを CSS に追加します: 

h2{
    text-align:center;
    padding:10px 0!important;
}
ログイン後にコピー

わかりました。ここまでで、考えたスタイルをすべて書きました。詳細が正しくない場合は、もう一度修正しましょう


目前为止，css所有内容如下：

.container *{
    padding:0;
    margin:0;
}
.container{
    width:380px;
    margin:0 auto;
    padding:20px;
}
form{
    border:1px solid lightgray;
}
.avatar{
    text-align: center;
    padding:10px 0!important;
}
.avatar img{
    width: 40px;
    border: 1px solid gray;
    border-radius: 40px;
    padding: 10px;
}
ul li{
    list-style: none;
}

.item{
    padding-left: 50px;
    height: 60px;
    line-height: 60px;
    background-size: 40px;
    background-position-y: center;
    background-position-x: left;
    background-repeat: no-repeat;
}
.age{
    background-image: url(../images/CSS 属性セレクター: 有効の場合の分析 (コード例));
}
.sfz{
    background-image: url(../images/CSS 属性セレクター: 有効の場合の分析 (コード例));
}
.sj{
    background-image: url(../images/CSS 属性セレクター: 有効の場合の分析 (コード例));
}
.addr{
    background-image: url(../images/CSS 属性セレクター: 有効の場合の分析 (コード例));
}
input[type="text"]{
    width:300px;
    height:30px;
    margin-top: 10px!important;

}
input[type="text"]:enabled {
    border-left:2px solid lightgray;
    background-color:lightgreen;
}
input[type="button"]{
    width:150px;
    height:40px;
}
h2{
    text-align:center;
    padding:10px 0!important;
}
ログイン後にコピー

将css加入html中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>属性选择器:enabled</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <h2 class="title">
            请完善信息
        </h2>
        <form action="#">
            <ul>
                <li class="avatar">
                    <img  src="images/CSS 属性セレクター: 有効の場合の分析 (コード例)" / alt="CSS 属性セレクター: 有効の場合の分析 (コード例)" >
                </li>
                <li class="item age">
                    <input type="text" id="enabled" value="请输入年龄" />
                </li>
                <li class="item sfz">
                    <input type="text" id="enabled" value="请输入身份证"/>
                </li>
                <li class="item sj">
                    <input type="text" id="enabled" value="请输入手机号" />
                </li>
                <li class="item addr">
                    <input type="text" id="disabled" value="湖南" disabled="disabled" />
                </li>
                <li class="item">
                    <input type="button" value="提交" />
                    <input type="button" value="取消" />
                </li>
            </ul>
        </form>
    </div>
</body>

</html>
ログイン後にコピー

运行结果如下：

CSS 属性セレクター: 有効の場合の分析 (コード例)

仔细观察，发现Ul没有居中，所以还要对ul设置一下

把以下代码加入css中

分析：

1、因为li有50的左padding,然后每个文本框都有边框，且有自己的宽度，所以宽度355，要居中，所以需要margin

ul{
    width: 355px;
    margin: 0 auto!important;
}
ログイン後にコピー

运行效果如下：

CSS 属性セレクター: 有効の場合の分析 (コード例)

总结：

1、学习了结构性伪类选择器—enabled用法，它可以批量获取到所有可编辑的元素

以上がCSS 属性セレクター: 有効の場合の分析 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
cssプロパティ
ソース：php.cn
前の記事：CSS の単位 px、rem、em の簡単な分析 次の記事：あまり馴染みのない 10 個の CSS 疑似クラスとその使用例
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート