Heim  >  Artikel  >  Web-Frontend  >  Tutorial zum Webseiten-Layout: Einführung in die CSS-Webseiten-Layout-Eigenschaften

Tutorial zum Webseiten-Layout: Einführung in die CSS-Webseiten-Layout-Eigenschaften

高洛峰
高洛峰Original
2017-03-10 11:29:221392Durchsuche

Da es sich um ein Beispiel-Layout handelt, habe ich nicht mehr Zeit auf die Details des Layouts verwendet. Wer sich mit CSS auskennt, kann es jedoch herunterladen und detaillierter gestalten Wird eine sehr gute Webseite sein. Diejenigen, die lernen, können sie herunterladen, um die Attributparameter zu ändern und zu modifizieren, um die Eigenschaften der Attribute anschaulicher zu erfassen und so den Zweck einer tieferen Beherrschung von CSS zu erreichen. Ist CSS wirklich schwer zu lernen? Da es sich um ein Beispiel für ein Layout-Tutorial handelt, habe ich nicht mehr Zeit mit den Details des Layouts verbracht. Wer sich mit CSS auskennt, kann es jedoch sehr gut herunterladen Gute Webseite zum vorläufigen Lernen. Laden Sie herunter, um Attributparameter zu ändern und zu modifizieren, um die Eigenschaften von Attributen anschaulicher zu erfassen und den Zweck einer tieferen Beherrschung von CSS zu erreichen.


Ist es wirklich schwierig, CSS zu lernen? Es ist nur so, dass mir die Erfahrung fehlt, es zu beherrschen. Ja! Als jemand, der es erlebt hat, ist es meiner Meinung nach schwierig, etwas passiv zu lernen. Meine Erfahrung beim Lernen ist, dass man zuerst die Essenz beherrschen kann (beginnend mit wichtigen Attributen). Wenn Sie das Wesentliche beherrschen, werden diese Attribute natürlich bei weitem nicht ausreichen, um Ihre Bedürfnisse zu erfüllen und Sie dazu zu bringen, nach Wissen zu suchen und automatisch andere verwandte Attribute zu erweitern, um das Verständnis von CSS auf natürliche Weise zu beherrschen. Das ist meiner Meinung nach eine Methode (wenn mir das jemand beim Lernen gesagt hätte, wäre ich leider viel weniger Umwege gegangen). Dies ist meine erste Schreiberfahrung, die ich mit Ihnen teilen möchte. Möglicherweise gibt es einige Mängel in der Sprachorganisation, daher möchte ich die Internetnutzer bitten, diese einzubeziehen, aber ich glaube, dass ich mit mehr Erfahrung in der Zukunft besser schreiben werde. Im Folgenden sind einige meiner Erfahrungen und einige konzeptionelle Erklärungen aufgeführt, die ich für notwendig halte. Wenn Sie Erfahrungen teilen möchten, hinterlassen Sie bitte einen Kommentar zur gemeinsamen Diskussion.

In der aktuellen Webtechnologie ist CSS+p zu einem Mainstream-Website-Standard geworden, wir können ihn (Webstandard) nennen. CSS ist die Abkürzung für Cascading Style Sheets im Englischen. Es handelt sich um eine Computersprache, die zur Darstellung von Dateiformaten wie HTML oder XML verwendet wird.

Bevor wir CSS verstehen und lernen, müssen wir zunächst die Vorteile und Annehmlichkeiten dieser Computersprache für uns verstehen. Ich persönlich halte dies für sehr grundlegend, aber auch notwendig, und es wird helfen, das Erlernen von CSS+p zu klären Zweck. Script House vereint die Erfahrung von Website-Technologie und -Designern und fasst aus Sicht von Netzwerkanwendungen die Vorteile und Probleme des CSS + p-Website-Designs wie folgt zusammen:

Zunächst wird der große Vorteil von CSS reflektiert Im prägnanten Code kann bei einer großen Website viel Bandbreite eingespart werden (die eigentliche Bedeutung besteht darin, dass der Anteil effektiver Schlüsselwörter am Gesamtcode der Webseite erhöht wird, da Websites, die mit Webstandards erstellt wurden, suchmaschinenfreundlich sind). haben gewisse Vorteile; aus Sicht des Programms und der Webseitengestaltung können beide unabhängig voneinander sein und dann kombiniert werden, um den Arbeitsaufwand zu reduzieren und eine schwere Entwicklung zu vermeiden.

Zweitens macht die mit CSS+p erstellte Website die Website-Überarbeitung relativ einfach. Bei vielen Problemen ist nur eine Änderung des CSS erforderlich, ohne dass das Programm geändert werden muss, wodurch die Kosten für die Website-Überarbeitung gesenkt und viel Zeit gespart wird. Ich habe mit Kollegen im Entwicklungsraum an ähnlichen Projektfällen gearbeitet und glaube, dass meine Kollegen sich der praktischen Zweckmäßigkeit dieser Vorgehensweise mehr oder weniger bewusst sein werden.

Der letzte Punkt ist, dass ich, als ich zum ersten Mal damit in Kontakt kam, das Gefühl hatte, dass es sehr schwierig war, ihn zu kontrollieren. Stattdessen hatte ich das Gefühl, dass dieser Tisch eine bessere Kontrolle über die Position hatte und ich mich möglicherweise gegen die Verwendung sträubte p zum Schreiben von Webseitenlayouts. Tatsächlich handelt es sich um einen Anpassungsprozess, durch den wir die wichtigsten Punkte durch viele praktische Operationen und Übungen genau verstehen können. Danach können Sie spüren, dass es sich tatsächlich ständig ändert. Verschiedene Layouts einer Seite können unterschiedliche Schreibweisen haben, aber egal wie Sie es schreiben, der Code folgt einem Prinzip: Das heißt: Der definierte Name ist wie möglichst universell. Das heißt, ich nenne es so wenig Code wie möglich, um mehr Kastenformen zu definieren (die Benennung sollte standardisiert und kombinatorisch sein, damit andere Designer sie besser verstehen und verwenden können). Bei der anderen Frage geht es darum, ob ID oder Klasse verwendet werden soll. Viele Menschen sind darüber möglicherweise verwirrt. Tatsächlich ist es relativ, aber jetzt besteht meine Schreibgewohnheit hauptsächlich darin, den Unterricht mehr zu nutzen. Ich denke, das ist bequemer und für meine Schreibgewohnheiten geeigneter.

Im Folgenden sind die grundlegenden, häufig verwendeten Attribute aufgeführt, die nach Ansicht der chinesischen PHP-Website zuerst verstanden und beherrscht werden müssen:

Wichtige Attribute von CSS, die verstanden und beherrscht werden müssen:

Rand: auto |. Länge nach Längenwert bestehend aus Gleitkommazahl und Einheitenbezeichner Prozent. Der Prozentsatz basiert auf der Höhe des übergeordneten Objekts. Bei Inline-Objekten können die linken und rechten Außenränder negative Werte sein.

padding: length Ein Längenwert, der aus einer Gleitkommazahl und einer Einheitenkennung | oder einem Prozentsatz besteht. Der Prozentsatz basiert auf der Breite des übergeordneten Objekts.

Float: none |. left |right Dies ist ein Float, ein Attribut, das beim Definieren des Layouts verwendet werden muss. Bei der Verwendung sollten Sie auf die auftretenden Positionierungs- und Browserkompatibilitätsprobleme achten Praxis Erfahren Sie mehr über diese Eigenschaft während des Betriebs. Um dieses Attribut zu haben, müssen Sie die folgenden unterstützenden Attribute verstehen: „Keine“ | „Keine“ erlaubt keine schwebenden Objekte auf beiden Seiten; Erlaube schwebende Objekte auf der linken Seite. Es gibt ein schwebendes Objekt auf der rechten Seite, das keine schwebenden Objekte auf der rechten Seite zulässt.

background:url(images/aardvark.gif) left top no-repeat |. repeat-x | Das Definieren von Hintergrundbildern zur Verschönerung des Layouts ist ebenfalls ein sehr häufig verwendetes Attribut.

Überlauf: sichtbar |. automatisch |. scroll Ich verwende diese Funktion normalerweise im Layout, um Browserkompatibilitätsprobleme zu verhindern und zu lösen.

border:1px solid #CCCCC Hiermit wird die Rahmengröße definiert , Farbattribute.

list-style-image list-style-position list-stle-type Dieses Listenattribut wird normalerweise in geordneten Listen und ungeordneten Listen verwendet. Dies ist Verify dass CSS-Definitionen der Tabellendarstellung überlegen sind.

Bei den oben genannten CSS-Attributen handelt es sich um die CSS-Attribute, die man sich beim Erlernen von CSS merken und verstehen muss. Ein vollständiges Verständnis seiner Eigenschaften kann die Freiheit unseres Anwendungslayouts erheblich verbessern. Es ist also nicht schwer, dies zu lernen. Wenn Sie die oben genannten Stile beherrschen, werden Sie feststellen, dass Sie sich bei der Erstellung der Seite inkompetent gefühlt haben Erstellen Sie das gewünschte Layout basierend auf Ihrem eigenen logischen Denken und die CSS-Resistenz wird erheblich gelindert.

Apropos: Ich möchte eine sehr häufige Frage stellen. Ich glaube nicht, dass der WEB-Standard die Verwendung von p in allen Tabellen verbietet. Ich hatte zu Beginn diese falsche Vorstellung. Mein Verständnis von „Standard“ ist, dass Standarddesigner gute Schreibgewohnheiten entwickeln und eine Mainstream-Vereinheitlichung erreichen. In einigen Fällen sind Tabellen p in Bezug auf die funktionale Implementierung von Webseiten immer noch überlegen, und die übermäßige Verwendung von p ohne Einschränkung verbraucht die IE-Analyse und erhöht die Belastung der CPU. Dies ist auch ein Thema, dem wir Aufmerksamkeit schenken sollten.

Während Sie die oben genannten häufig verwendeten Attribute beherrschen, ist das Folgende eine von Design Ming im Internet-Blog geschriebene CSS-Layoutvorlage mit drei Spalten. Sie konzentriert sich hauptsächlich auf die Beherrschung der Essenz von CSS und das Erlernen des Webseiten-Layout-Tutorials Beispielvorlagen können Internetnutzer herunterladen. Die Vorlage wird entsprechend dem Inhalt des Artikels sorgfältig geprüft, um die Technologie zu verstehen und zu beherrschen. Diese Vorlage wurde von unserer Website zusammengestellt, um die oben aufgeführten wichtigen CSS-Eigenschaften abzudecken.

Da es sich um ein Beispiel für ein Layout-Tutorial handelt, habe ich nicht mehr Zeit mit den Details des Layouts verbracht. Ich denke jedoch, dass das Layout der Vorlage gut ist und es herunterladen und detaillierter gestalten kann Art. Zum vorläufigen Lernen können Sie die Webseite herunterladen, um die Eigenschaften der Attribute besser zu verstehen und so den Zweck einer tieferen Beherrschung von CSS zu erreichen.

Das obige ist der detaillierte Inhalt vonTutorial zum Webseiten-Layout: Einführung in die CSS-Webseiten-Layout-Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn