HTML+CSS打造简单的横向时间轴

最新推荐文章于 2025-06-20 12:12:13 发布

出道晚了

最新推荐文章于 2025-06-20 12:12:13 发布

阅读量9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： WEB前端时间轴

本文链接：https://blog.youkuaiyun.com/rockjun7788/article/details/48545829

本文介绍如何利用HTML和CSS技术制作一个简洁的时间轴。内容包括自定义时间轴的设计过程，适合需要实现简单时间轴功能的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大哥尽头需要一个时间轴，好吧找遍了各个模版觉得他们的功能过于复杂，看来还是需要自己手动敲。

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=gbk" http-equiv="content-type">
    <title></title>
    <style type="text/css">
      .time{
        width: 740px;
      }
      .time ul{
        list-style-type: none;
        background-image: url(../ui/purduct-nav/timeline-bg.png);
        background-repeat: repeat-x;
        height: 10px;
        position:relative;
          top: 10px;
      }
      .timeline li{
      float: left;
      width: 110px;
      background-image: url(../ui/purduct-nav/timeline-arrowgray.png);
      background-repeat: no-repeat;
      position:relative;
        top:-4px;
        left: 30px; 
      }
      li .pront-text{
      position:relative;
        top:-20px;
        left: -25px;
      font-size: 16px;
      font-family: arial, Arial, Tahoma;
      }
      .timeline li:hover{
      backgrou