Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html
大前端系列,主要就是使用CSS3.0来实现,注释我已经打在代码里面了,直接看代码就可以了,后面会说一下CSS3.0系列,这个就当一个引入吧:
简单版本:
![](http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif)
![](http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif)
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-17span>
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-16span>
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
![](http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif)
![](http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif)
"http://www.w3.org/1999/xhtml"> "Content-Type" content="text/html; charset=utf-8" />欢迎来到PAW时光日记 "stylesheet" href="assets/css/common.css" /> "stylesheet" href="assets/css/note.css" /> "background: url('images/bg.jpg') repeat fixed center 0;">class="bg-fixed">class="time-header"> 欢迎来到PAW时光日记 Welcome to PAW the time diary
class="paw-timeline paw-container"> class="paw-timeline-month">class="paw-timeline-block">class="paw-timeline-icon"> class="paw-timeline-datetime">2016-03-18class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-clear">class="paw-timeline-block">class="paw-timeline-icon"> class="paw-timeline-datetime">2016-03-17class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-clear">class="paw-timeline-month">class="paw-timeline-block">class="paw-timeline-icon"> class="paw-timeline-datetime">2016-02-18class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-clear">class="paw-timeline-block">class="paw-timeline-icon"> class="paw-timeline-datetime">2016-02-17class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-clear">class="paw-timeline paw-container"> class="paw-timeline-month">class="paw-timeline-block">class="paw-timeline-icon"> class="paw-timeline-datetime">2015-03-18class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-clear">class="paw-timeline-block">class="paw-timeline-icon"> class="paw-timeline-datetime">2015-03-17class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-timeline-content"> "#" target="_blank">class="paw-timeline-main"> 标题
内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。
"http://dnt.dkill.net/Images/article/19.jpg" alt="" />
class="paw-clear">
"pawtop">class="top-1">class="top-2">
note.css
![](http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif)
![](http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif)
@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: 0; left: 0; z-index: -1; background: url(../../images/icon/fixed.png) repeat; } /*时间轴导航*/ nav { right: 5%; z-index: 100; position: fixed; background: rgba(0,0,0,0.5); } ul { margin: 0; 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:0; } /*标题*/ .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: 400; 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: 0; 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: 0; 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: 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, 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: 0; 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: 0; width: 0; 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: 0; } /*动画效果*/ .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