ວິທີທີ່ຈະໃຊ້: ສາຍເວລາ

ວິທີທີ່ຈະໃຊ້ 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.

亲自试一试

ວິທີທີ່ຈະສ້າງສາຍເວລາ

ບາງຄັ້ງທີ່ 1 - ການເພີ່ມ 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>

ບາງຄັ້ງທີ່ 2 - ການເພີ່ມ 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::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%;
  }
}

亲自试一试