In diesem Artikel werden hauptsächlich das Implementierungsprinzip und der Code des mehrstufigen Fortschrittsbalkens vorgestellt, der einen guten Referenzwert hat. Schauen wir uns unten um
Heute habe ich einen Code für einen mehrstufigen Fortschrittsbalken bei der Arbeit geschrieben und möchte ihn gerne mit Ihnen teilen!
Rendering:
Codeanzeige:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>step</title>
</head>
<style>
ul,li{list-style:none;}
.flow_steps{height:55px;width:1000px;margin:100px auto;}
.flow_steps .steps{padding-left:0;}
.flow_steps ul li { float:left; height:55px; padding:0 70px 0 50px; line-height:55px; text-align:center; background:url(http://7xnlea.com2.z0.glb.qiniucdn.com/stepbg.png) no-repeat 100% 0 #E4E4E4;font-family: "microsoft yahei";color:#6C6C6C;}
.flow_steps ul li.done { background-position:100% 0px; background-color:#E1E1E1;}
.flow_steps ul li.current_prev { background-position:100% -55px; background-color:#E1E1E1;}
.flow_steps ul li.current { color:#fff; background-color:#DD4D3C;}
.flow_steps ul li.last { background-image:none;}
.flow_steps ul li.first { border-radius:10px 0 0 10px; }
.flow_steps ul li.last { border-radius:0 10px 10px 0; }
</style>
<body>
<p class="flow_steps clearfix">
<ul class="clearfix steps">
<li class=" done first current_prev ">
第一步
</li>
<li class=" current">
第二步
</li>
<li class=" ">
第三步
</li>
<li class=" last">
第四步
</li>
</ul>
</p>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Das obige ist der detaillierte Inhalt vonImplementierungscode des mehrstufigen CSS+Div-Fortschrittsbalkens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So ändern Sie Koordinaten in Matlab
So legen Sie Startelemente beim Start fest
Welche Funktion hat der Frequenzteiler?
OuYi-Auszahlungsmethode
Was tun, wenn das Laden der DLL fehlschlägt?
Methode zur Wiederherstellung der Oracle-Datenbank
Empfohlene Reihenfolge zum Erlernen von C++ und der C-Sprache
Einführung in die Bedeutung von Javascript
