首页 > 代码库 > css 常见时间轴的做法（————————————————时间轴——————————————————）
css 常见时间轴的做法（————————————————时间轴——————————————————）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
border: 0px;
list-style: none;
}
ul#demo1,
ul#demo2 {
width: 85%;
margin: 30px auto;
padding-top: 20px;
padding-bottom: 20px;
border-left: 1px solid #2B9EEF;
}
#demo1 li {
margin-top: 20px;
width: 100%;
}
#demo1 li img {
width: 13px;
float: left;
height: auto;
margin-top: 5px;
margin-left: -7px;
}
#demo1 li div {
color: #666666;
margin-left: 50px;
text-align: left;
}
#demo1 li p {
width: 40px;
height: 40px;
line-height: 40px;
color: #2B9EEF;
float: left;
margin-left: -20px;
margin-top: -11px;
border-radius: 50%;
background: white;
border: 1px solid #2B9EEF;
text-align: center;
}
/**************************************/
#demo2 li {
margin-top: 20px;
width: 100%;
color: red;
}
#demo2 li img {
width: 13px;
float: left;
height: auto;
margin-top: 5px;
margin-left: -7px;
}
#demo2 li div {
margin-left: 30px;
}
#demo2 li div h4 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#demo2 li div p {
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
display: -webkit-box !important;
}
/**************************************/
ul#demo3 {
width: 100%;
height: auto;
margin: 30px auto;
position: relative;
}
ul#demo3:before {
content: "";
display: block;
padding-top: 30px;
position: absolute;
left: 50%;
top: 0px;
height: 500px;
width: 1px;
background: red;
}
#demo3 li.lf {
padding-top: 30px;
width: 45%;
margin-left: 5%;
}
#demo3 li.lf img {
float: right;
width: 13px;
margin-right: -7px;
}
#demo3 li.lf div {
text-align: right;
margin-right: 30px;
}
#demo3 li.rt {
width: 45%;
margin-top: 30px;
margin-left: 50%;
}
#demo3 li.rt img {
float: left;
width: 13px;
margin-left: -7px;
}
#demo3 li.rt div {
text-align: left;
margin-left: 30px;
}
/***********************************/
ul#demo4 {
height: 720px;
width: 1px;
background: red;
z-index: 1;
position: relative;
left: 50%;
padding-top: 20px;
}
ul#demo4 li.lf {
width: 155px;
position: relative;
left: 0px;
margin-left: -149px;
}
ul#demo4 li.lf img {
float: right;
}
ul#demo4 li.lf div {
margin-right: 30px;
}
ul#demo4 li.rt {
width: 155px;
position: relative;
left: 0px;
margin-left: -6px;
}
ul#demo4 li.rt img {
float: left;
}
ul#demo4 li.rt div {
margin-left: 30px;
}
</style>
</head>
<body>
<ul id="demo1">
<li>
<img src="http://www.mamicode.com/img/gwm_my_quan.png" />
<div>百度(www.baidu.com)（Nasdaq:BIDU)是全球最大的中文搜索引擎，2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</div>
</li>
<li>
<img src="http://www.mamicode.com/img/gwm_my_quan.png" />
<div>百度以自身的核心技术“超链分析”为基础，提供的搜索服务体验赢得了广大用户的喜爱；超链分析就是通过分析链接网站的多少来评价被链接的网站质量，这保证了用户在百度搜索时，越受用户欢迎的内容排名越靠前。百度总裁李彦宏就是超链分析专利的唯一持有人，目前该技术已为世界各大搜索引擎普遍采用。</div>
</li>
<li>
<p>2016</p>
<div>百度拥有全球最大的中文网页库，目前收录中文网页已超过12亿，这些网页的数量每天正以千万级的速度在增长；同时，百度在中国各地分布的服务器，能直接从最近的服务器上，把所搜索信息返回给当地用户，使用户享受极快的搜索传输速度。</li>
</li>
</ul>
<ul id="demo2">
<li>
<img src="http://www.mamicode.com/img/gwm_my_quan.png" />
<div>
<h4>百度(www.baidu.com)（Nasdaq:BIDU)是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
<li>
<img src="http://www.mamicode.com/img/gwm_my_quan.png" />
<div>
<h4>百度(www.baidu.com)（Nasdaq:BIDU)是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
</ul>
<ul id="demo3">
<li class="lf">
<img src="http://www.mamicode.com/img/gwm_my_quan.png" />
<div>
<h4>百度是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
<li class="rt">
<img src="http://www.mamicode.com/img/gwm_my_quan.png" />
<div>
<h4>百度是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
</ul>
<ul id="demo4">
<li class="lf">
<img src="http://www.mamicode.com/img/gwm_my_quan.png" />
<div>
<h4>百度是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
<li class="rt">
<img src="http://www.mamicode.com/img/gwm_my_quan.png" />
<div>
<h4>百度是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
</ul>
</body>
</html>
css 常见时间轴的做法（————————————————时间轴——————————————————）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。