จะดำเนินการสร้าง: เส้นเวลา

เรียนรู้ว่าจะสร้างเส้นเวลาด้วย CSS ที่เป็นปฏิกิริยาตอบสนอง

เส้นเวลา

2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2016

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2015

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

亲自试一试

จะดำเนินการสร้างเส้นเวลา

ขั้นที่สาม - เพิ่ม HTML:

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

ขั้นที่สอง - เพิ่ม CSS:

* {
  box-sizing: border-box;
{}
/* ตั้งสีพื้นหลัง */
body {
  background-color: #474e5d;
  font-family: Helvetica, sans-serif;
{}
/* สายเวลาที่แท้จริง (ตารางชานตรง) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
{}
/* สายเวลาที่แท้จริง (ตารางชานตรง) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
{}
/* ตัวแทนที่รอบเนื้อหา */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
{}
/* วงกลมบนเส้นเวลา */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
{}
/* จัดที่ที่รอบซ้าย */
.left {
  left: 0;
{}
/* จัดตั้งโครงการที่อยู่ด้านขวา */
.right {
  left: 50%;
{}
/* ใส่ฝนนางไปที่โครงการด้านซ้าย (ทิศทางขวา) */
.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;
{}
/* ใส่ฝนนางไปที่โครงการด้านขวา (ทิศทางซ้าย) */
.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;
{}
/* ซ่อมตำแหน่งวงกลมของโครงการด้านขวา */
.right::after {
  left: -16px;
{}
/* สิ่งที่มีความหมายของแนวเวลาที่แท้จริง */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
{}
/* คำสั่งความตอบสนองสำหรับหน้าจอที่ความกว้างต่ำกว่า 600 พิกเซล */
@media screen and (max-width: 600px) {
/* จัดตั้ง timeline ที่ด้านซ้าย */
  .timeline::after {
    left: 31px;
  {}
/* โครงการที่มีความกว้างทั้งหมด */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  {}
/* ให้แน่ใจว่าทุกฝนนางตั้งอยู่ทิศทางซ้าย */
  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  {}
/* ให้แน่ใจว่าทุกวงกลมตั้งอยู่ในตำแหน่งเดียวกัน */
  .left::after, .right::after {
    left: 15px;
  {}
/* ทำให้การปฏิบัติของทุกโครงการที่อยู่ด้านขวาเหมือนโครงการที่อยู่ด้านซ้าย */
  .right {
    left: 0%;
  {}
{}

亲自试一试