Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Ein Neuanfang für das Design von div+css-Webseitenlayouts (1)

黄舟
Freigeben: 2016-12-29 14:11:02
Original
1224 Leute haben es durchsucht

DIV+CSS ist einer der häufig verwendeten Begriffe in Website-Standards (oder „WEB-Standards“). Diese Webseiten-Layout-Methode unterscheidet sich von der herkömmlichen HTML-Webdesign-Sprache Mit der Tabellenpositionierungsmethode kann die Trennung von Webseiteninhalt und -präsentation realisiert werden. XHTML ist die Abkürzung für The Extensible HyperText Markup Language. XHTML basiert auf der Extensible Markup Language (XML), einer neuen, auf der Grundlage von HTML optimierten und verbesserten Sprache. Der Zweck besteht darin, sich an weitere Anforderungen zukünftiger Netzwerkanwendungen anzupassen, die auf XML-Anwendungen und leistungsstarken Datenkonvertierungsfunktionen basieren. In den XHTML-Website-Designstandards wird die Tabellenpositionierungstechnologie nicht mehr verwendet, sondern DIV+CSS wird verwendet, um verschiedene Positionierungen zu erreichen.

Früher war es Tabellenlayout. . Es wird im Grunde nicht mehr verwendet (Tabelle wird nur zum Anzeigen von Daten verwendet).
div bedeutet auf Chinesisch „Bereich“ und CSS bedeutet „Cascading Style Sheet“. Es ist ersichtlich, dass der Kern das Layout und nicht der Stil ist

I Ich lerne DIV Vor +CSS müssen Sie mit HTML vertraut sein.

Okay, welches Tool sollte ich jetzt verwenden, also Notepad? + Browser ist in Ordnung, Sie benötigen keinen Server, Sie können auch Dreamweaver cs5 verwenden. Dazu gibt es am besten die chinesische Version des CSS-Stylesheet-Handbuchs Erledige alles

Die oben genannten Dinge sind leicht online zu finden und können in der Gruppe Webprogrammierung Entwicklung heruntergeladen werden: 197132320. Natürlich sind auch Freunde, die Webprogrammierung lieben, herzlich willkommen

Beginnen wir mit dem Lernen. Machen Sie sich zunächst mit der Grundstruktur von HTML vertraut und erstellen Sie eine HTML-Datei test.html

<html>
<head>
<title>这是HTML基本结构</title>
<head>
<body>
hello!
</body>
</html>
Nach dem Login kopieren
Nach dem Login kopieren

Wenn Sie „Hallo“ direkt in die HTML-Datei eingeben, ist dies natürlich möglich Wird normalerweise angezeigt, aber dies entspricht nicht den Standards. Lassen Sie uns div kennenlernen. Es kann tatsächlich als Container oder Box betrachtet werden >
Aber Sie können dieses Div nicht auf der Webseite sehen, da es noch transparent ist.
Wir müssen ihm einen Stil für die Anzeige zuweisen. Zuerst muss der Rahmen angezeigt werden, Breite und Höhe sind 100 Pixel, die Hintergrundfarbe ist rot

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div>这是一个div</div>
</body>
</html>
Nach dem Login kopieren


Jedes HTML-Tag hat ein Style-Attribut, und div ist natürlich keine Ausnahme
border: solid 1px border repräsentiert das CSS-Randattribut solid 1px Es sind seine beiden Werte zu den Leerzeichen.

Solid bedeutet, dass der Rand 1 Pixel beträgt.
<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div>
</body>
</html>
Nach dem Login kopieren
Was ist ein Pixel?


width:100px;height:100px; legt die Breite und Höhe jedes Attributs fest: Trennen Sie die Attribute;
background:red setzt den Hintergrund auf rot

Der obige Code wird wie folgt angezeigt




Seitenleiste schließen

Ein Neuanfang für das Design von div+css-Webseitenlayouts (1)CSS-Homepage > CSS >

Groß, Mittel, Klein

div+css Web-Layout-Design Neuanfang (1)

Zeit: 2014-03-09 20:49 Klicks: 709 mal

DIV+CSS ist ein Website-Standard (oder einer der häufig verwendeten Begriffe in (genannt „WEB-Standard“), div+css ist eine Webseiten-Layout-Methode. Diese Webseiten-Layout-Methode unterscheidet sich von der Tabellen-(Tabellen-)Positionierungsmethode in der traditionellen HTML-Webseiten-Designsprache. Sie kann das Seitenlayout und die Präsentation trennen. XHTML ist die Abkürzung für The Extensible HyperText Markup Language. XHTML basiert auf der Extensible Markup Language (XML), einer neuen, auf der Grundlage von HTML optimierten und verbesserten Sprache. Der Zweck besteht darin, sich an weitere Anforderungen zukünftiger Netzwerkanwendungen anzupassen, die auf XML-Anwendungen und leistungsstarken Datenkonvertierungsfunktionen basieren. In den XHTML-Website-Designstandards wird die Tabellenpositionierungstechnologie nicht mehr verwendet, sondern DIV+CSS wird verwendet, um verschiedene Positionierungen zu erreichen.

Früher war es Tabellenlayout. . Es wird im Grunde nicht mehr verwendet (Tabelle wird nur zum Anzeigen von Daten verwendet).

div bedeutet auf Chinesisch „Bereich“ und CSS bedeutet „Cascading Style Sheet“. Es ist ersichtlich, dass der Kern das Layout und nicht der Stil ist


I Ich lerne DIV Vor +CSS müssen Sie mit HTML vertraut sein.

Okay, welches Tool sollte ich jetzt verwenden, also Notepad? + Browser ist in Ordnung, Sie benötigen keinen Server, Sie können auch Dreamweaver cs5 verwenden. Dazu gibt es am besten die chinesische Version des CSS-Stylesheet-Handbuchs Erledige alles

Die oben genannten Dinge sind leicht online zu finden und können in der Gruppe Webprogrammierung Entwicklung heruntergeladen werden: 197132320. Natürlich sind auch Freunde, die Webprogrammierung lieben, herzlich willkommen

Beginnen wir mit dem Lernen. Machen Sie sich zunächst mit der Grundstruktur von HTML vertraut und erstellen Sie eine HTML-Datei test.html



Wenn Sie „Hallo“ direkt in die HTML-Datei eingeben, ist dies natürlich möglich Wird normalerweise angezeigt, aber dies entspricht nicht den Standards. Lassen Sie uns div kennenlernen. Es kann tatsächlich als Container oder Box betrachtet werden >
Aber Sie können dieses Div nicht auf der Webseite sehen, da es noch transparent ist.

Wir müssen ihm einen Stil für die Anzeige zuweisen. Zuerst muss der Rahmen angezeigt werden, Breite und Höhe sind 100 Pixel, die Hintergrundfarbe ist rot
<html>
<head>
<title>这是HTML基本结构</title>
<head>
<body>
hello!
</body>
</html>
Nach dem Login kopieren
Nach dem Login kopieren

<html>
<head>
<title>DIV认识</title>
<head>
<body>
<div style="border:solid 1px;width:100px;height:100px;background:red">这是一个div</div>
</body>
</html>
Nach dem Login kopieren

每一个html标签都有style属性,div当然也不例外
border:solid 1px border表示css边框属性 solid 1px 是它的两个值 注意要空格
solid 表示边框实现显示 1px表示边框宽度为1像素
什么是像素 看这里http://baike.baidu.com/view/575.htm

width:100px;height:100px;是设置div的宽度和高度 注意每个属性给值用: 属性之间隔开用;
background:red 背景设置红色

如上代码在浏览器显示如下


还得提一下,浏览器最好用IE8 谷歌浏览器,火狐浏览器,360的也可以
因为他们支持css标准还算兼容,别的浏览器就说不准了,你看的结果可能不一样
css浏览器兼容日后再说



引入css样式除了上面一种,还有两种
一种是外部样式引入,特别推荐这种,一种是内部样式

外部样式引入需要在head标签里加

另外还的在html文件相同目录下创建mystyle.css文件

内部样式是直接在head写入,由于贴子特殊性,本贴全部用内部样式,这样看的舒服点,但在实际中最好用外部样式引入

这是内部样式

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>
Nach dem Login kopieren

这比之前要规范多了,body里也看的简单多了,要多多用这种样式与内容分离模式



如果是这种

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div style="border:solid 1px;width:200px;height:200px;background:green">这是一个div</div>
</body>
</html>
Nach dem Login kopieren

两种样式你觉得它会采用哪个?
style属性这种是内联样式
这就是优先级问题,它会采用离它最近的那个,也就是style属性里的
同样,如果外部样式与内部样式相同,它会优先采用内部样式的
如果不是全部都相同,它会把不同的合并起来,相同的就优先采用内部样式的
优先级
内联》内部》外部

 以上就是div+css网页布局设计新开端(1)的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage