Html
    Css
    Js

    
                        
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);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.9.1
 立即下载

线性布局(原创)

让人赏析悦目

0