コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSSフラットブログ学習まとめ(4)コンテンツコード実装_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2016-06-24 11:40:47
オリジナル
1143 人が閲覧しました

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>













前の記事：Pure CSS3 はラジオと checkbox_html/css_WEB-ITnose を美しくします 次の記事：CSS3 ペイント 3-モバイル モデル_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
リモート ウェアハウスを git に追加した後、プッシュできません
から 1970-01-01 08:00:00
0
0
0
Objective-C のブロックと Swift のクロージャの違いは何ですか?
から 1970-01-01 08:00:00
0
0
0
github - git は特定のサフィックスを除くすべてのファイルを無視できますか
から 1970-01-01 08:00:00
0
0
0
object-c - この cas ファイルを偶然見ましたか?これはどのように書かれているか聞いてもいいでしょうか？
から 1970-01-01 08:00:00
0
0
0
bash での git 完了エラー
から 1970-01-01 08:00:00
0
0
0
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート