css 常见时间轴的做法（————————————————时间轴——————————————————）
2024-02-25 22:11:14
<!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="img/gwm_my_quan.png" />
<div>百度(www.baidu.com)（Nasdaq:BIDU)是全球最大的中文搜索引擎，2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</div>
</li>
<li>
<img src="img/gwm_my_quan.png" />
<div>百度以自身的核心技术“超链分析”为基础，提供的搜索服务体验赢得了广大用户的喜爱；超链分析就是通过分析链接网站的多少来评价被链接的网站质量，这保证了用户在百度搜索时，越受用户欢迎的内容排名越靠前。百度总裁李彦宏就是超链分析专利的唯一持有人，目前该技术已为世界各大搜索引擎普遍采用。</div>
</li>
<li>
<p>2016</p>
<div>百度拥有全球最大的中文网页库，目前收录中文网页已超过12亿，这些网页的数量每天正以千万级的速度在增长；同时，百度在中国各地分布的服务器，能直接从最近的服务器上，把所搜索信息返回给当地用户，使用户享受极快的搜索传输速度。</li>
</li>
</ul>
<ul id="demo2">
<li>
<img src="img/gwm_my_quan.png" />
<div>
<h4>百度(www.baidu.com)（Nasdaq:BIDU)是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
<li>
<img src="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="img/gwm_my_quan.png" />
<div>
<h4>百度是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
<li class="rt">
<img src="img/gwm_my_quan.png" />
<div>
<h4>百度是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
</ul>
<ul id="demo4">
<li class="lf">
<img src="img/gwm_my_quan.png" />
<div>
<h4>百度是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
<li class="rt">
<img src="img/gwm_my_quan.png" />
<div>
<h4>百度是全球最大的中文搜索引擎</h4>
<p>2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。</p>
</div>
</li>
</ul>
</body> </html>
<!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" />
<link rel="stylesheet" type="text/css" href="css/loading.css" />
</head> <body> <div class="heads">
<div class="logos bg4"></div>
<div class="msg">必填信息未完成</div>
<div class="time">(预计完成时间：5分钟)</div>
</div> <div class="bodys">
<img class="hu" src="data:images/loading/bu_img.png" />
<div class="border">
<div class="msgs1">
<div class="bg">
<div class="load finish"></div>
</div>
<p class="red">必填信息未完成必填信息未完成必填信成必填信</p>
</div>
<div class="msgs1">
<div class="bg">
<div class="load loads"></div>
</div>
<p class="hui">资料审核</p>
</div>
<div class="msgs1">
<div class="bg">
<div class="load tishi"></div>
</div>
<p class="hui">申请借款</p>
</div>
<div class="msgs1">
<div class="bg">
<div class="load weiwancheng"></div>
</div>
<p class="red">申请借款</p>
</div>
</div>
</div> <div class="wanshan">完善信息</div> </body> </html>
* {
padding: 0;
margin: 0;
}
html,
body {
background: white;
}
.heads {
background: #1888F5;
width: 100%;
height: auto;
padding-bottom: 10px;
}
.heads .logos {
width: 69px;
padding-top: 12px;
height: 54px;
margin: 0 auto;
}
.heads .logos.bg1.hide {
background: url("../images/loading/xinxi_icon.png") no-repeat center center;
background-size: 69px 54px;
}
.heads .logos.bg2.hide {
background: url("../images/loading/pingfen_icon.png") no-repeat center center;
background-size: 69px 54px;
}
.heads .logos.bg3.hide {
background: url("../images/loading/qianbao_icon.png") no-repeat center center;
background-size: 69px 54px;
}
.heads .logos.bg4 {
background: url("../images/loading/shenhe_icon.png") no-repeat center center;
background-size: 69px 54px;
}
.heads .msg {
padding-top: 19px;
text-align: center;
font-family: "微软雅黑";
font-size: 23px;
color: white;
}
.heads .time {
padding-top: 15px;
text-align: center;
font-family: "微软雅黑";
font-size: 14px;
color: #89c9ff;
}
.bodys {
width: 100%;
height: auto;
}
.bodys img.hu {
width: 100%;
display: block;
margin: 0 auto;
z-index: 100;
margin-top: -2px;
}
.bodys .border {
width: 80%;
height: auto;
margin: -10px auto 0px;
border-left: 1px solid #dadada;
}
.bodys .border .msgs1 {
width: 100%;
padding-top: 20px;
}
.bodys .border .msgs1:first-child {
padding-top: 30px;
}
.bodys .border .msgs1:last-child p {
padding-bottom: 0px;
}
.bodys .border .msgs1:last-child p:after {
padding-bottom: 0px;
height: 0px;
}
.bodys .border .msgs1 .bg {
width: 100%;
width: 36px;
height: 36px;
margin-left: -18px;
background-color: white;
float: left;
}
.bodys .border .msgs1 .load {
width: 20px;
z-index: 100;
height: 20px;
margin-top: 8px;
margin-left: 8px;
display: block;
}
.bodys .border .load.finish {
background-image: url("../images/loading/finish2_icon.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 20px 20px;
}
.bodys .border .load.tishi {
background-image: url("../images/loading/tishi2_icon.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 20px 20px;
}
.bodys .border .load.loads {
background-image: url("../images/loading/load.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 20px 20px;
-webkit-animation: loads 2s linear infinite;
animation: loads 2s linear infinite;
}
@-webkit-keyframes loads {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes loads {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.bodys .border .load.weiwancheng {
background-image: url("../images/loading/weiwancheng_icon.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 13px 13px;
}
.bodys .border .msgs1 p {
color: #ff6738;
overflow: hidden;
margin-left: 45px;
padding-bottom: 25px;
margin-top: 10px;
position: relative;
font-size: 17px;
}
.bodys .border .msgs1 p::after {
content: "";
position: absolute;
right: 0px;
bottom: 0px;
width: 100%;
height: 1px;
background: #DADADA;
transform: scaleY(0.3);
}
.bodys .border .msgs1 p.red {
color: #ff6738;
}
.bodys .border .msgs1 p.hui {
color: #a8a8a8;
}
.wanshan {
margin: 60px auto;
width: 60%;
height: 44px;
line-height: 44px;
text-align: center;
border-radius: 22px;
color: white;
background: #1E90EA;
box-shadow: 0px 0px 2px 3px #b6dffc;
}
.hide {
display: none !important;
}
最新文章
- Eclipse中自动提示的方法参数都是arg0,arg1的解决方法
- C# 如何调用WebServer函数
- OA项目之分页
- PLSQL查询表是否被锁定（转）
- CentOS 6.4 32位系统 LAMP(Apache+MySQL+PHP)安装步骤
- EL表达式介绍
- Scrum Planning Card
- easy ui 表单提交添加遮罩，避免数据重复提交
- Unity3d插件推荐
- Unity3D Mathf函数
- LUN 和 LVM 知识
- PHP面向对象(OOP):__toString()方法
- python标准库基础之mmap：内存映射文件
- Longest Valid Parentheses 解答
- DM6437 C64X+ EDMA 疑惑总结记录
- ubuntu如何安装Mac主题
- C++ traits技术浅谈
- 有关BOM头的一些知识
- python各种类型的转换
- [Swift]LeetCode1016. 子串能表示从 1 到 N 数字的二进制串 | Binary String With Substrings Representing 1 To N