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

最新推荐文章于 2025-11-03 11:01:03 发布

原创最新推荐文章于 2025-11-03 11:01:03 发布 · 9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#WEB前端 #时间轴

WEB前端专栏收录该内容

5 篇文章

订阅专栏

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

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

代码如下

<!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{
      background-image: url(../ui/purduct-nav/timeline-arrowred.png);
      background-repeat: no-repeat;
      color: #d3181c;
      font-weight: bold;
      }
  </style>
  </head>
  <body>
  <div class="time">
    <ul class="timeline">
      <li class="pront">
        <a class="pront-text">
          product
        </a>
      </li>
      <li class="pront">
        <a class="pront-text">
          product
        </a>
      </li>
      <li class="pront">
        <a class="pront-text">
          product
        </a>
      </li>
      <li class="pront">
        <a class="pront-text">
          product
        </a>
      </li>
      <li class="pront">
        <a class="pront-text">
          product
        </a>
      </li>
      <li class="pront">
        <a class="pront-text">
          product
        </a>
      </li>
    </ul>
  </div>
  </body>
</html>

要自己写，那就整一个吧