Mehrspaltiges Layout (Mehrspaltig)
Beim mehrspaltigen Layout werden Textinhalte wie bei einer Zeitung in einem mehrspaltigen Layout gestaltet. Mit anderen Worten: Der Wasserfallfluss, den wir zuvor über js oder JQuery erreichen konnten, kann direkt über CSS in CSS3 erreicht werden, obwohl es Kompatibilitätsprobleme gibt. .
Kompatibilität
IE10+, Firefox16+, Chrome26+, Safari6.1+, Opera12.1
Eigenschaften des mehrspaltigen Layouts
CSS3 bietet eine Reihe von Eigenschaften zum Implementieren eines mehrspaltigen Layouts, wie in der folgenden Tabelle dargestellt:
1.columns legt die Anzahl der Spalten des Objekts und die Breite jeder Spalte fest
Legt die Anzahl der Spalten des Objekts und die Breite jeder Spalte fest oder ruft diese ab.
Grammatik:
columns:<'column-width'>||<'columns-count'>;
Parameterbeschreibung:
(1) Der erste Parameter bezieht sich auf die Breite jeder Spalte
(2) Der zweite Parameter bezieht sich auf die Anzahl der Spalten. Sie können zwei oder eins schreiben.
Die beiden Parameter geben der Anzahl der Spalten Vorrang (im Falle einer Absenkung). Wenn die Breite nicht ausreicht (Anzahl der Spalten * festgelegte Breite > Breite des Containers), wird automatisch eine Spalte verkleinert und die Breite des Absatzes automatisch erweitert, um die Breite des Containers zu erreichen. In der Mitte wird automatisch der entsprechende Abstand generiert.
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Mehrspaltiges Layout</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3 );}div.test1{width:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px;border:2pxsolidred;}div.tes t2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style></head><body>< div><div>von Dennis Ritchie, der Erfinder der C-Sprache, positionierte seine Erfindung ursprünglich nicht als grafische Software. Sie sollte die Entwicklung von Treibern, Systemkernel, Dateiverwaltung, interner Verwaltung und einer Reihe von Kernfunktionen umfassen Sie müssen also nur die Syntax der C-Sprache lernen, aber auch andere Themen wie Betriebssystemprinzipien, Kommunikationsprotokolle, Compilerprinzipien, Datenstrukturen usw., um die vorherigen Anforderungen zu erfüllen. </div><div>Wenn Sie jetzt das Motherboard-Handbuch auf Englisch lesen, wissen Sie, welche Schnittstelle gelesen werden soll, wie das Kommunikationsprotokoll festgelegt ist, wie viele Bytes gelesen werden sollen ... und so weiter Sie können nur den Treiber schreiben, bevor er kommunizieren kann, auch wenn die Nachfrage nach Talenten in Unternehmen in der Gesellschaft höher ist Weniger, aber es ist kein Problem, überhaupt keinen Job zu finden. Stattdessen wählt man einen Job aus und bezahlt ihn sogar, denn man kann nicht nur diese, sondern auch viele verwandte Jobs, wie z. B. Treiberentwicklung, DNS, erledigen Auflösung, Virenschutz, Kommunikationssicherheit, Virtualisierung usw. Es ist in der Lage, Technologie und Kernel-Anpassung zu nutzen und kann sogar selbst ein neues Betriebssystem entwickeln. </div><div>Allerdings besteht in unserem aktuellen Umfeld die Lehrausrichtung der C-Sprache an den meisten Universitäten darin, dass zusätzlich zu C-Sprachkursen nur einige Hochschulen auch Kurse zu Datenstruktur, Computerarchitektur, Compilerprinzipien usw. anbieten sollten B. Betriebssystemprinzipien, und einige Schulen behalten in diesen Kursen nur Datenstrukturen bei oder bieten sogar keine Datenstrukturen mehr an. Daher wird die C-Sprache nur als Programmiererziehung positioniert und es reicht aus, mit prozessorientiertem Denken und C vertraut zu sein Sprachsyntax. </div><div>Die Schule hofft, dass sie nach dem Erlernen der C-Sprache dann C++ oder Java oder andere Hochsprachen lernen können, damit sie praktischere Dinge erledigen und leichter einen Job finden können, wenn sie eifrig sind Um erfolgreich zu sein, können sie einfach die Sprache C verwenden. Kein Lernen mehr, sondern nur Java oder C++ oder andere Hochsprachen ohne Grundlagen. Das ist tatsächlich der Unterschied zwischen einer Berufsklasse und einer Ausbildungseinrichtung. Wer Wissen nicht umsonst erlernt, sollte mehr darüber nachdenken, ob es nützlich ist oder nicht. </div></div><br><div><div>Wenn Sie also an einer wichtigen Hochschule Computer/Software als Hauptfach studieren, sollten Sie sich intensiv mit diesen realen Dingen befassen. Verschwenden Sie nicht die Lehrressourcen des Landes, denn Sie sind für die Zukunft der IT-Softwareindustrie des Landes verantwortlich. Wenn Sie sich in der Software-Forschung und -Entwicklung engagieren möchten, müssen Sie sich zumindest gut mit der Datenstruktur vertraut machen, denn Sie müssen erstellen , nicht kopieren. Wenn Sie einfach nur Ihren Lebensunterhalt verdienen möchten, lernen Sie einfach eine Technik, die zu Ergebnissen führen kann. </div><div>Lassen Sie uns abschließend einen Blick auf die gemeinsamen Zwecke werfen, zu denen Studenten die C-Sprache lernen. Vom Junior College bis zum Bachelor-Abschluss, der Postgraduierten-Aufnahmeprüfung und der C-Sprache der zweiten Ebene basieren bedarfsorientierte Tutorials hauptsächlich darauf Theoretische Fragen, Übungsfragen und Prüfungen, daher gibt es für den Projekttyp viel weniger schwierige C-Sprachressourcen, sodass Sie natürlich selten grafische Dinge sehen. Natürlich wird Dotcpp als überzeugter Befürworter der C-Sprache auch hier in Zukunft die Programmierressourcen stärken, um allen ausreichend Ressourcenunterstützung zu bieten. </div><div>Wenn wir die C-Sprache lernen, werden Ihre Programme in einem schwarzen Fenster ausgeführt, da wir Konsolenprogramme auswählen. Wenn Sie eine Windows-Anwendung schreiben, wird es kein solches schwarzes Fenster geben, die Syntax der C-Sprache jedoch immer noch verwendet werden, kann jeder verstehen. </div><div>Wenn es sich um eine grafische Entwicklung in reiner C-Sprache handelt, können Sie je nach Stadium die Verwendung der vom TurBoC-Compiler unterstützten Grafikschnittstellenfunktion oder die Installation der easyX-Bibliothek in VC6 in Betracht ziehen, um die grafische Entwicklung abzuschließen Bei einigen Spielen wie Backgammon, Tetris, Flipperspielen, Snake usw. können Sie für fortgeschrittenere Spiele die Verwendung von MFC oder QT in Betracht ziehen. </div></div></body></html>Laufergebnisse:
Legen Sie die Spalten von div.test1 fest: 300px 4; das heißt, die Breite jeder Spalte beträgt 300px und es gibt insgesamt 4 Spalten, aber der Container ist 900px, was weniger als 1200px ist, sodass die Anzahl der Spalten automatisch angepasst wird verkleinert und die Spaltenbreite entsprechend vergrößert, um optimal angezeigt zu werden. Allerdings legt div.test2 die Containerbreite nicht fest, die Spaltenbreite ist auf 300 Pixel und die Anzahl der Spalten auf 4 Spalten festgelegt. Die Anzahl der Spalten wird begrenzt, um die Spaltenbreite zu optimieren.
Hinweis: Stellen Sie die Spalten von div.test1 auf 300 Pixel ein. Das heißt, die Breite jeder Spalte beträgt 300 Pixel und es gibt insgesamt 4 Spalten, aber der Container ist 900 Pixel groß, was weniger als 1200 Pixel ist, sodass die Anzahl der Spalten gleich ist automatisch verkleinert und die Spaltenbreite entsprechend erhöht, um die am besten geeignete Anzeigemethode zu erreichen. Allerdings legt div.test2 die Containerbreite nicht fest, die Spaltenbreite ist auf 300 Pixel und die Anzahl der Spalten auf 4 Spalten festgelegt. Die Anzahl der Spalten wird begrenzt, um die Spaltenbreite zu optimieren.
2. Spaltenbreite legt die Spaltenbreite fest
Grammatik:
columns-width:<length>|auto default;
: Verwenden Sie den Längenwert, um die Spaltenbreite zu definieren. Es sind keine negativen Werte zulässig. Auto: Passen Sie die Breite entsprechend der Anzahl der Spalten an.
Obwohl die Spaltenbreite festgelegt ist, wird die Breite automatisch basierend auf der Anzahl der Spalten und der Breite des Containers zugewiesen.
PS: Die Lücke in jeder Spalte beträgt 14 Pixel.
3. Column-Count legt die Anzahl der Spalten fest
Legt die Anzahl der Spalten eines Objekts fest oder ruft sie ab.
Grammatik:
Spaltenanzahl:<integer>|auto;
Parameterbeschreibung:: Verwenden Sie ganzzahlige Werte, um die Anzahl der Spalten zu definieren. Negative Werte sind nicht zulässig. Auto: Passen Sie die Zuordnungsbreite entsprechend der Spaltenbreite an.
4. Column-Gap legt den Abstand zwischen den Spalten fest
Legt die Lücken zwischen Spalten eines Objekts fest oder ruft sie ab.
Grammatik:
Spaltenlücke:<Länge>|normal;
Parameterbeschreibung: Verwenden Sie den Längenwert, um den Abstand zwischen den Spalten zu definieren (nicht den Abstand zwischen Wörtern, sondern den Abstand zwischen Absätzen). Negative Werte sind normalerweise nicht zulässig: das Gleiche wie die Schriftgröße. Der normale Abstand hängt von der Schriftgröße ab. Identisch mit der Schriftgröße.
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Mehrspaltiges Layout</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{ border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{background-color:rgb(0,0,0,.3);margin-top: 20px;}di v.test1{width:900px;columns:300px4;font-size:14px;}div.test2{columns:400px;font-size:30px;}div.test3{column-count:4;column- Lücke: 14 Pixel; die die C-Sprache studiert haben. Wenn Sie auf die C-Sprache zurückblicken, werden Sie sicherlich diese Frage haben: Warum wird die C-Sprache in einem schwarzen Fenster ausgeführt? Ein Programm, das entweder die Fläche eines Dreiecks berechnet oder die Anzahl der Narzissen ausgibt? Egal wie großartig die Programmierung war, warum können wir nicht trotzdem diese coole Software machen? Am Ende ist es einfach kindisch! Warum. </div><div>Erstens die Positionierung der Erfindung der C-Sprache: Seit Beginn ihrer Erfindung durch Dennis Ritchie, dem Erfinder der C-Sprache, wissen wir, dass es sich um ein System und nicht um eine grafische Software selbst handeln soll. Es sollte eine Reihe von Kernaufgaben umfassen, z. B. die Entwicklung von Treibern, die Erstellung des Systemkernels, die Dateiverwaltung, die interne Verwaltung, die Netzwerkkommunikation usw. </div><div>Zweitens die allgemeine Lehrpositionierung in China. Allerdings ist die Lehrpositionierung der meisten Universitäten für C-Sprache so, dass nur einige Hochschulen zusätzlich zu C-Sprachkursen auch Datenstrukturen anbieten sollten. , Computerarchitektur, Compilerprinzipien, Betriebssystemprinzipien und andere Kurse. </div><div>Darüber hinaus hat die Wan'an County Commission for Discipline Inspection and Supervision die Erfüllung ihrer Aufgaben durch relevante Einheiten und Personal wie das County Education and Sports Bureau, die County Market and Quality Supervision Administration usw. untersucht die Gemeinderegierung von Jiantian und überprüfte die Aufsicht. Die Verantwortlichen des Kreisamtes für Bildung und Sport, der Kreisverwaltung für Markt- und Qualitätsüberwachung, des Kreislandwirtschaftsbüros, der Kreisgesundheits- und Familienplanungskommission, der Gemeinderegierung von Jiantian und anderer relevanter Einheiten die ihre Aufgabe nicht erfüllt haben, haben die Fälle separat eingereicht und geprüft. Gleichzeitig wird die County Commission for Discipline Inspection and Supervision eine Untersuchung des Ausschreibungsverfahrens für nahrhafte Studentenmahlzeiten durchführen und die Ergebnisse der Öffentlichkeit bekannt geben, sobald sie verfügbar sind. </div></div><br><h3>Schriftart: 30 Pixel, keine Lücke festgelegt: Der Standardwert ist 30 Pixel, genau wie die Schriftart;</h3><div><div>Viele Freunde, die C-Sprache gelernt haben blicken zurück auf C. Wenn es um Sprachen geht, wird es auf jeden Fall Fragen wie diese geben: Warum läuft die C-Sprache unter einem schwarzen Fenster? Ein Programm, das entweder die Fläche eines Dreiecks berechnet oder die Anzahl der Narzissen ausgibt? Egal wie großartig die Programmierung war, warum können wir nicht trotzdem diese coole Software machen? Am Ende ist es einfach nur kindisch! Warum. </div><div>Erstens die Positionierung der Erfindung der C-Sprache: Seit Beginn ihrer Erfindung durch Dennis Ritchie, dem Erfinder der C-Sprache, wissen wir, dass es sich um ein System und nicht um eine grafische Software selbst handeln soll. Es sollte eine Reihe von Kernaufgaben umfassen, z. B. die Entwicklung von Treibern, die Erstellung des Systemkernels, die Dateiverwaltung, die interne Verwaltung, die Netzwerkkommunikation usw. </div><div>Zweitens die allgemeine Lehrpositionierung in China. Allerdings ist die Lehrpositionierung der meisten Universitäten für C-Sprache so, dass nur einige Hochschulen zusätzlich zu C-Sprachkursen auch Datenstrukturen anbieten sollten. , Computerarchitektur, Compilerprinzipien, Betriebssystemprinzipien und andere Kurse. </div><div>Drittens kann die C-Sprache verwendet werden, aber dies geschieht selten direkt in der C-Sprache. Wenn wir die C-Sprache lernen, wählen wir Konsolenprogramme aus, sodass Ihre Programme in einem schwarzen Fenster ausgeführt werden Wenn Sie eine Windows-Anwendung schreiben, wird es kein solches schwarzes Fenster geben. Es wird immer noch die Syntax der C-Sprache sein, die jeder verstehen kann. </div></div><br><h3>Schriftart: 30px, Einstellungsabstand: 14px;</h3><div><div>Viele Freunde, die C-Sprache studiert haben, werden es definitiv wissen, wenn sie auf C-Sprache zurückblicken Ich habe diese Frage: Warum läuft die C-Sprache unter einem schwarzen Fenster? Ein Programm, das entweder die Fläche eines Dreiecks berechnet oder die Anzahl der Narzissen ausgibt? Egal wie großartig die Programmierung war, warum können wir nicht trotzdem diese coole Software machen? Am Ende ist es einfach kindisch! Warum. </div><div>Erstens die Positionierung der Erfindung der C-Sprache: Seit Beginn ihrer Erfindung durch Dennis Ritchie, dem Erfinder der C-Sprache, wissen wir, dass es sich um ein System und nicht um eine grafische Software selbst handeln soll. Es sollte eine Reihe von Kernaufgaben umfassen, z. B. die Entwicklung von Treibern, die Erstellung des Systemkernels, die Dateiverwaltung, die interne Verwaltung, die Netzwerkkommunikation usw. </div><div>Zweitens die allgemeine Lehrpositionierung in China. Allerdings ist die Lehrpositionierung der meisten Universitäten für C-Sprache so, dass nur einige Hochschulen zusätzlich zu C-Sprachkursen auch Datenstrukturen anbieten sollten. , Computerarchitektur, Compilerprinzipien, Betriebssystemprinzipien und andere Kurse. </div><div>Drittens kann die C-Sprache verwendet werden, aber dies geschieht selten direkt in der C-Sprache. Wenn wir die C-Sprache lernen, wählen wir Konsolenprogramme aus, sodass Ihre Programme in einem schwarzen Fenster ausgeführt werden Wenn Sie eine Windows-Anwendung schreiben, wird es kein solches schwarzes Fenster geben. Es wird immer noch die Syntax der C-Sprache sein, die jeder verstehen kann. </div></div></body></html>Laufergebnisse:
5. Spaltenregel legt die Grenze zwischen Spalten fest
Grammatik:
Spaltenregel:<Spaltenregelbreite>||<Spaltenregelstil>||<Spaltenregelfarbe>
Parameterbeschreibung
● Spaltenregelbreite Die Dicke des Rahmens
●Rahmenstil im Spaltenregelstil
●column-rule-color Rahmenfarbe
PS: Achten Sie besonders darauf, dass es vorkommen kann, dass die Spalten den Rand überdecken, wenn der Abstand zwischen den Spalten < der Breite des Rahmens ist.
(1)Spaltenregelbreite
Legt die Rahmenstärke zwischen den Spalten eines Objekts fest oder ruft sie ab.
Grammatik:
Spaltenregelbreite:<Länge>|dünn|mittel|dick;
Parameterbeschreibung
●Länge: Verwenden Sie den Längenwert, um die Dicke des Rahmens zu definieren. Negative Werte sind nicht zulässig.
●mittel: definiert die Standardstärke des Randes;
●dünn: Definiert einen Rand, der dünner als die Standardstärke ist;
●dick: Definiert einen Rahmen, der dicker als die Standardstärke ist.
(2) Column-Rule-Style legt den Stil des Rahmens fest
Legt den Rahmenstil zwischen Spalten eines Objekts fest oder ruft ihn ab.
Grammatik
Spaltenregelstil: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
Parameterbeschreibung
●keine: keine Gliederung;
●hidden: Rand ausblenden;
●dotted: gepunkteter Umriss;
●gestrichelt: gestrichelter Umriss;
●solid: durchgezogener Umriss;
●double: Doppellinienumriss;
●Nut: 3D-Nutprofil;
●Kamm: 3D-konvexes Rillenprofil;
●Einschub: konkave 3D-Kantenkontur;
●Anfang: Konvexer 3D-Kantenumriss.
Hinweis: Wenn es einen Umriss mit zwei Linien gibt, umfasst die Breite den Abstand zwischen den beiden Linien.
(3) Column-Rule-Color legt die Rahmenfarbe fest
Legt die Rahmenfarbe zwischen Spalten eines Objekts fest oder ruft diese ab.
Grammatik:
Spaltenregelfarbe:<Farbe>;
Parameterbeschreibung: Farbe angeben. Ohne Breite und Stil wird die Farbe scheitern. Standardmäßig schwarz.
6. Column-Span legt das Element so fest, dass es alle Spalten umfasst
Legt fest oder ruft ab, ob das Objektelement alle Spalten umfasst.
Grammatik:
Spaltenspanne: none|all;
Parameterbeschreibung: keine: erstreckt sich nicht über alle Spalten. Alle: erstreckt sich über alle Spalten.
Es wird nicht wie andere Spaltenattribute im Container verwendet, sondern in den untergeordneten Elementen des Containers.
7. Column-Fill legt die Höhe der zu vereinheitlichenden Spalten fest (derzeit nicht kompatibel mit Mainstream-Browsern).
Legt fest oder ruft ab, ob die Höhe aller Spalten des Objekts einheitlich ist.
Grammatik:
Spaltenfüllung:autodefault|balance;
Parameterbeschreibung: auto: adaptiver Inhalt der Spaltenhöhe; Balance: Die Höhe aller Spalten wird mit der höchsten Spalte vereinheitlicht.
Gängige Browser sind mit diesem Attribut nicht kompatibel.
8. Column-Break setzt Newline
●column-break-before legt fest, ob eine Zeile vor dem angegebenen Objekt umgebrochen werden soll.
●column-break-after legt fest, ob eine Zeile nach dem angegebenen Objekt umgebrochen werden soll.
●column-break-inside legt fest, ob Zeilen innerhalb des Objekts unterbrochen werden sollen
(1)Spaltenumbruch-vorher
Ob Linien unterbrochen werden sollen, bevor das Objekt gesetzt oder abgerufen wird.
Grammatik:
Column-Break-before: auto|always|avoid;
Parameterbeschreibung: auto: Zeilenumbruch vor Elementen und Generierung neuer Spalten weder erzwingen noch verbieten; immer: Zeilenumbruch vor Elementen und Generierung neuer Spalten vermeiden;
(2)Spaltenumbruch danach
Ob Linien nach dem Setzen oder Abrufen des Objekts unterbrochen werden sollen.
Grammatik:
columns-break-after:auto|always|avoid;
Parameterbeschreibung: auto: Zeilenumbruch nach Elementen und Generierung neuer Spalten weder erzwingen noch verbieten; immer: Zeilenumbruch nach Elementen und Generierung neuer Spalten vermeiden;
(3) Column-Break-Inside-Attribut
Legt fest oder ruft ab, ob Linien innerhalb des Objekts unterbrochen werden.
Grammatik:
columns-break-inside:autodefault|avoid