<!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="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; }本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
