書籍「CSS3 Practical Combat」を読んで勉強することによる要約
「CSS3 Practical Combat」/Cheng Lin. - 北京機械工業新聞 2011.5
複数列レイアウトは、新聞や新聞などの純粋なテキスト レイアウト デザインに適しています。雑誌の Web ページのレイアウト。Web ページの構造レイアウトには適していません。複数列レイアウト機能を柔軟に使用すると、テキストや画像を複数列に表示できるため、Web ページのスペースを大幅に節約できます。 Web ページ上のテキストが非常に長い場合は、複数列レイアウト機能が有効になることがあります。
互換性リファレンス: http://www.w3.org/TR/css3-multicol/
columns 属性 – 複数列レイアウトを定義します
columns は、border 属性と同様に、複数列レイアウト機能の基本属性です。境界線機能では、このプロパティは複数の列の数と各列の幅を同時に定義できます。基本的な構文は次のとおりです:
columns ： <column-width> || <column-count>
値の簡単な説明:
<column-width>:定义每列的宽度。<column-count>:定义列数。
column-width 属性: 列幅を定義します
column-count 属性: 列数を定義します
column-width:<length> | auto column-count:<integer> | auto
値の簡単な説明:
auto: ブラウザの計算値に基づいて自動的に設定されます。
column-gap 属性 – 列間隔を定義します
column-gap：normal | <length>
値の簡単な説明:
normal: ブラウザのデフォルト設定に従って解析されます (通常は 1em)。
column-rule 属性 – 列境界線のスタイルを定義します
column-rule：<length> | <style> | <color> | <transparent>
値の簡単な説明:
column-span 属性 – 列間の表示を定義します
column-span：1 | all
値の簡単な説明:
1: この列にのみ表示されます。
all: すべての列にまたがり、列の Z 軸の上に配置されます。
column-fill 属性 – 列の高さを定義します
column-fill ： auto | balance
簡単な値の説明:
auto: 各列の高さは、内容が変更されると自動的に変更されます。
バランス: 各列の高さは、コンテンツが最も多い列の高さに合わせて統一されます。
段組み印刷（略）
参考記事:
page-break-beforeとpage-break-afterでページ分割印刷を実現
CSSのpage-break-before属性
実践体験:
HTMLコード:
<body><h1 id="故都的秋-选段">故都的秋（选段）</h1><h2 id="郁达夫">郁达夫</h2><p> 秋天，无论在什么地方的秋天，总是好的；可是啊，北国的秋，却特别 地来得清，来得静，来得悲凉。我的不远千里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这"秋"，这故都的秋味。 </p><p>江南，秋当然也是有的；但草木雕得慢，空气来得润，天的颜色显得淡，并且又时常多雨而少风；一个人夹在苏州上海杭州，或厦门香港广州的市民中间，浑沌沌地过去，只能感到一点点清凉，秋的味，秋的色，秋的意境与姿态，总看不饱，尝不透，赏玩不到十足。秋并不是名花，也并不是美酒，那一种半开，半醉的状态，在领略秋的过程上，是不合适的。 </p><p>不逢北国之秋，已将近十余年了。在南方每年到了秋天，总要想起陶然亭的芦花，钓鱼台的柳影，西山的虫唱，玉泉的夜月，潭柘寺的钟声。在北平即使不出门去罢，就是在皇城人海之中，租人家一椽破屋来住着，早晨起来，泡一碗浓茶，向院子一坐，你也能看到很高很高的碧绿的天色，听得到青天下驯鸽的飞声。从槐树叶底，朝东细数着一丝一丝漏下来的日光，或在破壁腰中，静对着像喇叭似的牵牛花（朝荣）的蓝朵，自然而然地也能够感觉到十分的秋意。说到了牵牛花，我以为以蓝色或白色者为佳，紫黑色次之，淡红色最下。最好，还要在牵牛花底，教长着几根疏疏落落的尖细且长的秋草，使作陪衬。 </p><p> 北国的槐树，也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊，早晨起来，会铺得满地。脚踏上去，声音也没有，气味也没有，只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后，灰土上留下来的一条条扫帚的丝纹，看起来既觉得细腻，又觉得清闲，潜意识下并且还觉得有点儿落寞，古人所说的梧桐一叶而天下知秋的遥想，大约也就在这些深沉的地方。 </p><p>秋蝉的衰弱的残声，更是北国的特产；因为北平处处全长着树，屋子又低，所以无论在什么地方，都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫，在北平和蟋蟀耗子一样，简直像是家家户户都养在家里的家虫。 </p><p> 还有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像样。 </p></body>
基本CSS3コード
<style type="text/css" media="screen">h1 { color:#333333; background:#DCDCDC; padding:5px 8px; font-size:20px; text-align:center; padding:12px;}h2 { font-size:16px; text-align:center;}p { color:#333333; font-size:14px; line-height:180%; text-indent:2em;}</style> 複数列レイアウトのデモンストレーション効果は設定されていません:
実践体験1:記事の複数列表示のデザイン
基本CSS3コードを追加上:
body { -webkit-columns: 250px 3; columns: 250px 3;//设计网页文档分三栏显示，每栏宽度为250px} デモ効果:
実践体験 2: 固定幅の列レイアウトをデザインする
上記の基本的な CSS3 コードを追加:
body {/*定义网页列宽为300px,则网页中每个栏目的最大宽度为300px*/ -webkit-column-width:300px; -moz-column-width:300px; column-width:300px;} デモ効果:
実践体験 3: 固定幅の列レイアウトをデザインする幅列レイアウト
次に、上記の基本 CSS3 コードを追加します:
<style type="text/css" media="screen">body {/*设置文档内容为固定的三列*/ -webkit-column-count:3; -moz-column-count:3; column-count:3;} デモ効果:
実践体験 4: スムーズなドキュメント レイアウトをデザインする
次に、上記の基本 CSS3 コードを追加します:
body { -webkit-column-count:3; -moz-column-count:3; column-count:3;//定义页面内容显示为3列 -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em;//定义列间距为3em，默认为1em line-height:2.5em;} デモンストレーション効果:
実践体験 5: 複数列レイアウトの境界線効果をデザインする
基本的な CSS3 コードに基づいて追加する:
body { -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em; line-height:2.5em; -webkit-column-rule:dashed 2px gray; -moz-column-rule:dashed 2px gray; column-rule:dashed 2px gray; //定义列边框为2像素宽的灰色虚线} デモ効果:
実践体験 6: 複数列レイアウトに表示する記事タイトルをデザインする
追加する基本的な CSS3 コードの基礎:
body { -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em; line-height:2.5em; -webkit-column-rule:dashed 2px gray; -moz-column-rule:dashed 2px gray; column-rule:dashed 2px gray;}h1 { -webkit-column-span:all; -moz-column-span:all; column-span:all;//设置一级标题跨越所有列显示}h2 { -webkit-column-span:all; -moz-column-span:all; column-span:all; //设置二级标题跨越所有列显示} デモ効果:
実践体験 7: 不等高さの複数列レイアウト効果をデザインする
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css" media="screen">body { -webkit-column-count:3; -moz-column-count:3; column-count:3;//定义页面内容显示为3列 -webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em;//定义列间距为3em line-height:2.5em; -webkit-column-rule:dashed 2px gray; -moz-column-rule:dashed 2px gray; column-rule:dashed 2px gray;//定义列边框为2px -webkit-column-fill:auto; -moz-column-fill:auto; column-fill:auto;//设置各列高度自动调整}.c1 { width:100%; height:500px; background:red;}.c2 { width:100%; height:300px; background:green;}.c3 { width:100%; height:100px; background:blue;}</style><title>column-fill</title></head><body><div class="c1"><img src="/static/imghwm/default1.png" data-src="images/pic1.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="「CSS3 実践戦闘」ノート複数列layout_html/css_WEB-ITnose" ></div><div class="c2"><img src="/static/imghwm/default1.png" data-src="images/001.gif" class="lazy" style="max-width:90%" style="max-width:90%" / alt="「CSS3 実践戦闘」ノート複数列layout_html/css_WEB-ITnose" ></div><div class="c3"><img src="/static/imghwm/default1.png" data-src="images/img2.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="「CSS3 実践戦闘」ノート複数列layout_html/css_WEB-ITnose" ></div></body></html> デモ効果:
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AMAnexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PMメニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...
オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PMWebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
WebStorm Mac版
便利なJavaScript開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
