Umfassende Liste häufig verwendeter DIV-Attribute, organisiert von Ihnen selbst_HTML/Xhtml

Heim

Web-Frontend

HTML-Tutorial

Umfassende Liste häufig verwendeter DIV-Attribute, organisiert von Ihnen selbst_HTML/Xhtml_Webseitenerstellung

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:39 PM

div

1. Attributliste

Kopieren Sie den Code

Der Code lautet wie folgt:

Farbe: #999999 Textfarbe
Schriftfamilie: Song-Stil-Schriftart
Schriftgröße: 10pt Textgröße
Schriftstil:itelic Text kursiv Stil
Schriftvariante:klein -caps small Schriftart
letter-spacing: 1pt Textabstand
line-height: 200 % Zeilenhöhe festlegen
font-weight:bold Text fett
vertical-align:sub Subscript
vertikal - align:super Superscript
text-decoration:line-through ?h hinzufügen, um Zeile zu teilen
text-decoration:overline Obere Zeile hinzufügen
text-decoration:underline Unterstrich hinzufügen
text-decoration: none ? hAußer beim Verbinden der unteren Zeile
text-transform: captialize Das erste Wort wird groß geschrieben
text-transform: Englische Großschreibung in Großbuchstaben
text-transform: Englische Kleinschreibung
text-align:right Text * rechts -aligned
text-align:linker Text*linke Ausrichtung
text-align:zentrierter Text, zentrierte Ausrichtung
Dies sind einige einfache Texteffekte, die auf CSS-Seiten angewendet werden können.
Hintergrund
Hintergrundfarbe: schwarz Hintergrundfarbe
Hintergrundbild: url(image/bg.gif) Hintergrundbild
Hintergrundanhang: fester fester Hintergrund
Hintergrundwiederholung: wiederholen Wiederholen Anordnung – Webseiten-Standard
Hintergrundwiederholung: keine Wiederholung, keine Wiederholung der Anordnung
Hintergrundwiederholung: Wiederholung-x wiederholt die Anordnung auf der x-Achse
Hintergrundwiederholung: Wiederholung-y wiederholt die Anordnung auf die y-Achse
Hintergrundposition: 90 % 90 % Die Position der x- und y-Achse des Hintergrundbilds
Link
A Alle Hyperlinks
A:link Hyperlink-Textformat
A :besucht Textformat des durchsuchten Links
A:aktiv Drücken Sie auf das Verbindungsformat
A:schweben Sie mit der Maus auf die Verbindung
Rand
Rand oben: 1 Pixel durchgehender schwarzer oberer Rahmen
Rand unten : 1 Pixel durchgehender #6699cc unterer Rahmen
Rand links: 1 Pixel durchgehender #6699cc linker Rand
Rand rechts: 1 Pixel durchgehender #6699cc rechter Rand
Rand: 1 Pixel durchgehender #6699cc vier Ränder
gestrichelte Linie

<br>Durchgezogene Linie<br><TEXTAREA STYLE="border:1px solid pink"> Dasselbe wie die Zeilenhöhe des Textes, d. h. line- Es reicht aus, dass die Werte von height und height gleich sind. Geben Sie dem div schließlich einen Überlauf: versteckt, um den überschüssigen Teil auszublenden. <br><br>
</div>
<br> 2. Gemeinsame Attribute <strong> </strong> <br><br><div class="msgheader">
<div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode95'));">Code kopieren<u></u></span>Der Code lautet wie folgt:</div>
<div class="msgborder" id="phpcode95"> <br>1. Höhe: Legen Sie die Höhe des DIV fest. Breite: Legen Sie die Breite des DIV fest. <br>2. Rand: Wird verwendet, um den erweiterten Rand von DIV festzulegen, der den Abstand zum übergeordneten Container darstellt. Rand: gefolgt von vier Abständen, die die Abstände vom oberen, rechten, unteren und linken Rand des übergeordneten Containers sind: [oben][rechts][unten][links] <br> kann separat eingestellt werden: margin-left : bis Der Abstand zum linken Rand des übergeordneten Containers; Rand-oben: der Abstand zum oberen Rand des übergeordneten Containers; der untere Rand des übergeordneten Containers. <br>3. Polsterung: Wird verwendet, um den inneren Rand von DIV festzulegen (den Abstand zwischen dem inneren Unterelement und der DIV-Grenze). Polsterung: gefolgt von vier Abständen, die die Abstände vom oberen, rechten, unteren und linken Rand des übergeordneten Containers sind: [oben][rechts][unten][links]: Es ist zu beachten, dass der Abstand durch festgelegt wird Padding ist nicht in seiner eigenen Breite und Höhe enthalten (in IE7 und FF). Wenn beispielsweise die Breite eines DIV auf 100 Pixel und Padding-Left auf 50 Pixel festgelegt ist, ist das DIV in diesem Fall 150 Pixel breit auf der Seite angezeigt. <br>4. Rahmen: Legen Sie den Rahmenstil der DIV-Anzeige fest: Legen Sie das Anzeigeattribut fest. Zu seinen Werten gehören „block“ und „none“: Legen Sie die Flussrichtung von DIV auf der Seite fest. Zu seinen Werten gehören „left“ (links angezeigt), „right“ (rechts angezeigt) und „none“ (Hintergrund). Legen Sie den Hintergrundstil des DIV fest. Nach dem Hintergrund können Sie der Hintergrundfarbe, dem Hintergrundbild, der Kachelmethode und anderen Stilen direkt folgen. Es kann auch separat über die folgenden Eigenschaften festgelegt werden. <br>Hintergrundfarbe: Legen Sie die Hintergrundfarbe fest; Hintergrundanhang: Die Anhangsmethode des Hintergrundbilds, seine Werte sind scrollen und fest; Hintergrundbild: Geben Sie das vorhandene Hintergrundbild an Kachelmethode des Hintergrundbilds. Zu seinen Werten gehören „no-repeat“ (nicht gekachelt), „repeat“ (in zwei Richtungen gekachelt), „repeat-x“ (horizontal gekachelt), „repeat-y“ (vertikal gekachelt); Positionieren Sie die Hintergrundposition im DIV. Sein Wert hat verschiedene Kombinationen von oben unten links rechts. Sie können einen bestimmten Standort auch mithilfe von Koordinaten angeben. <br>5. Position: Legen Sie die Positionierungsmethode von DIV fest. Es gibt vier Positionsattribute: statisch, fest, relativ und absolut. Häufig verwendete Relativ- und Absolutwerte. Wenn es als statisch angegeben ist, folgt das DIV den HTML-Regeln. Wenn es als relativ angegeben ist, können Sie oben, links, rechts und unten verwenden, um den Offset des DIV auf der Seite festzulegen (relativ zu seinem eigenen Offset). Ebenen können derzeit nicht verwendet werden. Wenn es als „absolut“ angegeben ist, können Sie „oben“, „links“, „rechts“ und „unten“ verwenden, um das DIV absolut zu positionieren (wenn es als „fest“ angegeben ist). Der DIV in IE7 und FF ist relativ zum Bildschirm festgelegt. Keine Änderung, er hat keine Auswirkung in IE6 (ich weiß nicht warum). <br>6. Schriftart: Geben Sie den Textstil im DIV an, dem mehrere Textstile folgen können. Schriftartenfamilie: Legen Sie den zu verwendenden Schriftartennamen fest. Geben Sie die Dicke des Textes an. Zu den Werten gehören: Fett, Fett, Heller usw.; Schriftart: Geben Sie die Größe des Textes an. Geben Sie den Textstil an, seine Werte umfassen kursiv, normal, schräg usw.; Farbe: gibt die Textfarbe an, seine Werte umfassen Mitte (Mitte), links und rechts ausgerichtet; -decorator: Wird für die Textdekoration verwendet. Zu seinen Werten gehören „no underline overline line-through“ und „text-indent“: legt die Einrückung des Textes fest; Zu seinen Werten gehören Kleinschreibung, Großschreibung (Großschreibung des ersten Buchstabens), keine Richtung: die Flussrichtung des Inhalts. Zu seinen Werten gehören ltr (von links nach rechts), rtl (von rechts nach links); line-height: gibt die Zeilenhöhe des Textes an; <br>7. Überlauf: Inhaltsüberlaufkontrolle. Zu seinen Werten gehören Bildlauf (Bildlaufleiste wird immer angezeigt), Sichtbar (Bildlaufleiste wird nicht angezeigt, aber der überschüssige Teil ist sichtbar), Auto (Bildlaufleiste wird angezeigt, wenn der Inhalt angezeigt wird). überschreitet) und ausgeblendet (Bildlaufleiste wird angezeigt, wenn der Inhalt überschritten wird). <br><br><br><strong>3. Einige Spezialeffekte: <br><br></strong>1. Legen Sie die Stapelreihenfolge der DIVs fest. Bei Verwendung des Z-Index-Attributs muss die Position absolut angegeben werden. <br><br>2. Cursor: Legen Sie den Stil des Cursors auf dem DIV fest. <br><br>3. Clip: Legen Sie das Ausschnittrechteck fest. clip:rect(oben rechts unten links); Legen Sie den Abstand zwischen oben, unten, links und rechts fest, aber zu diesem Zeitpunkt muss die Position als absolut angegeben werden. <br><br>4. Opazitätstransparenzfilter:alpha(opacity=value) zB: filter:alpha(opacity=50);opacity:0.5; <br><br><strong>4 </strong><br><br>Absolute Positionierung und relative Positionierung (Position) <strong> </strong><br>Absolute Positionierung: <br><br>Positionierungsattribute werden der Schlüssel zum Glück für Internetnutzer sein: <br><br>H4 { position: absolute; top: 43px } <br><br>Mit dieser CSS-Regel kann der Browser die Startposition von <H4> 43 Pixel von oben. Beachten Sie, dass die einzigen Einstellungen hier „links“ und „oben“ sind. Mit anderen Worten: Der Text wird von links nach rechts und von oben nach unten in das Browserfenster eingegeben. <br><br>Die Attribute left und top sind sehr intuitiv. Left (links) legt den Abstand von der linken Seite des Browserfensters fest, und top (top) legt den Abstand vom oberen Rand des Browserfensters fest. Bei der Einstellung dieser Abstände können Sie verschiedene Gradeinheiten oder Skalenwerte verwenden, die Sie kennengelernt haben. Bei der Verwendung von Maßstabswerten beziehen sich die Maßstabswerte auf die Abmessungen des übergeordneten Features. <br><br>Was können Sie ansprechen? irgendetwas! Absätze, Wörter, GIF- und JPEG-Bilder, QUICKTIME-Filme und mehr. <br><br>Relative Positionierung: <br><br>Mit der absoluten Positionierung können Sie ein Element genau an seiner unabhängigen Position auf der Seite positionieren, unabhängig von den Positionierungseinstellungen anderer Elemente auf der Seite. Relative Positionierung bedeutet, dass die Position des Features, das Sie positionieren, relativ zu seiner zugewiesenen Position in der Datei ist. Beispiel: <br><br>I { position: relative; top: 10px } <br><br>Der Schlüssel zur relativen Positionierung ist, dass die Position des positionierten Elements relativ zu der Stelle ist, an der es normalerweise sein sollte. . Relative Positionierungseinheiten erscheinen zwischen Zeilen gewöhnlicher statischer Positionierungseinheiten und werden positioniert, ohne sich vollständig von den statischen Positionierungseinheiten zu trennen. Wenn Sie die relative Positionierung nicht mehr verwenden, wird die Anzeigeposition des Texts wieder normal angezeigt. Seien Sie vorsichtig, wenn Sie die relative Positionierung verwenden, da sonst die Seite leicht unübersichtlich wird. <br><br>Neben relativer Positionierung und absoluter Positionierung können Sie auch statische Parameterwerte verwenden. „Statisch“ ist der Standardwert für das Positionsattribut. Seine Verwendung ist die gleiche wie die Positionierungsmethode in gewöhnlichem HTML und es können keine speziellen Positionierungseinstellungen angehängt werden. Das heißt, nichts anderes kann die Positionierung einer Zelle beeinflussen, außer die Eigenschaft „margin“ oder das Schweben der Zelle mithilfe der Eigenschaft „float“. <br><br><br>Steuerung der Positionierungseinheit (Breite, Höhe, Sichtbarkeit) <strong> </strong><br>Zusätzlich zur Steuerung der oberen linken Eckposition der Positionierungseinheit können Sie auch die Breite und steuern Höhe der Einheit und die Sichtbarkeit der Einheit auf der Seite. <br><br>Breite: Die positionierten Elemente werden bei der Anzeige auf der Seite weiterhin von links nach rechts angezeigt. Mit dem width-Attribut können Sie Einschränkungen für den Zeichenfluss nach rechts festlegen, also die Breite des Elements festlegen. <br><br>DIV { position: absolute; top: 40px; width: 150px } <br><br>Wenn der Browser diese Regel empfängt, zeigt er den Text entsprechend dem durch die Regel angegebenen Effekt an , und begrenzen Sie außerdem die maximale horizontale Größe von Absätzen auf 150 Pixel. <br><br>Das Breitenattribut gilt nur für absolut positionierte Features. Sie können jede der Längeneinheiten verwenden, die wir kennengelernt haben, oder die Breite mithilfe eines Skalierungswerts festlegen, der relativ zum übergeordneten Feature ist. In IE 4 ist dieses Attribut auch für Bilder verfügbar. Durch die Breiteneinstellung können Sie das Bild künstlich verbreitern oder komprimieren. <br><br>Höhe: Theoretisch sollte die Höhe ähnlich wie die Breite eingestellt werden, jedoch in vertikaler Richtung: <br><br>DIV { Position: absolut; oben: 40px; Höhe: 150px } <br><br>Hier verwende ich „theoretisch“, da einige Browser das Höhenattribut nicht unterstützen. <br><br>Sichtbarkeit: Mithilfe von CSS können Sie Elemente ausblenden, sodass sie auf der Seite nicht sichtbar sind. Dieses Attribut gilt sowohl für lokalisierte als auch für nicht lokalisierte Features. <br><br>H4 { Sichtbarkeit: versteckt } <br><br>Optionen: <br><br>sichtbar macht das Feature sichtbar<br><br>versteckt macht das Feature versteckt<br><br>erben Zeigt an dass es die Sichtbarkeitseinstellungen des übergeordneten Features erbt. <br><br>Der Wert inherit ist der Standardwert. Dadurch erbt die Zelle die Sichtbarkeit der übergeordneten Zelle. Wenn also ein Absatz ausgeblendet ist, werden auch alle darin enthaltenen Inline-Zellen ausgeblendet. Diese Vererbung kann durch explizit angegebene Sichtbarkeit außer Kraft gesetzt werden. Wenn beispielsweise eine EM-Zelle innerhalb eines Abschnitts als sichtbar gekennzeichnet ist und der Abschnitt ausgeblendet ist, verschwinden alle anderen Inhalte innerhalb des Abschnitts und nur der Text in der EM-Zelle ist sichtbar. <br><br>Wenn ein Element ausgeblendet ist, nimmt es immer noch den ursprünglichen Platz im Browserfenster ein. Wenn Sie also Text um ein ausgeblendetes Bild fließen lassen, sieht es so aus, als würde der Text einen leeren Bereich umgeben. Diese Neuigkeiten <br><br>Dieses Attribut ist nützlich, wenn Sie Sprachen schreiben und dynamisches HTML verwenden. Sie können beispielsweise festlegen, dass ein bestimmter Absatz oder ein bestimmtes Bild nur angezeigt wird, wenn die Maus darüber fährt. <br><br><br>Einheitenebene (Z-Index) <strong> </strong><br>Das Z-Index-Attribut wird zum Stapeln von Zellen auf dem Bildschirm verwendet. Standardmäßig werden Einheiten in der Reihenfolge gestapelt, in der sie im HTML-Markup erscheinen – das heißt, später erscheinende Einheiten werden über den früher erscheinenden Einheiten gestapelt. Die Z-Index-Eigenschaft definiert tatsächlich die Stapelreihenfolge von Geschwistereinheiten und die Stapelung von Einheiten relativ zu ihren übergeordneten Einheiten. Gemäß dem Spezifikationsentwurf werden Gruppen von Einheiten mit positiven Z-Index-Werten über ihren übergeordneten Einheiten gestapelt, und ihre eigene Stapelreihenfolge wird durch die Größe ihrer Werte bestimmt (Einheiten mit größeren Werten sind eingeschaltet). Spitze). In ähnlicher Weise werden Einheitengruppen mit negativen Z-Index-Werten unter der übergeordneten Einheit gestapelt, und ihre eigene Stapelreihenfolge wird auch durch die Größe des Werts bestimmt (Einheiten mit größeren Werten befinden sich beispielsweise auf der oberen Ebene). , Einheiten mit einem Wert von -1 befinden sich in der oberen Ebene -2 über der Einheit. <br><br>Verwenden Sie reine Ganzzahlen für diesen Parameterwert. Der Z-Index wird für absolut positionierte oder relativ positionierte Features verwendet. Sie können auch den Z-Index des Bildes festlegen. (Für Communicator ist es am besten, das <IMG>-Tag in ein <SPAN>- oder <DIV>-Tag einzuschließen und dann den Z-Index auf das <SPAN> oder <DIV> anzuwenden.) <br><br> <strong>Absolut positionierte Einheiten ausschneiden (Clip) <br></strong><br>Absolut positionierte Einheiten können ausgeschnitten werden – das heißt, der dem Benutzer angezeigte Bereich wird ausgeschnitten, sodass nur ein Teil der Einheit angezeigt wird und der Rest transparent wird . Dies ist keine sehr nützliche Funktion für herkömmliche text- und bildbasierte Webseiten. Dies ist jedoch nützlich, wenn Multimedia-Seiten benötigt werden. Beispielsweise unterstützen sowohl Netscape Communivator 4 als auch Internet Explorer 4 Multimedia-Seiten. Sie passen den Ausschnittsbereich um die Einheit über die Skriptschnittstelle des Dokuments dynamisch an, sodass durchgezogener Text „eingeblendet“ wird und Bilder sowie andere Anzeigefunktionen eingeblendet werden. <br><br>In CSS wird das Ausschneiden durch die Clip-Funktion gesteuert. Diese Funktion kann nur für absolut positionierte Einheiten verwendet werden, was die Einheit entsprechend ihrer Außenkante ausschneidet (entspricht eigentlich keinem Ausschneiden). . Darüber hinaus kann das Clip-Feld durch den folgenden Ausdruck festgelegt werden: <br><br>clip : rect(top,right.bottom,left); <br><br>wobei oben, rechts, unten und links jeweils die sind Rechteckiges Clip-Feld Die Positionen der oberen, rechten, unteren und linken Kante relativ zur oberen linken Ecke der zugeschnittenen Einheit. Die Werte für Oben, rechts, unten und links können ein beliebiger absoluter oder relativer Längenwert (aber kein Prozentwert) oder das Schlüsselwort auto sein. Der Wert „auto“ bedeutet, dass nach der Platzierung aller Seiten des Beschneidungsbereichs der Inhalt der beschnittenen Einheit diesen Bereich nicht überschreitet. <br><br><strong>Überlauf der Steuereinheit (Überlauf) </strong> <br><br>Festlegen der Breite und Höhe der absoluten oder relativen Positionierungseinheit. Es ist wahrscheinlich, dass der angegebene Bereich die Anforderungen der Der tatsächliche Inhalt der Einheit führt dazu, dass der Inhalt der Einheit überläuft. Mithilfe von Overflow können Sie angeben, wie der Browser mit Überläufen umgeht: Der Wert „none“ (Standardeinstellung) ermöglicht es dem Browser, Überlaufinhalte anzuzeigen, sodass die Zelle den angegebenen Bereich überlaufen kann. Der Wert „Clip“ erfordert, dass der Browser den Zellinhalt am unteren und rechten Rand der Zelle abschneidet, sodass Zellinhalte, die über den angegebenen Bereich hinausgehen, nicht angezeigt werden. Der Wert scroll erfordert außerdem, dass der Browser den Zellinhalt am unteren und rechten Rand der Zelle ausschneidet (wie beim Ausschneiden). Allerdings sollte der Browser (wenn möglich) Bildlaufleisten für die Zelle bereitstellen, damit der Benutzer durch die beschnittenen Elemente scrollen kann Inhalt.</div>
</div>

</div>
					</div>
					<div class="wzconShengming_sp">
						<div class="bzsmdiv_sp">Erklärung dieser Website</div>
						<div>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</div>
					</div>
				</div>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>Heiße KI -Werkzeuge</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>KI-gestützte App zum Erstellen realistischer Aktfotos</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>Online-KI-Tool zum Entfernen von Kleidung aus Fotos.</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>Ausziehbilder kostenlos</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>KI-Kleiderentferner</p>
											</div>
										</div>
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!</p>
											</div>
										</div>
																</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/de/ai">Mehr anzeigen</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR3">
							<div class="phpmain1_4R_readrank">
								<div class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>Heiße Werkzeuge</h2>
								</div>
								<div class="phpgenera_Details_mainR3_bottom">
																		<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
													<h3>Notepad++7.3.1</h3>
												</a>
												<p>Einfach zu bedienender und kostenloser Code-Editor</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 chinesische Version" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 chinesische Version</h3>
												</a>
												<p>Chinesische Version, sehr einfach zu bedienen</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Senden Sie Studio 13.0.1" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_title">
													<h3>Senden Sie Studio 13.0.1</h3>
												</a>
												<p>Leistungsstarke integrierte PHP-Entwicklungsumgebung</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
													<h3>Dreamweaver CS6</h3>
												</a>
												<p>Visuelle Webentwicklungstools</p>
											</div>
										</div>
																			<div class="phpmain_tab2_mids_top">
											<a href="https://www.php.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac-Version" />
											</a>
											<div class="phpmain_tab2_mids_info">
												<a href="https://www.php.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Mac-Version</h3>
												</a>
												<p>Codebearbeitungssoftware auf Gottesniveau (SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div class="phpgenera_Details_mainR3_more">
									<a href="https://www.php.cn/de/ai">Mehr anzeigen</a>
								</div>
							</div>
						</div>

<div class="phpgenera_Details_mainR4">
						<div class="phpmain1_4R_readrank">
							<div class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>Heiße Themen</h2>
							</div>
							<div class="phpgenera_Details_mainR4_bottom">
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/de/faq/gmailyxdlrkzn" title="Wo ist der Login-Zugang für Gmail-E-Mail?" class="phpgenera_Details_mainR4_bottom_title">Wo ist der Login-Zugang für Gmail-E-Mail?</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>7621</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>15</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/de/faq/cakephp-tutor" title="CakePHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP-Tutorial</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1389</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>52</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/de/faq/steamdzhmcssmgs" title="Wie lautet das Format des Kontonamens von Steam?" class="phpgenera_Details_mainR4_bottom_title">Wie lautet das Format des Kontonamens von Steam?</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>89</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>11</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/de/faq/winactivationkeyper" title="Win11 -Aktivierungsschlüssel dauerhaft" class="phpgenera_Details_mainR4_bottom_title">Win11 -Aktivierungsschlüssel dauerhaft</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>70</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>19</span>
										</div>
									</div>
								</div>
															<div class="phpgenera_Details_mainR4_bottoms">
									<a href="https://www.php.cn/de/faq/newyorktimesdailybrief" title="NYT -Verbindungen Hinweise und Antworten" class="phpgenera_Details_mainR4_bottom_title">NYT -Verbindungen Hinweise und Antworten</a>
									<div class="phpgenera_Details_mainR4_bottoms_info">
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>31</span>
										</div>
										<div class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>136</span>
										</div>
									</div>
								</div>
														</div>
							<div class="phpgenera_Details_mainR3_more">
								<a href="https://www.php.cn/de/faq/zt">Mehr anzeigen</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div class="Article_Details_main2">
					<div class="phpgenera_Details_mainL4">
						<div class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div class="phpgenera_Details_mainL4_info">

<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/de/faq/500390.html" title="Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202301/30/2023013009193331216.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt" />
								</a>
								<a href="https://www.php.cn/de/faq/500390.html" title="Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt" class="phphistorical_Version2_mids_title">Wie man mit CSS erkennt, dass einem Div eine Ecke fehlt</a>
								<span class="Articlelist_txts_time">Jan 30, 2023 am	 09:23 AM</span>
								<p class="Articlelist_txts_p">CSS-Methode, um zu erkennen, dass einem Div eine Ecke fehlt: 1. Erstellen Sie eine HTML-Beispieldatei und definieren Sie ein Div. 2. Legen Sie die Hintergrundfarbe für die Breite und Höhe des Div fest. 3. Fügen Sie dem zu löschenden Div eine Pseudoklasse hinzu eine Ecke und setzen Sie die Pseudoklasse auf „Die gleiche Farbe wie die Hintergrundfarbe verwenden“, drehen Sie sie dann um 45 Grad und positionieren Sie sie dann an der Ecke, die entfernt werden muss.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/de/faq/530809.html" title="Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/465/014/168292609556078.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API" />
								</a>
								<a href="https://www.php.cn/de/faq/530809.html" title="Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API" class="phphistorical_Version2_mids_title">Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API</a>
								<span class="Articlelist_txts_time">May 01, 2023 pm	 03:28 PM</span>
								<p class="Articlelist_txts_p">Vorwort Seit Kurzem gibt es auf GitHub ein Browser-Skript, das neben der Browser-Plugin auch Polier- und Zusammenfassungsfunktionen unterstützt -ins, es verwendet auch Tauri-Paketierung, abgesehen von der Tatsache, dass Tauri den Rust-Teil verwendet, ist der Browser-Teil immer noch relativ einfach zu implementieren. Heute werden wir ihn manuell implementieren. Über die von openAI bereitgestellte Schnittstelle können wir beispielsweise den folgenden Code kopieren und in der Browserkonsole eine Anfrage initiieren, um die Übersetzung abzuschließen //Beispiel constOPENAI_API_KEY="s</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/de/faq/617459.html" title="Was ist das Div-Box-Modell?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202310/09/2023100916235185066.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was ist das Div-Box-Modell?" />
								</a>
								<a href="https://www.php.cn/de/faq/617459.html" title="Was ist das Div-Box-Modell?" class="phphistorical_Version2_mids_title">Was ist das Div-Box-Modell?</a>
								<span class="Articlelist_txts_time">Oct 09, 2023 pm	 05:15 PM</span>
								<p class="Articlelist_txts_p">Das div-Box-Modell ist ein Modell, das für das Webseiten-Layout verwendet wird. Es behandelt Elemente auf einer Webseite als rechteckige Boxen. Dieses Modell enthält vier Teile: Inhaltsbereich, Innenabstand, Rand und Rand. Der Vorteil des Div-Box-Modells besteht darin, dass es das Layout der Webseite und den Abstand zwischen Elementen leicht steuern kann. Durch Anpassen der Größe des Inhaltsbereichs, des Innenrands, des Rands und des Außenrands können verschiedene Layouteffekte erzielt werden Das Box-Modell bietet außerdem einige Eigenschaften und Methoden, mit denen der Stil und das Verhalten der Box über CSS und JavaScript dynamisch geändert werden können.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/de/faq/599024.html" title="Was ist der Unterschied zwischen iframe und div?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202308/28/2023082811424957714.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was ist der Unterschied zwischen iframe und div?" />
								</a>
								<a href="https://www.php.cn/de/faq/599024.html" title="Was ist der Unterschied zwischen iframe und div?" class="phphistorical_Version2_mids_title">Was ist der Unterschied zwischen iframe und div?</a>
								<span class="Articlelist_txts_time">Aug 28, 2023 am	 11:46 AM</span>
								<p class="Articlelist_txts_p">Der Unterschied zwischen iframe und div besteht darin, dass iframe hauptsächlich zum Einführen externer Inhalte verwendet wird, die Inhalte von anderen Websites laden oder eine Webseite in mehrere Bereiche unterteilen können. Jeder Bereich verfügt über einen eigenen unabhängigen Browsing-Kontext, während div hauptsächlich zum Unterteilen von und verwendet wird Organisieren Sie den Inhaltsblock zur Layout- und Stilkontrolle.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/de/faq/624838.html" title="Was sind die Unterschiede zwischen div und span?" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202311/02/2023110214291073075.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was sind die Unterschiede zwischen div und span?" />
								</a>
								<a href="https://www.php.cn/de/faq/624838.html" title="Was sind die Unterschiede zwischen div und span?" class="phphistorical_Version2_mids_title">Was sind die Unterschiede zwischen div und span?</a>
								<span class="Articlelist_txts_time">Nov 02, 2023 pm	 02:29 PM</span>
								<p class="Articlelist_txts_p">Die Unterschiede sind: 1. div ist ein Element auf Blockebene und span ist ein Inline-Element. 2. div belegt automatisch eine Zeile, während span nicht automatisch umgebrochen wird. 3. div wird zum Umschließen größerer Strukturen und Layouts verwendet span wird zum Umschließen von Text oder anderen Inline-Elementen verwendet. 4. div kann andere Elemente auf Blockebene und Inline-Elemente enthalten, und span kann andere Inline-Elemente enthalten.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/de/faq/686724.html" title="jQuery-Tipps: Beherrschen Sie das Hinzufügen von Tags in Divs" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170866747358643.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQuery-Tipps: Beherrschen Sie das Hinzufügen von Tags in Divs" />
								</a>
								<a href="https://www.php.cn/de/faq/686724.html" title="jQuery-Tipps: Beherrschen Sie das Hinzufügen von Tags in Divs" class="phphistorical_Version2_mids_title">jQuery-Tipps: Beherrschen Sie das Hinzufügen von Tags in Divs</a>
								<span class="Articlelist_txts_time">Feb 23, 2024 pm	 01:51 PM</span>
								<p class="Articlelist_txts_p">Titel: jQuery-Tipps: Beherrschen Sie die Methode zum Hinzufügen von Tags zu Divs. In der Webentwicklung stoßen wir häufig auf Situationen, in denen wir der Seite dynamisch Tags hinzufügen müssen. Sie können jQuery verwenden, um DOM-Elemente einfach zu bearbeiten und schnelle Funktionen zum Hinzufügen von Beschriftungen zu erreichen. In diesem Artikel wird erläutert, wie Sie mit jQuery Tags in Divs hinzufügen und spezifische Codebeispiele anhängen. 1. Vorbereitungsarbeiten Bevor Sie jQuery verwenden, müssen Sie die jQuery-Bibliothek auf der Seite einführen. Sie können sie über einen CDN-Link einführen oder auf dieser Seite herunterladen.</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/de/faq/682562.html" title="Einfache Möglichkeit, div-Elemente mit jQuery hinzuzufügen" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/170834781149477.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Einfache Möglichkeit, div-Elemente mit jQuery hinzuzufügen" />
								</a>
								<a href="https://www.php.cn/de/faq/682562.html" title="Einfache Möglichkeit, div-Elemente mit jQuery hinzuzufügen" class="phphistorical_Version2_mids_title">Einfache Möglichkeit, div-Elemente mit jQuery hinzuzufügen</a>
								<span class="Articlelist_txts_time">Feb 19, 2024 pm	 09:03 PM</span>
								<p class="Articlelist_txts_p">Einfache und leicht verständliche Techniken zum Hinzufügen von jQuerydiv-Elementen jQuery ist eine der am häufigsten verwendeten JavaScript-Bibliotheken in der Front-End-Entwicklung. Sie bietet praktische Methoden zum Betreiben von DOM-Elementen und kann Seitenelemente schnell hinzufügen, löschen, ändern und andere Funktionen ausführen. Bei der Verwendung von jQuery müssen wir häufig div-Elemente bedienen. Im Folgenden werden einige einfache und leicht verständliche Techniken zum Hinzufügen von div-Elementen vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Erstellen Sie ein neues div-Element und fügen Sie es hinzu</p>
							</div>
														<div class="phphistorical_Version2_mids">
								<a href="https://www.php.cn/de/faq/624132.html" title="So zeigen Sie zwei Divs nebeneinander an" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/202311/01/2023110111343491842.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="So zeigen Sie zwei Divs nebeneinander an" />
								</a>
								<a href="https://www.php.cn/de/faq/624132.html" title="So zeigen Sie zwei Divs nebeneinander an" class="phphistorical_Version2_mids_title">So zeigen Sie zwei Divs nebeneinander an</a>
								<span class="Articlelist_txts_time">Nov 01, 2023 am	 11:36 AM</span>
								<p class="Articlelist_txts_p">Die Methoden sind: 1. Setzen Sie die beiden div-Elemente auf das Attribut „float:left;“ 2. Verwenden Sie das Flex-Layout von CSS, um Elemente einfach nebeneinander anzuzeigen.</p>
							</div>
													</div>

<a href="https://www.php.cn/de/web-designer.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/de/about/us.html">Über uns</a>
            <a href="https://www.php.cn/de/about/disclaimer.html">Haftungsausschluss</a>
            <a href="https://www.php.cn/de/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

document.addEventListener("DOMContentLoaded", (event) => {
			// 定义一个函数来处理滚动链接的点击事件
			function setupScrollLink(scrollLinkId, targetElementId) {
				const scrollLink = document.getElementById(scrollLinkId);
				const targetElement = document.getElementById(targetElementId);

if (scrollLink && targetElement) {
					scrollLink.addEventListener("click", (e) => {
						e.preventDefault(); // 阻止默认链接行为
						targetElement.scrollIntoView({
							behavior: "smooth"
						}); // 平滑滚动到目标元素
					});
				} else {
					console.warn(
						`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
						);
				}
			}

// 使用该函数设置多个滚动链接
			setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
			setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
			setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
			setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
			setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
			setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
			// 可以继续添加更多的滚动链接设置
		});

window.addEventListener("scroll", function () {
			var fixedElement = document.getElementById("Article_Details_main1Lmain");
			var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
			var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
			var scrollHeight = document.documentElement.scrollHeight; // 页面总高度

// 计算距离底部的距离
			var distanceToBottom = scrollHeight - scrollTop - clientHeight;

// 当距离底部小于或等于300px时，取消固定定位
			if (distanceToBottom <= 980) {
				fixedElement.classList.remove("Article_Details_main1Lmain");
				fixedElement.classList.add("Article_Details_main1Lmain_relative");
			} else {
				// 否则，保持固定定位
				fixedElement.classList.remove("Article_Details_main1Lmain_relative");
				fixedElement.classList.add("Article_Details_main1Lmain");
      		}
    	});

</script>
</body>

</html>