Question

我想创建某些元素的垂直时间轴。目前，我正在使用angular2 material design lite中的多个组件构建时间轴。

到目前为止，我有以下代码：

<table class="mdl-data-table " style="width:80%;">
      <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr>

        <td>
           History
        </td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>
          <button mdl-button mdl-button-type="mini-fab" mdl-colored="primary">
          </button>
        </td>
        <td>
          <mdl-card class="demo-card-square" mdl-shadow="2" flex="23">
            <mdl-card-title mdl-card-expand>
              <h2 mdl-card-title-text>content1</h2>
            </mdl-card-title>
            <mdl-card-supporting-text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Aenan convallis.
            </mdl-card-supporting-text>
          </mdl-card>
        </td>
        <td></td>
      </tr>

      <tr>
        <td>
          <button mdl-button mdl-button-type="mini-fab" mdl-colored="primary">
          </button>
        </td>
        <td>
          <mdl-card class="demo-card-square" mdl-shadow="2">
            <mdl-card-title mdl-card-expand>
              <h2 mdl-card-title-text>content2</h2>
            </mdl-card-title>
            <mdl-card-supporting-text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Aenan convallis.
            </mdl-card-supporting-text>
          </mdl-card>
        </td>
        <td></td>
      </tr>
      </tbody>
    </table>

如下所示：

我希望输出如下：

Answer 1

你看过Angular Timeline

吗？

这个使用bootstrap进行样式设计。但您可以检查代码以进行更改。

您可以查看材料设计时间表here

    <div class="main-container">
  <section id="timeline" class="timeline-outer">
    <div class="container" id="content">
      <div class="row">
        <div class="col s12 m12 l12">
          <h1 class="blue-text lighten-1 header">Responsive Material Design Timeline</h1>
          <ul class="timeline">
            <li class="event" data-date="2015/Present">
              <h3>Management and Entreprenurship (MSc)</h3>
              <p>
                This September 2015 I will begin an MSc in Management and Entrepreneurship at University of Sussex, to broaden my knowledge and gain skills necessary for my future in business and management.
              </p>
            </li>
            <li class="event" data-date="2015/Present">
              <h3>Claromentis</h3>
              <p>
                Claromentis is an intranet software provider company. I started working at the Brighton office as a Marketing Designer while I was still attending my final year at the University of Sussex. My primary responsibilities included creating corporate identity
                for the company; I re-designed their website, and have created marketing materials such as brochures.
              </p>
              <p>Since graduating from university, I have also undertaken responsibilities for designing a product for the company. The roles I have been given have provided the perfect opportunity to implement the skills I have gained throughout my higher
                education, as well as experiencing the running of a successful business.</p>
            </li>
            <li class="event" data-date="2012/2015">
              <h3>Games & Multimedia Environments BSc (Hons)</h3>
              <p>Throughout my degree I have gained expansive knowledge of informatics areas including Human Computer Interaction, Multimedia Design and Development, Program Analysis and Design For my final year project, I created a 2D Puzzler Game for iOS
                called 'Flat Ball' and received a first. I therefore hope to release this game and further develop it to add new levels and improve the features.
              </p>
            </li>
            <li class="event" data-date="2012/2015">
              <h3>1108 Studios</h3>
              <p>This is a small startup that a friend and I created to gain more skills and apply those I had learned while completing my diploma. Since its inception, as a front - end web developer I have advised, designed and built web solutions for numerous
                clients.</p>
            </li>
            <li class="event" data-date="2010/2012">
              <h3>IT Practitioners BTEC National Diploma</h3>
              <p>This is where my interest in building things for interactive media began. During my first computing course I studied a range of core topics including multimedia design, database design, computer games development, computer networks and object
                oriented programming.</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <a class="portfolio-link" target "_blank" href="http://www.erpik.com"><h6>www.erpik.com</h6></a>
  <br/>
</div>

<强> CSS

/*——————————————
Global
———————————————*/

body {
  font-family: helvetica;
}
/*——————————————
TimeLine CSS
———————————————*/
/* Base */

#content {
  margin-top: 50px;
  text-align: center;
}

section.timeline-outer {
  width: 80%;
  margin: 0 auto;
}

h1.header {
  font-size: 50px;
  line-height: 70px;
}
/* Timeline */

.timeline {
  border-left: 8px solid #42A5F5;
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  color: #333;
  margin: 50px auto;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  padding: 20px;
  list-style: none;
  text-align: left;
}

.timeline h1,
.timeline h2,
.timeline h3 {
  font-size: 1.4em;
}

.timeline .event {
  border-bottom: 1px solid rgba(160, 160, 160, 0.2);
  padding-bottom: 15px;
  margin-bottom: 20px;
  position: relative;
}

.timeline .event:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}

.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .event:before {
  left: -177.5px;
  color: #212121;
  content: attr(data-date);
  text-align: right;
  /*  font-weight: 100;*/

  font-size: 16px;
  min-width: 120px;
}

.timeline .event:after {
  box-shadow: 0 0 0 8px #42A5F5;
  left: -30px;
  background: #212121;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
  top: 5px;
}
/**/
/*——————————————
Responsive Stuff
———————————————*/

@media (max-width: 945px) {
  .timeline .event::before {
    left: 0.5px;
    top: 20px;
    min-width: 0;
    font-size: 13px;
  }
  .timeline h3 {
    font-size: 16px;
  }
  .timeline p {
    padding-top: 20px;
  }
  section.lab h3.card-title {
    padding: 5px;
    font-size: 16px
  }
}

@media (max-width: 768px) {
  .timeline .event::before {
    left: 0.5px;
    top: 20px;
    min-width: 0;
    font-size: 13px;
  }
  .timeline .event:nth-child(1)::before,
  .timeline .event:nth-child(3)::before,
  .timeline .event:nth-child(5)::before {
    top: 38px;
  }
  .timeline h3 {
    font-size: 16px;
  }
  .timeline p {
    padding-top: 20px;
  }
}
/*——————————————
others
———————————————*/

a.portfolio-link {
  margin: 0 auto;
  display: block;
  text-align: center;
}

可以在material.io

找到更多动力

这些是一些指针，没有详尽的清单。时间轴主要是主要的CSS工作。

指针：复杂结构的表格并不是一个好主意。

使用角度2材质设计精简版创建垂直时间轴

1 个答案: