常用html、demo代码
发布时间：2015-10-15, 14:45:06 分类：HTML | 编辑 off 网址 | 辅助
图集1/30
正文 9756字数 27,227,375阅读
暗网网址导航hidden wiki
http://zqktlwi4fecvo6ri.onionRun code
Cut to clipboard
HTML特殊字符编码对照表
console.log(allnum);
javascript:;
vertical-align:middle;
strconv=yes+js
echo str_ireplace("WORLD","Shanghai","Hello world!");//不区分大小写
<a href="javascript:scroll(0,0)">返回顶部</a>
jquery多个节点绑定同一个事件
$('#begin,#end') 用逗号隔开
target="_blank"
index.php?g=Admin&m=Login
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
location.href = url;
autocomplete="off"
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="提交" />
<input type="button" value="提交">
</form>
$.ajax({
type: "POST",
url:'/index.php?g=User&m=Post&a=Message&ajax=ajax',
data:$('#myform').serialize(),
error: function(request) {
alert("提交失败");
},
success: function(data) {
if(data>0){
alert('留言提交成功！');
location.reload();
}else alert("提交失败");
}
});
function ajaxpost(tel,pass){
$.ajax( {
url:"/index.php/Home/Register/is_login.html",
type: "post",
data:"tel="+tel+"&pass="+pass,
//dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
}
});
}
<a href="javascript:scroll(0,0)">顶部</a> <a href="#copy">底部</a>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
Run code
Cut to clipboard
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="icon" href="/favicon.ico">
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">
</head>
<body>
</body>
</html>Run code
Cut to clipboard
$.ajax( {
url: '/index.php?s=/addon/WeiSite/WeiSite/ForgetPassword/tel/'+shoujihao+'/codeddd/'+codeddd+'.html', //这里是静态页的地址
type: "GET", //静态页用get方法，否则服务器会抛出405错误
//dataType: "json",
//cache: false,
//async: false,
beforeSend: function(){
// Handle the beforeSend event
},
success: function(data){
//var result = $(data).find("另一个html页面的指定的一部分").html();
}
});Run code
Cut to clipboard
<link rel="apple-touch-icon" size="72x72" href="/icon-ipad.png" />
<link rel="apple-touch-icon" size="114x114" href="/icon-iphone4.png" />
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />Run code
Cut to clipboard
I('post.id',0,'intval'); // 用intval过滤$_POST['id']
I('get.title','','strip_tags'); // 用strip_tags过滤$_GET['title']Run code
Cut to clipboard
<meta name="title" content="标题">
<meta name="author" content="作者">
<meta name="description" content="描述">
<meta name="keywords" content="关键字">
<meta name="copyright" content="lizhenqiu.com">
移动端UC /QQ 浏览器的部分私有Meta 属性
下面就说下移动端UC /QQ 浏览器的部分私有Meta 属性，都来自其开发者文档（UC开发者中心，左下一doc文档，QQ浏览器）。
UC 浏览器的部分私有Meta 属性
设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
设置是否全屏，yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
缩放不出滚动条
<meta name="viewport" content="uc-fitscreen=no|yes"/>
设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。
排版
<meta name="layoutmode" content="fitscreen|standard" />
fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。
夜间模式
<meta name="nightmode" content="enable|disable"/>
nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。
强制图片显示
<meta name="imagemode" content="force"/>
UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个
<img src="..." show="force">
应用模式
<meta name="browsermode" content="application"/>
使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
QQ 浏览器x5内核定制标签说明
设置屏幕方向
<meta name="x5-orientation" content="portrait|landscape" />
设置全屏
<meta name="x5-fullscreen" content="true" />
设置屏幕模式
<meta name="x5-page-mode" content="app" />
对于控制全屏的meta 标签，UC 跟QQ 处理的方式稍有不同：区别在于处理系统状态栏，UC 是直接覆盖系统状态栏，而QQ 仍然保留之。Run code
Cut to clipboard
$("p").css("color","red");
//同时设置字体大小和背景色
$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
Run code
Cut to clipboard
header('Content-Type:text/html;charset=utf-8'); //避免输出乱码
<img title="点击刷新" src="cache/yzm.php" align="absbottom" onclick="this.src='cache/yzm.php?'+Math.random();" />
Run code
Cut to clipboard
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://lizhenqiu.com/templates/default/style.css" type="text/css" media="screen">
<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>Run code
Cut to clipboard
Yourphp手册
简单文本编辑器
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;font-family:georgia;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> lizhenqiu.comRun code
Cut to clipboard
Chrome提供了一个简单的方法。首先，按“F12”打开控制台，然后输入：
document.designMode = "on"Run code
Cut to clipboard
添加到收藏夹URL填写下面的即可在当前页面点击收藏夹编辑页面
javascript:(function(){document.designMode = "on" })();Run code
Cut to clipboard
接下来，你就可以编辑屏幕上的文本内容了。
编辑器
data:text/html, <html contenteditable>Run code
Cut to clipboard
如果你想找回不小心关闭的Tab页面，只需要同时按下“Control"（Mac用户请按“Command”）、“Shift"和“T”。
js随机数
function getRandom(n){
return Math.floor(Math.random()*n+1)
}Run code
Cut to clipboard
top.location.href 和 localtion.href 有什么不同
top.location.href=”url”Run code
Cut to clipboard
在顶层页面打开url（跳出框架）
self.location.href=”url”Run code
Cut to clipboard
仅在本页面打开url地址
parent.location.href=”url”Run code
Cut to clipboard
在父窗口打开Url地址
this.location.href=”url”Run code
Cut to clipboard
用法和self的用法一致
if (top.location == self.location) 判断当前location 是否为顶层来 禁止frame引用 如果页面当中有自定义的frame的话，也可以将parent self top换为自定义frame的名称 效果就是在自定义frame窗口打开url地址
实际中可能这样使用
if(top !== self){ top.location.href = location.href; }Run code
Cut to clipboard
以下是从网上找到的一个例子，不是很直观， 我加了上面那三行代码， 可以先去掉， 再加上， 看一下效果，就很清楚了 以下是top.htm 代码
<script language=javascript> function rs(){
if(top !== self){ top.location.href = location.href; } parent.left.location.href="top.htm" parent.bot.location.href="top.htm" } < /script> < input type=button name=name value="ksdj" onclick=rs();>Run code
Cut to clipboard
以下是一个随意文件名的htm文件:
<FRAMESET COLS="150,*"> < FRAME SRC="left.htm" name=left> < FRAMESET ROWS="150,*"> < FRAME SRC="top.htm" name=top> < FRAME SRC="bot.htm" name=bot> < /FRAMESET> < /FRAMESET> Run code
Cut to clipboard
top表示主窗口，location表示当前窗口，如果你的文件只有一个框架，没有iframe和frmaeset，那么是完全一致的，没有区别。
top.location是在顶层frame中打开新页
window.location是在当前frame中打开新页
parent.location 在当前窗口的父窗口打开Url地址
<select id="isAudit" name="isAudit">
<option value="2">全部</option>
<option value="1" selected = "selected">通过</option>
<option value="0">未通过</option>
</select> Run code
Cut to clipboard
修改ID增加ID属性，修改class同理
$('.div').attr('id','newid');
如果是给标签添加class样式可以这样
$('#div').addClass('css类名');
strtotime("-1 week")， strtotime("-n days");可以很方便的获取当前日期的前n天、周、月的时间戳Run code
Cut to clipboard
舒适网页配色方案
px像素转换rem单位工具
（支付宝）给作者钱财以资鼓励 （微信）→
有过 279 条评论 »
所谓 referrer 是一个外部站点，用户单击该站点上一个超链接便可以到达你的网站。许多网志引擎当读者导航到你的网志的某个入口时都能自动保持跟踪。大多数引擎都会在网志入口底部显示一个 referrers 清单，以便读者能往回导航到 referrer 的站点，并清楚他们关于该入口要说些什么，这基于一个假设，那就是如果他们链接到它，可能就此会写些什么。referrer 存在的问题是必须要有这个假设才成立——没有足够的信息说明是否引用的页面事实上包含有关信息。实际上，垃圾信息的发布者为了营销企图已经利用了这个漏洞来重定向读者。
Trackback 和 pingback 同一个规范，被用来弥补上述问题的方案。使用 trackback 和 pingback，其他博客们能自动发送一个 ping 到你的网志以明确表示他们已经写了一个引用特定帖子的入口。
这种类型的反链允许你的网志以更明显的方式显示所有评论的清单。当今大多数网志软件支持所有这些技术。
在Movable Type和WordPress软件中，包含有该功能。这种功能通过在博客之间互相“ping”的机制，实现了网站之间的互相通告；因此，它也可以提供提醒功能。
TrackBack功能一般出现在一个博客文章的下方，同时会显示对方博客的摘要信息、URL和网志标题。
TrackBack规范由Six Apart在2000年制订，并在Movable Type 2.2中予以实现。
Trackback我们都知道是自己在自己的Blog上撰文回应别人的文章,那么别人的文章的回复中会有trackback from的字样.但是我很早又注意到有trackback和pingback之分,在很多Blog的回复都看到除了comments(回复)外,还有trackback和pingback,但一直不清楚这两者有什么区别,如何才是Pingback呢?
如果你后台打开了”对文章中提到的其它网站的网页链接发送通告(会降低保存文章的速度)”这个选项的话,那么你的文章中如果有相应的URI,那么wordpress就会向这个文章发送ping,这个过程就应该是pingback,而且很有意思的是,对方回复中不会像trackback那样显示excerpt或者是正文的头部文字,而是显示出提到你的URI的那一段文字—让人疑惑好久,区别于trackback的另一种ping.
1，功能
从普通blogger的眼观看，Pingback和Trackback的作用是一样的：
1。博客A发布了一篇文章；
2。博客B看到后，发布评论、引用、介绍博客A上该篇文章的贴子；
3。在文章发布时，博客B即自动向博客A发送Pingback或TrackBack；
4。博客A收到相应的Pingback或TrackBack，如果未设置人工审核，相应的内容即会出现在博客A该文的留言中，如果设置了人工审核，则出现在博客A的审核列表中，俟博客A认为不是spam后将其发布在留言中。
即，Pingback或TrackBack通过自动连接相互引用的blog，使blog内容相关性进一步提高，进而形成以内容为导向的聚合性网络。
2，区别：
pingback在WP中是自动的，而trackback则需要你在自己的blog“撰写文章”、或者在别人的blog写“评论”的时候手动输入。
更专业的说法就是：
pingback是blog系统的自动ping通信机制，用于实现上述内容聚合功能。正如yskin所说，pingback成功后，在对方日志里显示的摘要来自于你文章中放置引用原文的链接附近。
而trackback则是人为发送内容聚合的方法。在对方日志里显示的摘要则是你的这篇文章的摘要部分。
（关于在摘要是否出现以及出现的方式等，也如yskin所说：要依赖于blog系统以及blogger的自主设置）。
3，ping
ping事实上与操作系统的ping命令在动作上一致：按照一定的协议相互通信。只不过内容区别很大而已。
上述pingback和trackback都需要ping机制和ping动作实现，但是blog系统的ping不仅仅用于上述功能。
例如通知feedburner更新feed都是要ping的。
4，谨防垃圾评论
这个不多说了，使用pingback和trackback无疑会增大bolg的被电击率，扩大影响。但随之而来的就是垃圾评论，解决方法：
开启评论审核机制；
开启垃圾评论过滤机制。
前几天看了一下WordPress的源代码，确实是WordPress同时支持Pingback和Trackback。WordPress不仅可以接受发来的Pingback和Trackback，而且可以同时发出这两种。文章里自动查找链接然后发出的是Pingback，而手工填写Trackback地址发出的是Trackback。
另外，关于ping，WordPress里的ping的全称是XML-RPC ping，它使用XML-RPC，向服务器发送一个ping命令。可以参考Technorati网站的说明：http://technorati.com/developers/ping/ ，发送的xml里方法名是：weblogUpdates.ping。
XML-PRC ping和网络上的ping功能(比如Windows下的ping命令)也有一点相似。ping命令发送ICMP包给目标服务器，目标服务器收到后返回一个ICMP包做响应。ping命令找出里面的TTL等信息，然后计算发送到收到相应的时间，显示给用户。XML-PRC ping则是发送一个请求，请求执行一个叫做"ping"的方法，而服务器收到后执行ping方法，一般是读取feed，或者有一些转发服务，将ping信息转发给其他多个ping服务器。然后，服务器通常会返回一个信息，有说OK，也有不返回的。
在金山词霸网站查到，ping一词的解释是查验。网络的ping或许就是查验，检查的意思，ping一下某个IP，就是发送一个信息，然后等待该IP返回一个回应，以确定该IP的服务器是否在网络中，是否正常工作，也确定本机到该IP的网络通路是畅通的。而XML-PRC ping，则是通知，通知服务器赶快来更新自己的feed
什么是引用 (Trackbacks)？
简单说来，Trackback是网站与网站之间互相通告的一种方法。它能让甲对乙说：“这篇文章可能是你感兴趣的”，要实现这一动作，甲向乙发送一个 Trackback Ping（引用通告）即可。在这种情况下，一个 Ping 就是一条从一个web服务器发送到另一个服务器的短消息（a small message）。
甲在自己的 Blog 中写文章，对乙Blog中的随笔发表评论。这是远程评论的一种形式--不必直接在乙的Blog中发表评论，甲只要在自己的Blog中发表，然后发送一个引用通告通知乙。
甲对于一群人都感兴趣的主题发表文章。这是内容集合的一种形式--通过发送一个引用通告到中心服务器，访问者可以读到有关此主题的所有文章。例如，假定有一个收集有关 Justin Timberlake 文章的网站，任何对此感兴趣的人都可能通过访问这个网站，得到其它Blog上有关于此的最新情况。
如何在 .Text 中使用引用?
你什么也不必做。当你发表了一篇文章，.TEXT 会检查文章内容中包含的所有链接, 并自动向每个链接地址发送引用。
对于你文章内容中的每一个链接，.TEXT 会搜索被链接页的全部内容，寻找引用部分，此部分包含当前链接的引用终点。如果终点找到，产生一个包含你文章详细资料的引用通告。详细资料包括你文章和 Blog 的标题、链接地址。
当你查看你 Blog 的引用的时候，通过点击引用页的“新建”链接，可以把任何链接直接转换为引用。这是从你要实现引用的网站显示相关链接的便捷方法。
Windows：C#
Android：Kotlin
iOS：Swift
<div style="width:100px;"> <div style=" width:100%; height::0; padding-bottom:50%;/*这里可以设定比例*/ background:url(https://lizhenqiu.com/favicon.ico); "></div> </div>你需要做一个高宽比固定的容器,
这里有一个比较偏的小技巧,就是padding-bottom是按照父元素的宽度比计算的,而不是按高度算,所以这里可以用溢出
给父元素宽度值，子元素宽度100%
参考纯 CSS 实现高度与宽度成比例的效果
div不设置高度自动自适应图片高度获取高度背景css容器后高度
js小工具---本地图片转换为base64编码数据
<input type="file" onchange ="startt(this);"> <script> /*转换函数*/ function startt(img) { var imgFile = new FileReader(); imgFile.readAsDataURL(img.files[0]); imgFile.onload = function () { var imgData = this.result; //base64数据 alert(imgData); /*imgShow.setAttribute('src', imgData); conte.value = imgData; len.innerHTML += imgData.length; */ } } </script><style>@import "compass/css3"; body { font-family: "Helvetica Neue"; font-size: 20px; font-weight: normal; } section { max-width: 450px; margin: 50px auto; div { max-width: 255px; word-wrap: break-word; margin-bottom: 20px; line-height: 24px; } } .clear {clear: both} .from-me { position:relative; padding:10px 20px; color:white; background:#0B93F6; border-radius:25px; float: right; &:before { content:""; position:absolute; z-index:-1; bottom:-2px; right:-7px; height:20px; border-right:20px solid #0B93F6; border-bottom-left-radius: 16px 14px; -webkit-transform:translate(0, -2px); } &:after { content:""; position:absolute; z-index:1; bottom:-2px; right:-56px; width:26px; height:20px; background:white; border-bottom-left-radius: 10px; -webkit-transform:translate(-30px, -2px); } } .from-them { position:relative; padding:10px 20px; background:#E5E5EA; border-radius:25px; color: black; float: left; &:before { content:""; position:absolute; z-index:2; bottom:-2px; left:-7px; height:20px; border-left:20px solid #E5E5EA; border-bottom-right-radius: 16px 14px; -webkit-transform:translate(0, -2px); } &:after { content:""; position:absolute; z-index:3; bottom:-2px; left:4px; width:26px; height:20px; background:white; border-bottom-right-radius: 10px; -webkit-transform:translate(-30px, -2px); } }</style> <section> <div class="from-me"> <p>Hey there! What's up?</p> </div> <div class="clear"></div> <div class="from-them"> <p>Checking out iOS7 you know..</p> </div> <div class="clear"></div> <div class="from-me"> <p>Check out this bubble!</p> </div> <div class="clear"></div> <div class="from-them"> <p>It's pretty cool!</p> </div> <div class="clear"></div> <div class="from-me"> <p>Yeah it's pure CSS & HTML</p> </div> <div class="clear"></div> <div class="from-them"> <p>Wow that's impressive. But what's even more impressive is that this bubble is really high.</p> </div> </section>在线小三角css提示tipscssarrowplease
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no" /> <title>Blued 最终用户许可协议</title> <style type="text/css"> body{ margin:20px 10px; color: #666; background-color:#FFF; } h2 { color: #333; text-align: center; } </style> </head> <body> <h2>总则</h2> <p>1、Blued是由北京蓝城兄弟信息技术有限公司开发并运营的基于地理位置的同志人群移动社交软件。</p> <p>2、Blued用户是指完成全部注册流程，愿意接受本用户条款并在Blued相关使用规范的规定下使用软件服务的注册用户。</p> <p>3、本服务条款可能随时更新，更新后的服务条款一旦公布即代替原来的服务条款，恕不再另行通知，用户可在本网站查阅最新版服务条款。</p> <p></p> <p></p> <h2>使用规则</h2> <p>1、本条所述内容是指用户使用本服务过程中所制作、上载、复制、发布、传播的任何内容，包括但不限于账号头像、名称、用户说明等注册信息及认证资料，或文字、语音、图片、视频、图文等发送、回复或自动回复消息和相关链接页面，以及其他使用账号或本服务所产生的内容。</p> <p>2、用户不得利用Blued账号或本服务制作、上载、复制、发布、传播如下中华人民共和国法律、法规和政策禁止的内容：</p> <p>(1) 反对宪法所确定的基本原则的；</p> <p>(2) 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p> <p>(3) 损害国家荣誉和利益的；</p> <p>(4) 煽动民族仇恨、民族歧视，破坏民族团结的；</p> <p>(5) 破坏国家宗教政策，宣扬邪教和封建迷信的；</p> <p>(6) 散布谣言，扰乱社会秩序，破坏社会稳定的；</p> <p>(7) 散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p> <p>(8) 侮辱或者诽谤他人，侵害他人合法权益的；</p> <p>(9) 煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；</p> <p>(10) 以非法民间组织名义活动的；</p> <p>(11) 不符合《即时通信工具公众信息服务发展管理暂行规定》及遵守法律法规、社会主义制度、国家利益、公民合法利益、公共秩序、社会道德风尚和信息真实性等“七条底线”要求的；</p> <p>(12) 含有法律、行政法规禁止的其他内容的。</p> <p></p> <p>3、用户不得利用Blued账号或本服务制作、上载、复制、发布、传播如下干扰Blued正常运营，以及侵犯其他用户或第三方合法权益的内容：</p> <p>(1) 含有任何性或性暗示的（例如包括但不限于涉嫌约炮等字眼、个人私处描述）；</p> <p>(2) 含有辱骂、恐吓、威胁内容的；</p> <p>(3) 含有骚扰、垃圾广告、恶意信息、诱骗信息的；</p> <p>(4) 涉及他人隐私、个人信息或资料的（例如包括但不限于详细地址描述，详细工作职位描述）；</p> <p>(5) 发布、传送、传播、储存侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的；</p> <p>(6) 提交、发布虚假信息，或冒充、利用他人名义的；</p> <p>(7) 含有其他违反法律法规、政策及公序良俗、社会公德或干扰本服务正常运营和侵犯其他用户或第三方合法权益内容的信息。</p> <p></p> <p>4、为更好地服务同志人群，Blued制订了附加条款，用于规范用户在Blued中的行为。</p> <p>(1) 个人签名、头像、动态、群组头像、群组简介中不得含有电话号码或疑似电话号码；</p> <p>(2) 头像、相册、动态配图、群组头像不允许上传包含网站(QQ空间、微博除外)、电话号码水印、二维码的图片；</p> <p>(3) 头像、相册、动态配图、群组头像中不允许上传任何证件照或疑似证件照的图片；</p> <p>(4) 个人签名、头像、动态、相册、动态配图、群组头像、群组简介中不能有营销类、创业类、传销类（包括微店微商）等相关文字或图片；</p> <p>(5) 头像、相册、群组头像中不允许上传女性照片（不包括女星、漫画等）；</p> <p>(6) 头像、相册、群组头像中不允许上传涉嫌广告或其他软件的LOGO、极其模糊的卡通、纯色色块等；</p> <p></p> <p>5、如用户违反本条款以及相关法律法规的规定，Blued有权进行独立判断并限制、冻结或终止用户帐号的使用，并且根据实际情况决定是否恢复使用。特别提示：</p> <p>(1) 反复上传同条违规信息，会导致您的账号被封禁；</p> <p>(2) 违反以上任何一条用户条款，均有可能导致您的账号被封禁。</p> <p></p> <p>6、用户在使用本服务中或通过本服务所传送的任何内容并不反映Blued的观点或政策，Blued对此不承担任何责任。</p> <p></p> <p></p> <h2>风险提示</h2> <p>1、请用户仔细阅读充分理解本服务条款，自主考虑风险。为了提供有效的服务，本服务会利用终端设备的带宽和处理器等资源，使用过程中可能产生数据流量的费用，用户需自行向运营商了解相关资费信息，并自行承担相关费用。</p> <p>2、使用本服务，用户须自行承担如下Blued不可掌控的风险内容，包括但不限于：由于受到恶意程序、黑客攻击的破坏等不可抗力可能引起的信息丢失风险；用户或Blued的软件、硬件、系统或通信线路出现故障等原因所引起的账号登陆失败、资料同步不完整、打开速度慢等风险；用户操作不当以及其他无法控制或合理预见的情形。</p> <p>3、用户应当理解，用户通过本服务发布的内容可能被其他用户或第三方复制、转载、修改或者用做其他用途，对于可能带来的风险和责任，用户要有预期和意识，任何不愿被他人获知的信息包括但不限于证件信息等都不应在Blued发布。</p> <p>4、用户应当理解，在使用本服务中可能存在有来自他人的包括威胁性、诽谤性、令人反感或非法的内容或行为，或对他人权利的侵犯的匿名或冒名的信息的风险，用户须承担以上风险，Blued对本服务不作任何类型的担保，不论是明确的或隐含的，包括所有有关信息真实性、所有权和非侵权性的明示或默示担保和条件，对因此导致任何因用户不正当或非法使用服务产生的损害，不承担任何责任。</p> <p>5、Blued依据本协议约定获得处理违法违规内容或行为的权利，该权利不构成Blued的义务或承诺。如果其他用户侵犯了你的合法权益，你可以向Blued投诉，我们将依照法律和规定进行处理。</p> <p></p> <p></p> <h2>其他</h2> <p>1、本用户条款签订地为北京市朝阳区。本条款的解释、效力及纠纷的解决，适用于中华人民共和国法律。若用户和Blued之间发生任何纠纷或争议，首先应友好协商解决，协商不成的，用户同意将纠纷或争议提交Blued所在地即北京市有管辖权的人民法院管辖。</p> <p>2、本协议的任何条款无论因何种原因无效或不具可执行性，其余条款仍有效，对双方具有约束力。</p> <p>3、本服务条款可能随时更新，更新后的服务条款一旦公布即代替原来的服务条款，不再另行通知，用户可在本网站查阅最新版服务条款。</p> <p>4、本协议的版权由Blued所有，Blued保留一切解释和修改权利。</p> </body> </html><style>body { background:#000 !important; color:#FFF; } .loader { width:50px; height:50px; display:inline-block; padding:0px; opacity:0.5; border:3px solid #09acfd; -webkit-animation: loader 1s ease-in-out infinite alternate; animation: loader 1s ease-in-out infinite alternate; } .loader:before { content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 3px solid #09acfd; } .loader:after { content: " "; position: absolute; z-index: -1; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 3px solid #09acfd; } @keyframes loader { from {transform: rotate(0deg) scale(1,1);border-radius:0px;} to {transform: rotate(360deg) scale(0, 0);border-radius:50px;} } @-webkit-keyframes loader { from {-webkit-transform: rotate(0deg) scale(1, 1);border-radius:0px;} to {-webkit-transform: rotate(360deg) scale(0,0 );border-radius:50px;} } .loader1 { display:inline-block; font-size:0px; padding:0px; } .loader1 span { vertical-align:middle; border-radius:100%; display:inline-block; width:10px; height:10px; margin:3px 2px; -webkit-animation:loader1 0.8s linear infinite alternate; animation:loader1 0.8s linear infinite alternate; } .loader1 span:nth-child(1) { -webkit-animation-delay:-1s; animation-delay:-1s; background:rgba(245, 103, 115,0.6); } .loader1 span:nth-child(2) { -webkit-animation-delay:-0.8s; animation-delay:-0.8s; background:rgba(245, 103, 115,0.8); } .loader1 span:nth-child(3) { -webkit-animation-delay:-0.26666s; animation-delay:-0.26666s; background:rgba(245, 103, 115,1); } .loader1 span:nth-child(4) { -webkit-animation-delay:-0.8s; animation-delay:-0.8s; background:rgba(245, 103, 115,0.8); } .loader1 span:nth-child(5) { -webkit-animation-delay:-1s; animation-delay:-1s; background:rgba(245, 103, 115,0.4); } @keyframes loader1 { from {transform: scale(0, 0);} to {transform: scale(1, 1);} } @-webkit-keyframes loader1 { from {-webkit-transform: scale(0, 0);} to {-webkit-transform: scale(1, 1);} } .loader2 { width:25px; height:25px; display:inline-block; padding:0px; border-radius:100%; border:5px solid; border-top-color:rgba(254, 168, 23, 0.65); border-bottom-color:rgba(57, 154, 219, 0.65); border-left-color:rgba(188, 84, 93, 0.95); border-right-color:rgba(137, 188, 79, 0.95); -webkit-animation: loader2 2s ease-in-out infinite alternate; animation: loader2 2s ease-in-out infinite alternate; } @keyframes loader2 { from {transform: rotate(0deg);} to {transform: rotate(720deg);} } @-webkit-keyframes loader2 { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(720deg);} } .loader3 { width:50px; height:50px; display:inline-block; padding:0px; text-align:left; } .loader3 span { position:absolute; display:inline-block; width:50px; height:50px; border-radius:100%; background:rgba(135, 211, 124,1); -webkit-animation:loader3 1.5s linear infinite; animation:loader3 1.5s linear infinite; } .loader3 span:last-child { animation-delay:-0.9s; -webkit-animation-delay:-0.9s; } @keyframes loader3 { 0% {transform: scale(0, 0);opacity:0.8;} 100% {transform: scale(1, 1);opacity:0;} } @-webkit-keyframes loader3 { 0% {-webkit-transform: scale(0, 0);opacity:0.8;} 100% {-webkit-transform: scale(1, 1);opacity:0;} } .loader4 { width:45px; height:45px; display:inline-block; padding:0px; border-radius:100%; border:5px solid; border-top-color:rgba(246, 36, 89, 1); border-bottom-color:rgba(0,0,0, 0.1); border-left-color:rgba(246, 36, 89, 1); border-right-color:rgba(0,0,0, 0.1); -webkit-animation: loader4 1s ease-in-out infinite; animation: loader4 1s ease-in-out infinite; } @keyframes loader4 { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } @-webkit-keyframes loader4 { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } .loader5 { display:inline-block; width: 0; height:0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #4183D7; border-top: 10px solid #F5AB35; -webkit-animation: loader5 1.2s ease-in-out infinite alternate; animation: loader5 1.2s ease-in-out infinite alternate; } @keyframes loader5 { from {transform: rotate(0deg);} to {transform: rotate(720deg);} } @-webkit-keyframes loader5 { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(720deg);} } .loader6 { display:inline-block; width: 20px; height:20px; border-left: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 2px solid #D24D57; border-top: 2px solid #D24D57; -webkit-animation: loader6 1.8s ease-in-out infinite alternate; animation: loader6 1.8s ease-in-out infinite alternate; } .loader6:before { content: " "; position: absolute; z-index: -1; top: 5px; left: 0px; right: 0px; bottom: 5px; border-left: 2px solid #D24D57; border-right: 2px solid #D24D57; } @keyframes loader6 { from {transform: rotate(0deg);} to {transform: rotate(720deg);} } @-webkit-keyframes loader6 { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(720deg);} } .loader7 { display:inline-block; width: 30px; height: 4px; background:#BE90D4; -webkit-animation: loader7 1.5s linear infinite; animation: loader7 1.5s linear infinite; } @keyframes loader7 { from {transform: rotate(0deg);} to {transform: rotate(720deg);} } @-webkit-keyframes loader7 { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(720deg);} } .loader8 { display:inline-block; background: rgba(247, 202, 24,0.6); width: 30px; height: 30px; position: relative; text-align: center; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); -webkit-animation: loader7 3s linear infinite; animation: loader7 3s linear infinite; } .loader8:before { content: ""; position: absolute; top: 0; left: 0; height: 30px; width: 30px; background: rgba(247, 202, 24,0.5); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } .loader9 { display:inline-block; position: relative; width: 50px; height: 50px; -webkit-animation:loader9 1.5s linear infinite; animation:loader9 1.5s linear infinite; } .loader9:before, .loader9:after { position: absolute; content: ""; left: 30px; top: 0; width: 30px; height: 50px; background: red; -moz-border-radius: 30px 30px 0 0; border-radius: 30px 30px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .loader9:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } @keyframes loader9 { 0% {transform: scale(0, 0);opacity:0;} 100% {transform: scale(1, 1);opacity:1;} } @-webkit-keyframes loader9 { 0% {-webkit-transform: scale(0, 0);opacity:0;} 100% {-webkit-transform: scale(1, 1);opacity:1;} }</style><br/><br/><br/> <div class="container"> <div class="row"> <div class="col-md-6 text-center"> <p>loader 0</p> <div class="loader"></div> </div> <div class="col-md-6 text-center"> <p>loader 1</p> <div class="loader1"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> </div> <br/><br/><br/> <div class="container"> <div class="row"> <div class="col-md-6 text-center"> <p>loader 2</p> <div class="loader2"></div> </div> <div class="col-md-6 text-center"> <p>loader 3</p> <div class="loader3"> <span></span> <span></span> </div> </div> </div> </div> <br/><br/><br/> <div class="container"> <div class="row"> <div class="col-md-6 text-center"> <p>loader 4</p> <div class="loader4"></div> </div> <div class="col-md-6 text-center"> <p>loader 5</p> <div class="loader5"></div> </div> </div> </div> <br/><br/><br/> <div class="container"> <div class="row"> <div class="col-md-6 text-center"> <p>loader 6</p> <div class="loader6"></div> </div> <div class="col-md-6 text-center"> <p>loader 7</p> <div class="loader7"></div> </div> </div> </div> <br/><br/><br/> <div class="container"> <div class="row"> <div class="col-md-6 text-center"> <p>loader 8</p> <div class="loader8"></div> </div> <div class="col-md-6 text-center"> <p>loader 9</p> <div class="loader9"></div> </div> </div> </div>