这篇文章给大家分享的是有关CSS怎么实现最基本的时间轴的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。原型：代码： <!DOCTYPE html ><html>
这篇文章给大家分享的是有关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 div { height: 65px; color: #333333; } #timecenter div { height: 65px; color: #333333; } #timeright div { height: 65px; color: #333333; } #timeright div 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> <!--右侧信息--> <div class="col-md-10 col-sm-10 col-xs-10" style="margin-top:30px;"> <div class="col-md-4 col-sm-4 col-xs-4" id="timeleft"> <div>2012-12-24 8:00</div> <div>2012-12-24 8:00</div> <div>2012-12-24 8:00</div> <div>2012-12-24 8:00</div> </div> <div class="col-md-4 col-sm-4 col-xs-4" id="timecenter"> <div 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> </div> </div> <div class="col-md-4 col-sm-4 col-xs-4" id="timeright"> <div> <p>完工交车</p> <p>1小时</p> </div> <div> <p>完工交车</p> <p>1小时</p> </div> <div> <p>完工交车</p> <p>1小时</p> </div> <div> <p>完工交车</p> <p>1小时</p> </div> </div> </div> </body></html>感谢各位的阅读！关于“css怎么实现最基本的时间轴”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
--结束END--
本文标题: css怎么实现最基本的时间轴
本文链接: https://www.lsjlt.com/news/253367.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0