ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用して単純なタイムラインを実装するサンプルコード
CSSを使用して単純なタイムラインを実装するサンプルコード
- 小云云オリジナル
- 2018-05-15 17:49:213137ブラウズ
この記事では、フロントエンドCSS実装の最も基本的なタイムラインのサンプルコードを中心に紹介し、参考になれば幸いです。
プロトタイプ:
コード:
<!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>関連推奨事項: タイムラインの先頭行と末尾行を削除する
jquery の例
Jquery によって実装されたいくつかの美しいタイムライン チュートリアル
以上がCSSを使用して単純なタイムラインを実装するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。