LayUI时间线优化

.timeline-main h3 {

width: 31%;

text-align: right

}

.timeline-main h2,

.timeline-main h2>a {

font-size: 16px;

margin: 5px 0;

color: #6bc30d

}

.timeline-main h3,

.timeline-main h3>a {

font-size: 14px;

margin: 2px 0;

color: #ff5722

}

.timeline-month>ul>li {

padding: 10px 0

}

.timeline-month>ul>li .h4 {

display: inline-block;

width: 31%;

text-align: right;

float: left

}

.date {

display: inline-block;

padding: 2px 5px;

color: #484348;

font-size: 15px;

margin-top: 5px

}

.dot-circle {

color: #484348;

width: 8%;

text-align: center;

font-size: 22px;

z-index: 1;

position: relative;

background: #fff;

float: left

}

.content {

max-width: 50%;

float: left;

padding: 20px;

margin-left: 10px;

position: relative;

z-index: 1;

background: #484348;

color: #fff

}

.content img {

width: 100%

}

.content::before {

position: absolute;

left: -20px;

top: 6px;

height: 0;

width: 0;

content: ‘’;

border: 10px solid rgba(255, 255, 255, 0);

border-top: 6px solid rgba(255, 255, 255, 0);

border-bottom: 6px solid rgba(255, 255, 255, 0);

border-right-color: #484348

}

.timeline-line {

position: absolute;

left: 35%;

top: 0;

height: 100%;

width: 2px;

background: #484348;

z-index: 0

}

.timeline-year {

margin: 10px 0

}

@media(min-width:768px) {

.timeline-box {

background: #fff;

padding: 40px 15px;

position: relative;

}

.timeline-main>h1 {

font-size: 26px;

margin-left: 16%;

margin-left: -moz-calc(18% - 13px);

margin-left: -webkit-calc(18% - 13px);

margin-left: calc(18% - 13px)

}

.timeline-main>h1>i {

font-size: 30px

}

.timeline-main>h1>span {

display: inline

}

.timeline-main h2,

.timeline-main h3 {

width: 16%

}

.timeline-main h2,

.timeline-main h2>a {

font-size: 24px

}

.timeline-main h3,

.timeline-main h3>a {

font-size: 20px

}

.timeline-month>ul>li .h4 {

width: 16%

}

.dot-circle {

width: 4%;

font-size: 22px

}

.content {

max-width: 70%

}

.timeline-line {

left: 18%

}

}

@media(min-width:992px) {

.timeline-main>h1 {

font-size: 34px;

background: #fff;

z-index: 1;

position: relative;

color: #484348;

margin-left: 17%;

margin-left: -moz-calc(18% - 16px);

margin-left: -webkit-calc(18% - 16px);

margin-left: calc(18% - 16px)

}

.timeline-main>h1>i {

font-size: 36px

}

.timeline-main h2,

.timeline-main h2>a {

font-size: 30px

}

.timeline-main h3,

.timeline-main h3>a {

font-size: 24px

}

}

HTML部分代码

一念之间

2019 年

• 10月24日

  layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。

  
  不枉近百个日日夜夜与之为伴。因小而大，因弱而强。

  
  无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 
• 09月06日

  杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。个人最爱的名篇有：
• 《登高》
• 《茅屋为秋风所破歌》
• 08月26日

  中国人民抗日战争胜利72周年

  
  常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代

  
  铭记、感恩

  
  所有为中华民族浴血奋战的英雄将士

  
  永垂不朽

  2018 年
• 10月24日