Heim Backend-Entwicklung PHP-Tutorial 这样的列表显示是如何循环的呢

这样的列表显示是如何循环的呢

Jun 13, 2016 pm 01:17 PM
gt lt px quot style

这样的列表显示是怎么循环的呢
怎么没有上传图片功能的

这样不规则的图片循环怎么写代码? 



------解决方案--------------------

PHP code



<meta charset="utf-8">
<style>
.main_wrapper{width:900px;min-height:200px;margin:10px auto;overflow:hidden;}
.two_pictures{width:200px;float:left;margin-bottom:10px;padding:5px;margin:6px;}
.main_wrapper,.two_pictures,img{border:1px solid #ABC;}
.pic_1{height:150px;width:200px;}
.pic_2{height:100px;width:200px;}
<!--样式随便改-->
</style>

<div class="main_wrapper">
<?php for($i=0;$i<8;++$i){
if(($i)%2==0){
$style1="pic_2";
$style2="pic_1";
}else{
$style1="pic_1";
$style2="pic_2";
}
$picArr = array(
"http://www.iimei.com/1/xunhuan.jpg",
"http://www.iimei.com/1/xunhuan.jpg"
);//把图片改为动态的,自已调整
echo '
    <div class="two_pictures">
    <img  src="/static/imghw/default1.png" data-src="'.$picArr[0].'" class="lazy" . alt=" 这样的列表显示是如何循环的呢 " >
    <span>This is a test</span>
    <img  src="/static/imghw/default1.png" data-src="'.$picArr[1].'" class="lazy" . alt=" 这样的列表显示是如何循环的呢 " >
    <span>This is a test</span>
    </div>
';
}
?>
    


 <div class="clear">
                 
              
              
        
            </div>
Nach dem Login kopieren
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was sind die Unterschiede zwischen Huawei GT3 Pro und GT4? Was sind die Unterschiede zwischen Huawei GT3 Pro und GT4? Dec 29, 2023 pm 02:27 PM

Viele Benutzer werden sich bei der Auswahl von Smartwatches für die Marke Huawei entscheiden. Viele Benutzer sind neugierig auf den Unterschied zwischen Huawei GT3pro und GT4. Was sind die Unterschiede zwischen Huawei GT3pro und GT4? 1. Aussehen GT4: 46 mm und 41 mm, das Material ist Glasspiegel + Edelstahlgehäuse + hochauflösende Faserrückschale. GT3pro: 46,6 mm und 42,9 mm, das Material ist Saphirglas + Titangehäuse/Keramikgehäuse + Keramikrückschale 2. Gesundes GT4: Mit dem neuesten Huawei Truseen5.5+-Algorithmus werden die Ergebnisse genauer. GT3pro: EKG-Elektrokardiogramm sowie Blutgefäß und Sicherheit hinzugefügt

So ändern Sie element.style So ändern Sie element.style Nov 24, 2023 am 11:15 AM

Methoden für element.style zum Ändern der Hintergrundfarbe des Elements; 2. Ändern der Schriftgröße des Elements; 4. Ändern des Schriftstils des Elements; . Ändern Sie die horizontale Ausrichtung des Elements. Detaillierte Einführung: 1. Ändern Sie die Hintergrundfarbe des Elements. Die Syntax lautet "document.getElementById("myElement").style.backgroundColor = "red";" 2. Ändern Sie die Schriftgröße des Elements usw.

Fix: Snipping-Tool funktioniert unter Windows 11 nicht Fix: Snipping-Tool funktioniert unter Windows 11 nicht Aug 24, 2023 am 09:48 AM

Warum das Snipping-Tool unter Windows 11 nicht funktioniert Das Verständnis der Grundursache des Problems kann dabei helfen, die richtige Lösung zu finden. Hier sind die häufigsten Gründe, warum das Snipping Tool möglicherweise nicht ordnungsgemäß funktioniert: Focus Assistant ist aktiviert: Dies verhindert, dass das Snipping Tool geöffnet wird. Beschädigte Anwendung: Wenn das Snipping-Tool beim Start abstürzt, ist es möglicherweise beschädigt. Veraltete Grafiktreiber: Inkompatible Treiber können das Snipping-Tool beeinträchtigen. Störungen durch andere Anwendungen: Andere laufende Anwendungen können mit dem Snipping Tool in Konflikt geraten. Das Zertifikat ist abgelaufen: Ein Fehler während des Upgrade-Vorgangs kann zu diesem Problem führen. Diese einfache Lösung ist für die meisten Benutzer geeignet und erfordert keine besonderen technischen Kenntnisse. 1. Aktualisieren Sie Windows- und Microsoft Store-Apps

So ändern Sie den Stil in React dynamisch So ändern Sie den Stil in React dynamisch Dec 28, 2022 am 10:44 AM

Methoden zum dynamischen Ändern des Stils: 1. Fügen Sie ref zu dem Element hinzu, dessen Stil geändert werden muss, mit einer Syntax wie „<div className='scroll-title clear-fix' ref={ this.manage }>“; Durch dynamische Steuerung wird der Stil des Elements geändert. 3. Durch die Verwendung von JS-Code im DOM werden die Übergänge verschiedener DOMs angezeigt und ausgeblendet.

Was sind die neuen Funktionen im Vue3-Stil und wie werden sie verwendet? Was sind die neuen Funktionen im Vue3-Stil und wie werden sie verwendet? May 14, 2023 pm 10:52 PM

Neue Stilfunktionen In der Vue3.2-Version wurden zahlreiche Stilverbesserungen für Einzeldateikomponenten vorgenommen, z. B. lokale Stile, CSS-Variablen und für Vorlagen verfügbare Stile. (Teilen von Lernvideos: Vue-Video-Tutorial) 1. Lokaler Stil Wenn das Etikett ein Bereichsattribut hat, wird sein CSS nur auf die Elemente der aktuellen Komponente angewendet: hi.example{color:red;} 2. Der Tiefenselektor ist Scoped Wenn der Selektor im Stil eine „tiefere“ Auswahl treffen möchte, also Unterkomponenten beeinflussen möchte, können Sie die Pseudoklasse :deep() verwenden: .a:deep(.b){/*. .*/ }DOM-Inhalte, die über v-html erstellt wurden, werden nicht erstellt

Die Entwicklung und Anwendung von CSS-Layouteinheiten: von Pixeln zu relativen Einheiten basierend auf der Schriftgröße des Stammelements Die Entwicklung und Anwendung von CSS-Layouteinheiten: von Pixeln zu relativen Einheiten basierend auf der Schriftgröße des Stammelements Jan 05, 2024 pm 05:41 PM

Von px zu rem: Die Entwicklung und Anwendung von CSS-Layouteinheiten Einführung: In der Front-End-Entwicklung müssen wir häufig CSS verwenden, um das Seitenlayout zu implementieren. In den letzten Jahren haben sich CSS-Layouteinheiten weiterentwickelt und weiterentwickelt. Ursprünglich verwendeten wir Pixel (px) als Einheit, um die Größe und Position von Elementen festzulegen. Mit dem Aufkommen des Responsive Designs und der Beliebtheit mobiler Geräte haben Pixeleinheiten jedoch nach und nach einige Probleme aufgedeckt. Um diese Probleme zu lösen, wurde die neue Einheit rem ins Leben gerufen und nach und nach im CSS-Layout weit verbreitet. eins

So beheben Sie den Fehler „Verbindung zum App Store nicht möglich' auf dem iPhone So beheben Sie den Fehler „Verbindung zum App Store nicht möglich' auf dem iPhone Jul 29, 2023 am 08:22 AM

Teil 1: Erste Schritte zur Fehlerbehebung Überprüfen des Apple-Systemstatus: Bevor wir uns mit komplexen Lösungen befassen, beginnen wir mit den Grundlagen. Das Problem liegt möglicherweise nicht an Ihrem Gerät; die Server von Apple sind möglicherweise ausgefallen. Besuchen Sie die Systemstatusseite von Apple, um zu sehen, ob der AppStore ordnungsgemäß funktioniert. Wenn es ein Problem gibt, können Sie nur warten, bis Apple es behebt. Überprüfen Sie Ihre Internetverbindung: Stellen Sie sicher, dass Sie über eine stabile Internetverbindung verfügen, da das Problem „Verbindung zum AppStore nicht möglich“ manchmal auf eine schlechte Verbindung zurückzuführen ist. Versuchen Sie, zwischen WLAN und mobilen Daten zu wechseln oder die Netzwerkeinstellungen zurückzusetzen (Allgemein > Zurücksetzen > Netzwerkeinstellungen zurücksetzen > Einstellungen). Aktualisieren Sie Ihre iOS-Version:

Vue-Fehler: V-bind kann nicht verwendet werden, um Klasse und Stil korrekt zu binden. Wie kann das Problem gelöst werden? Vue-Fehler: V-bind kann nicht verwendet werden, um Klasse und Stil korrekt zu binden. Wie kann das Problem gelöst werden? Aug 26, 2023 pm 10:58 PM

Vue-Fehler: V-bind kann nicht verwendet werden, um Klasse und Stil korrekt zu binden. Wie kann das Problem gelöst werden? In der Vue-Entwicklung verwenden wir häufig die V-Bind-Anweisung, um Klasse und Stil dynamisch zu binden. Manchmal können jedoch Probleme auftreten, z. B. dass wir V-Bind nicht korrekt zum Binden von Klasse und Stil verwenden können. In diesem Artikel werde ich die Ursache dieses Problems erläutern und Ihnen eine Lösung anbieten. Lassen Sie uns zunächst die v-bind-Direktive verstehen. v-bind wird zum Binden von V verwendet

See all articles