*, :after, :before { box-sizing: border-box; } body { color: #43484d; } .nav { display: flex; flex-direction: row; align-items: center; border-bottom: 1px solid #f5f5f5; line-height: 30px; margin-bottom: 10px; } .nav .nav-tab { cursor: pointer; position: relative; flex: 1; text-align: center; font-size: 16px; font-weight: bold; border-bottom: 3px solid transparent; transition: border .2s cubic-bezier(0.43, 0.37, 1, 1); } .nav span.active .active-img { display: block; } .active-img { display: none; position: absolute; left: 0; right: 0; bottom: -12px; width: 100%; height: 10px; background: url("/images/active.png") no-repeat center; background-size: 150px 10px; } .section-tab { display: none; margin: 10px 30px; } .section-tab.active { display: block; } .version-content { position: relative; width: 100%; z-index: 2; } .version-content .versions { position: static; margin-bottom: 40px; padding: 20px 0; } .version-content:after { content: ""; position: absolute; width: 5px; top: 0; left: 0; bottom: 0; margin-left: -2.5px; background-color: #e6eaf5; } .version-content:before{ content: ""; width: 20px; height: 5px; border-radius: 4px; position: absolute; left: 50%; margin-left: -10px; background-color: #e6eaf5; } .version-content:before{ left: 0; top: 0; } .version-content .versions .version { width: 100%; top: 0; left: 0; margin-top: 15px; padding-left: 35px; padding-right: 0; position: relative; margin-left: 0; } .version-content .versions .version:before { border-right: 13px solid #9d9d9d; } .version-content .dot { z-index: 10; position: absolute; left: -8px; background-color: #fff; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #007aff; top: 12px; } .version-content .ver { font-size: 30px; font-weight: 600; margin-bottom: 16px; } .version-content .date { opacity: 0.7; font-size: 16px; line-height: 24px; margin-bottom: 24px; padding-bottom: 10px; border-bottom: 1px solid #ddd; } .version-content .versions .version+.version{ margin-top: 50px; } .version-content h5{ font-size: 18px; margin: 12px 0; }