1. CSS3 での属性セレクターのいくつかの使用法をマスターする
1. を達成するには div css を使用する必要があります。次のような効果がありますが、CSS が必要です。すべての属性セレクターは、要素スタイルを設定するためにファイル内で使用されます。
補足:
1. div 全体の幅は次のとおりです。 850、ページの中央に表示する必要があります
2。タイトル サイズは 28、太字表示
3。その他のフォント サイズは 14px
4有名人のゴシップをクリックして tobagua.html にジャンプし、軍事ニュースをクリックして toaffairs.html にジャンプします。追加の資料が必要ないため、資料を準備するステップを省略できます
2.index.html を作成し、アーキテクチャを記述します。アーキテクチャを分析するにはどうすればよいですか?
アイデア分析:1. 目標は左と右の 2 つの部分に分かれており、それぞれのセクションにはニュースのリストが表示されますが、各ニュースのカテゴリが異なり、一部のスタイルも異なります
2. Lin Xinru を含むニュースの色は別途設定する必要があります3. f15 を含むニュースの色は別途設定する必要があります4. F15 を含むニュースの色も別途設定する必要があります。 2 つのパートのタイトルも個別に設定する必要があるため、属性セレクター5 を使用して一致できるように、いくつかの属性を個別に設定する必要があります。各パートはリストであるため、次を使用できます。 ul ですが、どちらの ul もフラッシュであるため、float を使用する必要があります。float なので、外側のコンテナがまだ浮動要素を確実にラップできるようにするために、最後に float をクリアするクリア要素を追加する必要があります分析によると、次のコードが得られます1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
3. スタイルを記述し、css フォルダーを作成し、その中に新しいindex.cssを作成します。スタイルの記述方法内部では、以下が分析アイデアです。
アイデア分析:コンテナーコンテナーのすべてのサブ要素
1。 style は設定に一致するように属性セレクターを使用する必要があります。私たちのアイデアは、最初に属性 container=true を持つ要素を取得し、次に最も一般的なパディングやマージンなどの一般的なスタイルをその要素に設定することです。これは当てはまらないためです。設定する際、一部の要素のデフォルトのパディングがわからない場合がありますが、ロジックの作成に集中できるように、パディングとマージンを 0に統一しましたので、次のコードをindex.cssに追加します。
1 2 3 4 |
|
container コンテナ
1. 要件によると、最も外側のコンテナの幅は 850 で、中央に配置され、上部と下部にパディングがあります。 、左右にグレーの境界線があり、デフォルトのフォント サイズは 14px です。コンテナ コンテナはどれですか? それは、コンテナ属性 = true の要素です。したがって、次のコードをindex.css に追加します。
1 2 3 4 5 6 7 |
|
2 タイトルのパブリック スタイル設定
1. タイトルは中央に配置し、フォント サイズ 28 ピクセルで太字で表示する必要があるため、どれがタイトルであるか、つまり、属性 title=true を持つすべての要素
したがって、次のコードをindex.css に追加します。
1 2 3 4 5 |
|
2 つのタイトル接続の個別の設定
##1. ゴシップのタイトルの色は赤です
##2. 軍事タイトルの色は青です3. 八卦文字列を含む href 属性は、左側のタイトル接続です。 toaffairs で始まる href 属性は、右側のタイトル接続です。
*= は包含を意味し、^= は先頭を意味します したがって、次のコードをindex.css に追加します。 左右のフローティング div 設定1. 左の div は左にフローティングする必要があるので、どれが左の div ですか? 実際には、left 属性を持つ div です。 true
2 となります。右の div は右にフロートする必要があるので、どの div が右の div ですか? 実際、それは true
3 という正しい属性を持つ div です。この関数は、float をクリアすることです。 div は、実際には、clear で終わるクラスを持つクラスです。注: $= は、何で終わるかを示します。
したがって、次のコードをindex.cssに追加します:
1 2 3 4 5 6 7 |
|
1. li には黒い点が含まれていないため、list-style:none
2. 属性クラスにニュースが含まれる要素文字列は li
3. 効果に従って、上下左右の間に一定の間隔が空きます そこで、次のコードをindex.cssに追加します:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
1. このタイトルの色は土っぽい黄色で、フォントは太字です
2. クラス属性の末尾lxr は Ruby Lin のタイトルなので、$=1 2 3 4 5 6 |
|
1 を含むタイトル設定を使用します。タイトルの色は青、フォントは太字です
1 2 3 4 |
|
1 2 3 4 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
|
これまでのところ、必要な結果が達成されています
1. 属性セレクターのいくつかの使用法を説明しました (例: #)
以上がCSS3 属性セレクターのいくつかの使用法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。