如何实现这个时间表看起来只使用html和css也许一些 Bootstrap

到目前为止，我只能做到这一点。我使用的示例代码从w3school

我试图找出得到一年在相同的位置一样，在图片中，但没有运气，也试图插入图像背景的圆圈，但只设法颜色填充

/* The actual timeline (the vertical ruler) */

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */

.timeline::after {
  content: ' ';
  position: absolute;
  width: 6px;
  background-color: #ffc200;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -5px;
}

/* Container around content */

.contaiment {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */

.contaiment::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -11px;
  background-color: #ffc200;
  border: 4px solid #ffc200;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */

.left {
  left: 0;
}

/* Place the container to the right */

.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */

/* .left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
} */

/* Add arrows to the right container (pointing left) */

.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */

.right::after {
  left: -16px;
}

/* The actual content */

.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

<div class="timeline">
  <div class="contaiment left">
    <div class="content">
      <p>2017
        <p>
          <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="contaiment right">
    <div class="content">
      <p class="">2017
        <p>
          <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="contaiment left">
    <div class="content">
      <p class="">2017
        <p>
          <p>Lorem ipsum..</p>
    </div>
  </div>
</div>

我知道您只想用HTML和CSS做一些事情，但是请看一下这个JQuery库，它非常容易使用。
您只需要设置要连接的2个元素。

$("#div1, #div2").connections();
$("#div2, #div3").connections();
$("#div3, #div4").connections();

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
        <title>Hello, world!</title>
    </head>

    <body>
        <p style="width: 50px;height: 50px;border: 1px solid black;" id="div1">TEST</p>
        <p style="width: 50px;height: 50px;margin-left: 50px;border: 1px solid black;" id="div2">TEST</p>
        <p style="width: 50px;height: 50px;margin-left: 200px;border: 1px solid black;" id="div3">TEST</p>
        <p style="width: 50px;height: 50px;margin-left: 300px;border: 1px solid black;" id="div4">TEST</p>

        <!-- Script retrieved from https://raw.githubusercontent.com/musclesoft/jquery-connections/gh-pages/jquery.connections.js -->
    <script>
      (function($) {
  $.fn.connections = function(options) {
    if (options === "update") {
      return processConnections(update, this);
    } else if (options === "remove") {
      return processConnections(destroy, this);
    } else {
      options = $.extend(
        true,
        {
          borderClasses: {},
          class: "connection",
          css: {},
          from: this,
          tag: "connection",
          to: this,
          within: ":root"
        },
        options
      );
      connect(options);
      return this;
    }
  };

  $.event.special.connections = {
    teardown: function(namespaces) {
      processConnections(destroy, $(this));
    }
  };

  var connect = function(options) {
    var borderClasses = options.borderClasses;
    var tag = options.tag;
    var end1 = $(options.from);
    var end2 = $(options.to);
    var within = $(options.within);
    delete options.borderClasses;
    delete options.tag;
    delete options.from;
    delete options.to;
    delete options.within;
    within.each(function() {
      var container = this;
      var done = new Array();
      end1.each(function() {
        var node = this;
        done.push(this);
        end2.not(done).each(function() {
          createConnection(
            container,
            [node, this],
            tag,
            borderClasses,
            options
          );
        });
      });
    });
  };

  var createConnection = function(
    container,
    nodes,
    tag,
    borderClasses,
    options
  ) {
    var css = $.extend({ position: "absolute" }, options.css);
    var connection = $("<" + tag + "/>", options).css(css);
    connection.appendTo(container);

    var border_w = (connection.outerWidth() - connection.innerWidth()) / 2;
    var border_h = (connection.outerHeight() - connection.innerHeight()) / 2;

    if (border_w <= 0 && border_h <= 0) {
      border_w = border_h = 1;
    }

    var data = {
      borderClasses: borderClasses,
      border_h: border_h,
      border_w: border_w,
      node_from: $(nodes[0]),
      node_to: $(nodes[1]),
      nodes_dom: nodes,
      css: css
    };

    if ("none" === connection.css("border-top-style")) {
      data.css.borderStyle = "solid";
    }
    $.data(connection.get(0), "connection", data);
    $.data(connection.get(0), "connections", [connection.get(0)]);
    for (var i = 0; i < 2; i++) {
      var connections = connection.add($.data(nodes[i], "connections")).get();
      $.data(nodes[i], "connections", connections);
      if (connections.length == 1) {
        $(nodes[i]).on("connections.connections", false);
      }
    }
    update(connection.get(0));
  };

  var destroy = function(connection) {
    var nodes = $.data(connection, "connection").nodes_dom;
    for (var i = 0; i < 2; i++) {
      var connections = $($.data(nodes[i], "connections"))
        .not(connection)
        .get();
      $.data(nodes[i], "connections", connections);
    }
    $(connection).remove();
  };

  var getState = function(data) {
    data.rect_from = data.nodes_dom[0].getBoundingClientRect();
    data.rect_to = data.nodes_dom[1].getBoundingClientRect();
    var cached = data.cache;
    data.cache = [
      data.rect_from.top,
      data.rect_from.right,
      data.rect_from.bottom,
      data.rect_from.left,
      data.rect_to.top,
      data.rect_to.right,
      data.rect_to.bottom,
      data.rect_to.left
    ];
    data.hidden =
      0 === (data.cache[0] | data.cache[1] | data.cache[2] | data.cache[3]) ||
      0 === (data.cache[4] | data.cache[5] | data.cache[6] | data.cache[7]);
    data.unmodified = true;
    if (cached === undefined) {
      return (data.unmodified = false);
    }
    for (var i = 0; i < 8; i++) {
      if (cached[i] !== data.cache[i]) {
        return (data.unmodified = false);
      }
    }
  };

  var update = function(connection) {
    var data = $.data(connection, "connection");
    getState(data);
    if (data.unmodified) {
      return;
    }
    var border_h = data.border_h;
    var border_w = data.border_w;
    var from = data.rect_from;
    var to = data.rect_to;
    var b = (from.bottom + from.top) / 2;
    var r = (to.left + to.right) / 2;
    var t = (to.bottom + to.top) / 2;
    var l = (from.left + from.right) / 2;

    var h = ["right", "left"];
    if (l > r) {
      h = ["left", "right"];
      var x = Math.max(r - border_w / 2, Math.min(from.right, to.right));
      r = l + border_w / 2;
      l = x;
    } else {
      l -= border_w / 2;
      r = Math.min(r + border_w / 2, Math.max(from.left, to.left));
    }
    var v = ["bottom", "top"];
    if (t > b) {
      v = ["top", "bottom"];
      var x = Math.max(b - border_h / 2, Math.min(from.bottom, to.bottom));
      b = t + border_h / 2;
      t = x;
    } else {
      b = Math.min(b, Math.max(from.top, to.top));
      t -= border_h / 2;
    }
    var width = r - l;
    var height = b - t;
    if (width < border_w) {
      t = Math.max(t, Math.min(from.bottom, to.bottom));
      b = Math.min(b, Math.max(from.top, to.top));
      l = Math.max(from.left, to.left);
      r = Math.min(from.right, to.right);
      r = l = (l + r - border_w) / 2;
    }
    if (height < border_h) {
      l = Math.max(l, Math.min(from.right, to.right));
      r = Math.min(r, Math.max(from.left, to.left));
      t = Math.max(from.top, to.top);
      b = Math.min(from.bottom, to.bottom);
      b = t = (t + b - border_h) / 2;
    }
    width = r - l;
    height = b - t;
    width <= 0 && (border_h = 0);
    height <= 0 && (border_w = 0);
    var style =
      "border-" +
      v[0] +
      "-" +
      h[0] +
      "-radius: 0;" +
      "border-" +
      v[0] +
      "-" +
      h[1] +
      "-radius: 0;" +
      "border-" +
      v[1] +
      "-" +
      h[0] +
      "-radius: 0;";
    (border_h <= 0 || border_w <= 0) &&
      (style += "border-" + v[1] + "-" + h[1] + "-radius: 0;");
    if (data.hidden) {
      style += "display: none;";
    } else {
      data.css["border-" + v[0] + "-width"] = 0;
      data.css["border-" + h[0] + "-width"] = 0;
      data.css["border-" + v[1] + "-width"] = border_h;
      data.css["border-" + h[1] + "-width"] = border_w;
      var current_rect = connection.getBoundingClientRect();
      data.css.left = connection.offsetLeft + l - current_rect.left;
      data.css.top = connection.offsetTop + t - current_rect.top;
      data.css.width = width - border_w;
      data.css.height = height - border_h;
    }
    var bc = data.borderClasses;
    $(connection)
      .removeClass(bc[v[0]])
      .removeClass(bc[h[0]])
      .addClass(bc[v[1]])
      .addClass(bc[h[1]])
      .attr("style", style)
      .css(data.css);
  };

  var processConnections = function(method, elements) {
    return elements.each(function() {
      var connections = $.data(this, "connections");
      if (connections instanceof Array) {
        for (var i = 0, len = connections.length; i < len; i++) {
          method(connections[i]);
        }
      }
    });
  };
})(jQuery);
    </script>
        <script defer type="text/javascript">
            $("#div1, #div2").connections();
      $("#div2, #div3").connections();
      $("#div3, #div4").connections();
        </script>
    </body>
</html>

如何实现这个时间表看起来只使用html和css也许一些 Bootstrap

1条答案

相关问题

热门标签

最新问答