<!--HTML代码--/> <!DOCTYPE html> <!--说明一下代码全部是html--> <html> <!----> <head> <title>软测三期</title> </head> <body> <div class="container"> <div style="display:flex;"> <div style="flex:1;display:flex"> <div style="flex:1"></div> <div class="dot"></div> <div class="item"></div> </div> <div style="flex:1;display:flex"> <div class="item"></div> <div class="dot"></div> <div class="item"></div> </div> <div style="flex:1;display:flex"> <div class="item"></div> <div class="dot"></div> <div class="item"></div> </div> <div style="flex:1;display:flex"> <div class="item"></div> <div class="dot"></div> <div class="item"></div> </div> <div style="flex:1;display:flex"> <div class="item"></div> <div class="dot"></div> <div style="flex:1;"></div> </div> </div> <div style="display:flex;margin-top:10px;"> <div style="flex:1;display:flex"> <div style="flex:1"></div> <div class="">步骤1</div> <div class="item1"></div> </div> <div style="flex:1;display:flex"> <div class="item1"></div> <div class="">步骤244发到付1</div> <div class="item1"></div> </div> <div style="flex:1;display:flex"> <div class="item1"></div> <div class="">步骤3打发打发</div> <div class="item1"></div> </div> <div style="flex:1;display:flex"> <div class="item1"></div> <div class="">步骤4dfdasd</div> <div style="flex:1;"></div> </div> <div style="flex:1;display:flex"> <div class="item1"></div> <div class="">步骤5sdasdw</div> <div style="flex:1;"></div> </div> </div> </div> <style> .container{ width: 1000px; height: 50px; border:0px solid red; } .dot{ border:1px solid #007Aff; width: 11px; height: 11px; border-radius: 10px; background: white; margin: auto; margin-bottom: -6px; } .item{ flex:1; border-bottom:1px solid #cdcdcd; } .item1{ flex:1; border-bottom:0px solid #cdcdcd; } </style> </body> </html>
效果：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
