1675天 博客通用头像 Edwiin

本人熟练掌握linux,windows的开关机,擅长nfs,samba,ftp,dhcp,bind,apache,mail等各项服务的安装与卸载,精通shell,mysql,iptables,selinux等单词的拼写,了解虚拟化,存储,集群等相关汉字的书写。

【网站源码下载】让Console漂亮起来,在浏览器控制台添加网站说明

发布于 3年前 / 1.3k 次围观 / 0 条评论 / 网站源码 / Edwiin
本文最后更新于2017-4-21,已超过 1 个月没有更新,如果文章内容或图片资源失效,请【留言反馈】,我会及时处理,谢谢!

让喜欢按F12的访客不至于看到空空的控制台console打印的文字是可以添加样式的,不过不是全部css效果都有效,这里只介绍一小部分样式。
\n是换行,可以将一个字符串设置成多行
%c标记之后的内容使用对应样式,格式如 console.log('%c第一个样式%c第二个样式','css1','css2'); 如此对应
样式和普通的css效果基本一致,可以设置文字颜色,背景颜色,字体大小,间距,边距等等。还支持部分css3高级效果。
甚至还支持输出图片,不过我这里测试没有出现效果。
代码如下:

<script>
console.log("%c%c博客名称%c遇见心流","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#3fa9f5;line-height:28px;font-size:16px;");
console.log("%c%c网站地址%chttp://www.yujianxinliu.com","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#ff9900;line-height:28px;font-size:16px;");
console.log("%c%c企鹅号码%c12405003","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#008000;line-height:28px;font-size:16px;");
console.log("%c%c任何足够先进的技术,初看皆与魔法无异!我一直觉得这句话很有道理,不知道你是不是也这样认为呢。","line-height:28px;","line-height:28px;padding:4px 0px;color:#fff;font-size:16px;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#ff22ff),color-stop(1,#5500ff));color:transparent;-webkit-background-clip:text;");
</script>

 

全站顶部广告位

  • 支付宝赞助图片
  • 微信赞助图片
  • QQ赞助图片
头像
描述: 还好有你,再见如初。

Press Space to start