CSSフラットブログ学習まとめ(4)コンテンツコード実装_html/css_WEB-ITnose

1.根据功能，把不同的部分写出来，方便扩展

　　

　　　　

　　　　　　

一个标题

　　　　　　

　　　　　　

Lorem ipsum dolor sit amet, consectetur adipisicing elit, laborum.

　　　　

　　　　

　　　　　　item1
　　　　　　item1
　　　　　　item1
　　　　

　　

　　

　　　　

　　　　　　

　　　　　　　　
　　　　　　

　　　　　　

　　　　　　　　

又一个标题

　　　　　　　　

　　　　　　　　　　我是副标题
　　　　　　　　

　　　　　　　　

Lorem ipsum dolor sit amet, consectetur adipisicing elit, laborum.

　　　　　　

　　　　

　　　　

　　　　　　

　　　　　　　　
　　　　　　

　　　　　　

　　　　　　　　

又一个标题

　　　　　　　　

　　　　　　　　　　我是副标题
　　　　　　　　

　　　　　　　　

Lorem ipsum dolor sit amet, consectetur adipisicing elit, laborum.

　　　　　　

　　　　

2. 子要素がフローティングになると、親要素は適切な値を探索します。現在の値は 0 であり、フローティング操作をクリアする必要があります。除清 フローティングメソッドを削除するためによく使用されます:

.article-conreview: after {

content: "" "" ";

Display: Block;

Height: 0;

Visibility: hidden;

Bleak }

.article-preview{*zoom:1;}

このように書くこともできます:

.article-preview:after {

content: "200B";/＊に「ゼロ幅」がありますU+200BであるUnicode文字「スペース」自体は不可視なので、visibility:hidden ＊/

display:block;

height:0;

clear:both;

}

.article -preview{ *zoom:1;}

別の最新の方法:

.clearfix{

overflow: auto;

room: 1; //IE6 をサポート

}

別の方法もあります:

.article-preview :before,.article-preview:after {

content:"";

display:table;

}

.article-preview:after { clear:both }/* IE 6 /7 の場合 */

.article-preview{*zoom:1;}

3. 2 つのモジュール間に小さなギャップが生じることがありますが、これはおそらくフォントが原因です。最外層に font-size: 0; を追加して処理します。

4. 各要素のコンテンツは、ウィンドウの変更や要素の拡大または縮小に応じて適応します。 .text-section > div{

word-wrap: Break-word; /*分割できない長い単語を分割して次の行に折り返すことができます*/

word-break: Break-all; /*中国語の行折り返しルール。単語内でコンテンツを自動的に折り返すことができます。 */

overflow: hidden; /*超過したコンテンツは非表示になります*/

text-overflow: ellipsis; 指定された文字列を使用してトリミングされたテキストを表します*/

}

5.purple-section レイアウト

, < div class="card-グループ">

;/section>

関連ラベル：

css扁平化博客学习总结（四）content代码实现

ソース：php.cn

前の記事：Pure CSS3 はラジオと checkbox_html/css_WEB-ITnose を美しくします 次の記事：CSS3 ペイント 3-モバイル モデル_html/css_WEB-ITnose

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1815

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1968

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1664

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1568

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1593

関連トピック

詳細>

• netstatでポートステータスを確認する方法
• 403禁断の解決法
• C面とB面ってどういう意味ですか？
• 現在のページのスクリプトのエラーを解決する方法
• Linuxでroot権限を入力する方法
• Linuxのファイル名変更コマンド
• ビジネスメールの登録方法
• シブコイン最新ニュース