Heim >Web-Frontend >CSS-Tutorial >Beispielcode für die Implementierung einer einfachen Zeitleiste mithilfe von CSS
Beispielcode für die Implementierung einer einfachen Zeitleiste mithilfe von CSS
- 小云云Original
- 2018-05-15 17:49:213135Durchsuche
In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung der grundlegendsten Zeitleiste in Front-End-CSS vorgestellt und als Referenz mit Ihnen geteilt. Ich hoffe, er kann Ihnen helfen.
Prototyp:
Code:
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>状态详情</title>
<style>
#timeleft p {
height: 65px;
color: #333333;
}
#timecenter p {
height: 65px;
color: #333333;
}
#timeright p {
height: 65px;
color: #333333;
}
#timeright p p {
margin: 0 0 0px;
}
.cicle1 {
position: absolute;
top: 0px;
left: -10px;
border-radius: 10px;
list-style: none;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
background: #ffffff;
}
.cicle2 {
position: absolute;
top: 70px;
left: -10px;
border-radius: 10px;
list-style: none;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
background: #ffffff;
}
.cicle3 {
position: absolute;
top: 140px;
left: -10px;
border-radius: 10px;
list-style: none;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
background: #ffffff;
}
.cicle4 {
position: absolute;
top: 210px;
left: -10px;
border-radius: 10px;
list-style: none;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
background: #ffffff;
}
</style>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
</head>
<body>
<!--右侧信息-->
<p class="col-md-10 col-sm-10 col-xs-10" style="margin-top:30px;">
<p class="col-md-4 col-sm-4 col-xs-4" id="timeleft">
<p>2012-12-24 8:00</p>
<p>2012-12-24 8:00</p>
<p>2012-12-24 8:00</p>
<p>2012-12-24 8:00</p>
</p>
<p class="col-md-4 col-sm-4 col-xs-4" id="timecenter">
<p style="height:212px; border-left:1px solid #366595; position:absolute; left:65px;">
<ul>
<li class="cicle1"></li>
<li class="cicle2"></li>
<li class="cicle3"></li>
<li class="cicle4"></li>
</ul>
</p>
</p>
<p class="col-md-4 col-sm-4 col-xs-4" id="timeright">
<p>
<p>完工交车</p>
<p>1小时</p>
</p>
<p>
<p>完工交车</p>
<p>1小时</p>
</p>
<p>
<p>完工交车</p>
<p>1小时</p>
</p>
<p>
<p>完工交车</p>
<p>1小时</p>
</p>
</p>
</p>
</body>
</html>Verwandte Empfehlungen:
jquery Remove Timeline Erläuterung von Beispielen für Kopf- und Schlusszeilen
Mehrere schöne Timeline-Tutorials implementiert mit Jquery
So implementieren Sie Timeline-Effekte mit CSS3
Das obige ist der detaillierte Inhalt vonBeispielcode für die Implementierung einer einfachen Zeitleiste mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!