Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html

大前端系列,主要就是使用CSS3.0来实现,注释我已经打在代码里面了,直接看代码就可以了,后面会说一下CSS3.0系列,这个就当一个引入吧:

简单版本:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
font-size: 100%;
color: #7f8c97;
font-family: '微软雅黑';
background-color: #e9f0f5;
}
/*容器*/
.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: 0;
left: 50%;
height: 100%;
width: 4px;
background: rgba(0,0,0,0.1);
}
/*循环小容器*/
.paw-timeline-block {
position: relative;
margin: 3em 0;
} .paw-timeline-block:first-child {
margin-top: 0;
} .paw-timeline-block:last-child {
margin-bottom: 0;
}
/*轴上的图标*/
.paw-timeline-icon {
position: absolute;
top: 0;
left: 50%;
width: 1em;
height: 1em;
margin-left: -0.5em;
border-radius: 50%;
background: white;
box-shadow: 0 0 0 3px rgba(9, 229, 34,0.5), 0 0 0 3px rgb(255,255,255);
}
/*光晕*/
.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: -6em;
margin-top: -2em;
width: 7em;
font-weight: bold;
}
/*内容*/
.paw-timeline-content {
width: 45%;
margin-left: 0;
padding: 1em;
background: white;
border-radius: 0.5em;
box-shadow: 0 3px 0 #d7e4ed;
overflow: hidden;
/*不加这个小尖角容易有点问题*/
position: relative;
}
/*第一个元素*/
.paw-timeline-content:first-child {
margin-top: 0;
}
/*最后一个元素*/
.paw-timeline-content:last-child {
margin-bottom: 0;
}
/*标题颜色*/
.paw-timeline-content h3 {
color: #303e49;
}
/*阅读更多 按钮*/
.paw-timeline-content .paw-read-more {
float: left;
color: white;
border-radius: 0.25em;
padding: 0.7em 1em;
background-color: #424242;
text-decoration: none;
}
/*阅读更多 按钮特效*/
.paw-timeline-content .paw-read-more:hover {
background: #acb7c0;
}
/*小尖角*/
.paw-timeline-main::before {
content: '';
top: 16px;
height: 0;
width: 0;
left: 100%;
position: absolute;
border-left: 7px solid white;
border: 7px solid transparent;
}
/*偶数个设置新样式*/
.paw-timeline-content:nth-child(2n) {
float: right;
}
/*清除浮动*/
.paw-timeline-content:nth-child(2n+1) {
clear: both;
} .paw-timeline-content:nth-child(2n) .paw-read-more {
float: right;
}
/*小尖角反向*/
.paw-timeline-content:nth-child(2n) .paw-timeline-main::before {
content: '';
left: auto;
right: 100%;
border: 7px solid transparent;
border-right: 7px solid white;
}
</style>
</head>
<body>
<section id="paw-timeline" class="paw-container">
<header><h2>2016年</h2></header>
<!--循环-->
<div>
<h3>03月</h3>
<!--循环-->
<div class="paw-timeline-block">
<!--时间-->
<div class="paw-timeline-icon">
<span class="paw-timeline-datetime">2016-03-17</span>
</div>
<!--循环内容-->
<div class="paw-timeline-content">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
<a href="#" class="paw-read-more" target="_blank">阅读全文</a>
</header>
</div>
<div class="paw-timeline-content">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
<a href="#" class="paw-read-more" target="_blank">阅读全文</a>
</header>
</div>
<div class="paw-timeline-content">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
<a href="#" class="paw-read-more" target="_blank">阅读全文</a>
</header>
</div>
<div class="paw-timeline-content">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
<a href="#" class="paw-read-more" target="_blank">阅读全文</a>
</header>
</div>
</div>
<div class="paw-timeline-block">
<!--时间-->
<div class="paw-timeline-icon">
<span class="paw-timeline-datetime">2016-03-16</span>
</div>
<!--循环内容-->
<div class="paw-timeline-content">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
<a href="#" class="paw-read-more" target="_blank">阅读全文</a>
</header>
</div>
<div class="paw-timeline-content">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
<a href="#" class="paw-read-more" target="_blank">阅读全文</a>
</header>
</div>
<div class="paw-timeline-content">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
<a href="#" class="paw-read-more" target="_blank">阅读全文</a>
</header>
</div>
<div class="paw-timeline-content">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
<a href="#" class="paw-read-more" target="_blank">阅读全文</a>
</header>
</div>
</div>
</div>
</section>
</body>
</html>

逆天版本:在线浏览:http://dnt.dkill.net/dnt/pawchina/temp/note.html

note.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>欢迎来到PAW时光日记</title>
<!--[if lte IE ]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/common.css" />
<link rel="stylesheet" href="assets/css/note.css" />
</head>
<body style="background: url('images/bg.jpg') repeat fixed center 0;">
<div class="bg-fixed"></div>
<!--时间轴导航-->
<nav>
<ul>
<li>
<a href="#2016" class="nav-year">2016年</a>
<ul class="nav-month">
<li><a href="#201603">03月</a></li>
<li><a href="#201602">02月</a></li>
</ul>
</li>
<li>
<a href="#2015" class="nav-year">2015年</a>
<ul class="nav-month">
<li><a href="#201503">03月</a></li>
</ul>
</li>
</ul>
</nav>
<!--顶部标题-->
<header class="time-header">
<h1>欢迎来到PAW时光日记 <span>Welcome to PAW the time diary</span></h1>
<div class="time-header-links">
<a class="fa fa-home" href="index.html" title="返回Home" target="_blank"></a>
<a class="fa fa-mail-forward" href="index.html#pawnote" title="返回Note"></a>
</div>
</header>
<!--每年循环-->
<section class="paw-timeline paw-container">
<div class="paw-timeline-icon">
<h2><a name="">2016年</a></h2>
</div>
<!--每月循环-->
<div class="paw-timeline-month">
<div class="paw-timeline-icon">
<h3><a name="">03月</a></h3>
</div>
<!--每天循环-->
<div class="paw-timeline-block">
<!--时间-->
<div class="paw-timeline-icon">
<span class="paw-timeline-datetime">--</span>
</div>
<!--循环内容-->
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
</div>
<div class="paw-clear"></div>
<!--每天循环-->
<div class="paw-timeline-block">
<!--时间-->
<div class="paw-timeline-icon">
<span class="paw-timeline-datetime">--</span>
</div>
<!--循环内容-->
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
</div>
<div class="paw-clear"></div>
</div>
<!--每月循环-->
<div class="paw-timeline-month">
<div class="paw-timeline-icon">
<h3><a name="">02月</a></h3>
</div>
<!--每天循环-->
<div class="paw-timeline-block">
<!--时间-->
<div class="paw-timeline-icon">
<span class="paw-timeline-datetime">--</span>
</div>
<!--循环内容-->
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
</div>
<div class="paw-clear"></div>
<!--每天循环-->
<div class="paw-timeline-block">
<!--时间-->
<div class="paw-timeline-icon">
<span class="paw-timeline-datetime">--</span>
</div>
<!--循环内容-->
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
</div>
<div class="paw-clear"></div>
</div>
</section>
<!--每年循环-->
<section class="paw-timeline paw-container">
<div class="paw-timeline-icon">
<h2><a name="">2015年</a></h2>
</div>
<!--每月循环-->
<div class="paw-timeline-month">
<div class="paw-timeline-icon">
<h3><a name="">03月</a></h3>
</div>
<!--每天循环-->
<div class="paw-timeline-block">
<!--时间-->
<div class="paw-timeline-icon">
<span class="paw-timeline-datetime">--</span>
</div>
<!--循环内容-->
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
</div>
<div class="paw-clear"></div>
<!--每天循环-->
<div class="paw-timeline-block">
<!--时间-->
<div class="paw-timeline-icon">
<span class="paw-timeline-datetime">--</span>
</div>
<!--循环内容-->
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
<div class="paw-timeline-content">
<a href="#" target="_blank">
<header class="paw-timeline-main">
<h3>标题</h3>
<p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>
</header>
</a>
<div>
<img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />
</div>
</div>
</div>
<div class="paw-clear"></div>
</div>
</section>
<hr />
<footer class="copyright">
Copyright &copy; All rights<span>Author:<a href="#">Paw & DNT</a></span>
</footer>
<!--返回顶部-->
<div id="pawtop">
<div class="top-1"></div>
<div class="top-2"></div>
</div>
<!-- 脚本引入 -->
<script src="assets/js/jquery.min.js"></script>
<!--[if lte IE ]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/common.js"></script>
<script type="text/javascript">
$(function () {
$('.nav-month').eq().css('display', 'block');
});
$('.nav-year').click(function () {
$('.nav-month').fadeOut();
$(this).next('ul').css('display', 'block');
});
</script>
</body>
</html>

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

 有网友需要,那我就源码奉上了:http://pan.baidu.com/s/1jHKcBL8

08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴的更多相关文章

  1. 08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  

  2. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  3. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  4. 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  5. 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  6. 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  7. 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  8. 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  9. 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

随机推荐

  1. three.js全景

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - eq ...

  2. 4.4 多线程进阶篇<下>(NSOperation)

    本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人"简书" 本文源码 Demo 详见 Github https://github.c ...

  3. fatal error

    1.   fatal error C1083: 无法打开源文件 编译报此错误:  1>c1xx : fatal error C1083: 无法打开源文件:“Projects\XXXCCCC\VB ...

  4. canvas图片处理

    1.灰度 .299 * r + .587 * g + .114 * b; 2.连环画效果 R = |g – b + g + r| * r / 256 G = |b – g + b + r| * r / ...

  5. TreeSet

    一.TreeSet中的元素比较有两种方式 1.定义一个类,实现Comparable接口  复写的是comparato方法 2.定义一个类,实现Comparator接口,覆盖compara方法(此种方法 ...

  6. NFSv4的引用,迁移和备份(用户手册 v0.2)

    RFC3530 定义了NFS文件系统迁移和引用的管理机制.文件系统定位功能通过fs_location属性向客户端提供文件系统的位置信息.fs_location属 性是一个包含有位置信息的列表,位置信息 ...

  7. 使用THINKPHP中的控制器和模块查询数据库

    1,自定义一个UserController的控制器,导入tp的控制器与模块执行相应的操作. ----var_dump()方法是判断一个变量的类型与长度,并输出变量的数值,如果变量有值输的是变量的值. ...

  8. Linux_10个需要了解的Linux网络和监控命令(转)

    源文地址:http://www.linuxde.net/2013/10/15325.html 1. hostname hostname 没有选项,显示主机名字 hostname –d 显示机器所属域名 ...

  9. Struts 2的数据校验

    既然说到了Struts 2的数据校验,我们该怎么去实现呢?又是通过什么来实现呢? 就让我带着大家一起来走进Struts 2的数据校验吧. 首先我们会想到在Stuts 2的登录案例中我们定义了一个Act ...

  10. ormlite的使用方法

    ormlite是什么? 简单来说,就是我们定义一个实体类,利用这个框架,它可以帮我们吧这个实体映射到我们的数据库中,在Android中是SQLite,数据中的字段就是我们定义实体的成员变量. 官网地址 ...