简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Implementierungsprinzip des mehrstufigen CSS3-Fortschrittsbalkens (mit Code)

Implementierungsprinzip des mehrstufigen CSS3-Fortschrittsbalkens (mit Code)

高洛峰
高洛峰Original
2018-05-15 11:30:365996Durchsuche

In diesem Artikel wird hauptsächlich das Implementierungsprinzip des mehrstufigen CSS3-Fortschrittsbalkens (mit Code) vorgestellt, der einen guten Referenzwert hat. Werfen wir einen Blick darauf mit dem Editor unten

Ich habe heute bei der Arbeit einen Code für einen mehrstufigen Fortschrittsbalken geschrieben und möchte ihn gerne mit Ihnen teilen!

Rendering:

Implementierungsprinzip des mehrstufigen CSS3-Fortschrittsbalkens (mit Code)

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://www.php.cn/) 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 detaillierte Inhalt vonImplementierungsprinzip des mehrstufigen CSS3-Fortschrittsbalkens (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css3
Stellungnahme：
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
Vorheriger Artikel：Teilen Sie eine Beispielmethode zum Festlegen des 3D-Transformationsabstands mithilfe des Perspektivattributs von CSS3Nächster Artikel：Teilen Sie eine Beispielmethode zum Festlegen des 3D-Transformationsabstands mithilfe des Perspektivattributs von CSS3

In Verbindung stehende Artikel

Mehr sehen