hier ist die Grundidee
Sie erstellen drei Li-Listen unter dem ul- oder li-Tag
Sie machen die li-Tag-Position: relativ; und geben Sie etwas linke Polsterung
li { height: 40px; padding-left: 20px; display: flex; align-items: center; position: relative; }
Sie verwenden die CSS-Eigenschaft li::before und erstellen einen linken Rand.
li::before { content: ''; position: absolute; left: -16px; border-left: 2px solid black; height: 100%; width: 1px; }
Jetzt verwenden Sie die CSS-Eigenschaft li::after und machen drei Kreise darum
li::after { content: ''; display: inline-block; height: 10px; width: 10px; border-radius: 50%; background-color: blue; margin-left: -80px; }
Jetzt schneiden Sie endlich die Zeile aus der ersten und letzten Liste ab
li:first-child:before { top: 20px; } li:last-child:before { top: -20px; }
und Ergebnis:
vollständiger Code:
html:
css:
li { height: 40px; padding-left: 20px; display: flex; align-items: center; position: relative; } li::before { content: ''; position: absolute; left: -16px; border-left: 2px solid black; height: 100%; width: 1px; } li::after { content: ''; display: inline-block; height: 10px; width: 10px; border-radius: 50%; background-color: blue; margin-left: -80px; } li:first-child:before { top: 20px; } li:last-child:before { top: -20px; }
Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.
Copyright© 2022 湘ICP备2022001581号-3