您的位置：首页 > Web前端 > HTML5

08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

2016-03-18 11:10 1051 查看
Web大前端时代之：HTML5+CSS3入门系列：/article/5231385.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>


View Code
多屏版本：

逆天版本：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航