html线性布局,线性布局（原创）

element.style {

}.container {

margin:0 auto;

padding:40px 0;

width:100%;

max-width:1024px;

text-align:left;

}

* {

-webkit-box-sizing:border-box;

box-sizing:border-box;

}

user agent stylesheet div {

display:block;

}

body {

margin:0;

padding:0;

text-align:center;

background-color:#fafafa;

}

body,html {

color:#333;

}

li {

display:list-item;

text-align:-webkit-match-parent;

list-style:none;

}

html {

font:300 16px/1.8 -apple-system,PingFang SC,Verdana,Helvetica Neue,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;

font-size:62.5%;

background:#fafafa;

text-rendering:optimizelegibility;

-webkit-text-size-adjust:100%;

-webkit-font-smoothing:antialiased;

}

.versions {

position:relative;

margin:20px 0;

padding:10px;

min-height:500px;

font-size:14px;

font-size:1.4rem;

}

ul,menu,dir {

display:block;

list-style-type:disc;

-webkit-margin-before:1em;

-webkit-margin-after:1em;

-webkit-margin-start:0px;

-webkit-margin-end:0px;

-webkit-padding-start:40px;

}

.container {

margin:0 auto;

padding:40px 0;

width:100%;

max-width:1024px;

text-align:left;

}

.version .num {

font-size:20px;

font-size:2rem;

font-weight:400;

}

.version .data {

position:relative;

left:-94px;

top:34px;

width:57px;

text-align:right;

}

.versions .point.milestone {

left:-17px;

width:15px;

height:15px;

background-color:#007aff;

}

.version {

margin:0 0 40px 10px;

}

.versions .point {

position:absolute;

left:-14px;

margin:10px;

width:10px;

height:10px;

text-align:start;

background-color:#fff;

border-radius:50%;

border:2px solid #007aff;

z-index:10;

}

.version .type.change {

background-color:#ffc107;

}

.version .type {

margin-right:5px;

padding:3px 10px;

color:#fff;

font-weight:500;

border-radius:2px;

}

.version .type.important {

background-color:#9c27b0;

}

.version .type.fix {

background-color:#f44336;

}

#preFont {

font-size:19px;

}

.versions:after {

position:absolute;

content:"";

top:0;

left:0;

bottom:0;

width:2px;

background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,transparent),to(#2196f3));

background-image:-webkit-linear-gradient(top,transparent,#2196f3);

background-image:-o-linear-gradient(top,transparent 0,#2196f3 100%);

background-image:linear-gradient(180deg,transparent 0,#2196f3);

}