08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴
大前端系列，主要就是使用CSS3.0来实现，注释我已经打在代码里面了，直接看代码就可以了，后面会说一下CSS3.0系列，这个就当一个引入吧：
简单版本：
2016年
03月
标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
阅读全文
标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
阅读全文
标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
阅读全文
标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
阅读全文
标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
阅读全文
标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
阅读全文
标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
阅读全文
标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
阅读全文
逆天版本：在线浏览：http://dnt.dkill.net/dnt/pawchina/temp/note.html
note.html
欢迎来到PAW时光日记
欢迎来到PAW时光日记 Welcome to PAW the time diary
note.css
@import url("fonts.css");
@import url("font-awesome.min.css");
body {
font-size: 100%;
color: white;
font-family: 'Source Sans Pro','微软雅黑', sans-serif;
background-color: #e9f0f5;
}
.bg-fixed {
width: 100%;
height: 100%;
position: fixed;
top:;
left:;
z-index: -1;
background: url(../../images/icon/fixed.png) repeat;
}
/*时间轴导航*/
nav {
right: 5%;
z-index:;
position: fixed;
background: rgba(0,0,0,0.5);
}
ul {
margin:;
padding: 0.5em;
list-style: none;
}
ul a {
color: white;
font-family: '宋体';
font-weight: bold;
text-decoration: none;
}
ul a:hover {
color: rgb(3, 151, 255);
}
.nav-month {
display: none;
}
.nav-month a{
color:#dbdbdb;
}
.nav-month li{
margin-bottom:0.5em;
}
.nav-month li:last-child{
margin-bottom:;
}
/*标题*/
.time-header {
text-align: center;
margin: 3em auto;
}
.time-header h1 {
font-weight: normal;
letter-spacing: 0.1em;
}
.time-header h1 span {
display: block;
font-size: 60%;
font-weight:;
padding: 0.8em 0 0.5em 0;
color: #dde1e5;
}
/*超链接*/
.time-header-links {
margin-top: -1em;
margin-bottom: 0.5em;
position: relative;
display: inline-block;
white-space: nowrap;
}
/*图标*/
.time-header-links a {
color: rgba(0,0,0,0.5);
text-decoration: none;
font-size: 1.5em;
padding: 0.1em 0.4em;
}
.time-header-links a:hover {
color: #2fa0ec;
}
/*中间的分隔符*/
.time-header-links::after {
position: absolute;
top:;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background: #dbdbdb;
content: '';
-webkit-transform: rotate3d(0,0,1,22.5deg);
transform: rotate3d(0,0,1,22.5deg);
}
/*容器*/
.paw-container {
width: 90%;
margin: 0 auto;
}
/*创建一条垂直线*/
.paw-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 2em;
}
.paw-timeline::before {
content: '';
position: absolute;
top:;
left: 50%;
height: 100%;
width: 4px;
background: rgba(9, 138, 229, 0.68);
}
/*年份容器*/
.paw-container .paw-timeline-icon h2 {
position: absolute;
margin-left: -1em;
margin-top: -1.5em;
width: 7em;
color: rgba(0,0,0,0.7);
}
/*月份容器*/
.paw-timeline-month {
margin-bottom: 5em;
}
.paw-timeline-month:last-child {
margin-bottom: -3em;
}
.paw-timeline-month .paw-timeline-icon {
top: inherit;
}
.paw-timeline-month .paw-timeline-icon h3 {
position: absolute;
margin-left: -2.5em;
margin-top: -3.5em;
width: 7em;
color: rgba(0,0,0,0.6);
}
/*每天容器*/
.paw-timeline-block {
position: relative;
margin: 3em 0;
}
.paw-timeline-block:first-child {
margin-top:;
}
.paw-timeline-block:last-child {
margin-bottom:;
}
/*轴上的图标*/
.paw-timeline-icon {
position: absolute;
top:;
left: 50%;
width: 1em;
height: 1em;
margin-left: -0.5em;
border-radius: 50%;
background: white;
box-shadow: 0 0 0 3px rgba(9, 138, 229, 0.68);
}
/*光晕*/
.paw-timeline-icon:hover {
box-shadow: 0 0 0 5px rgba(9, 229, 34,0.5), 0 0 0 3px rgb(255,255,255);
}
/*日期*/
.paw-timeline-datetime {
position: absolute;
margin-left: -5em;
margin-top: -2em;
width: 7em;
font-weight: bold;
}
/*内容*/
.paw-timeline-content {
width: 45%;
padding: 1em;
margin-left:;
background: white;
border-radius: 0.5em;
box-shadow: 0 3px 0 #d7e4ed;
/*不加这个小尖角容易有点问题*/
position: relative;
}
/*标题颜色*/
.paw-timeline-content h3 {
color: #303e49;
}
/*段落首行缩进*/
.paw-timeline-content p {
text-indent: 1em;
line-height: 1.8em;
}
/*阅读更多 超链接*/
.paw-timeline-content a {
text-decoration: none;
color: #7f8c97;
}
/*阅读更多 超链接*/
.paw-timeline-content a:hover {
color: #0094ff;
}
/*小尖角*/
.paw-timeline-content .paw-timeline-main::before {
content: '';
top: 16px;
height:;
width:;
left: 100%;
position: absolute;
border: 7px solid transparent;
border-left: 7px solid white;
}
/*展览图*/
.paw-timeline-block img {
max-width: 100%;
min-width: 100%;
}
/*偶数个设置新样式*/
.paw-timeline-content:nth-child(2n) {
float: right;
}
/*清除浮动*/
.paw-timeline-content:nth-child(2n+1) {
/*clear: right;*/
margin-bottom: 2em;
}
/*小尖角反向*/
.paw-timeline-content:nth-child(2n) .paw-timeline-main::before {
content: '';
left: auto;
right: 100%;
border: 7px solid transparent;
border-right: 7px solid white;
}
.paw-bottom-icon .paw-bottom-icon {
top: inherit;
bottom:;
}
/*动画效果*/
.paw-flash {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
/*清除浮动*/
.paw-clear {
clear: both;
}
/*分割线*/
hr {
margin-top: -2em;
}
/*版权系列*/
.copyright {
text-align: center;
font-size: 1em;
font-family: '微软雅黑';
}
.copyright span {
padding-left: 1.25em;
}
.copyright a {
color: #d8d3d3;
text-decoration: none;
}
.copyright a:hover {
color: black;
}
@media only screen and (max-width: 1170px) {
/*时间轴*/
.paw-timeline-icon, .paw-timeline::before {
left: 0;
}
/*年份容器*/
.paw-container .paw-timeline-icon h2 {
margin-left: -1em;
margin-top: -1.3em;
}
/*月份容器*/
.paw-timeline-month .paw-timeline-icon h3 {
margin-left: -0.7em;
margin-top: -3em;
}
/*时间*/
.paw-timeline-datetime {
margin-left: 1.5em;
margin-top: -2em;
}
.paw-timeline-content {
width: 80%;
position: relative;
margin: 2em 3em;
}
.paw-timeline-content:nth-child(2n) {
float: none;
}
.paw-timeline-content:nth-child(2n+1) .paw-timeline-main::before {
right: 100%;
left: auto;
border: 7px solid transparent;
border-right: 7px solid white;
}
.copyright span {
display: block;
}
}
有网友需要，那我就源码奉上了：百度网盘-链接不存在