专栏首页小轻论坛小白也能轻松为网页加各种部件
原创

小白也能轻松为网页加各种部件

小轻相信,许多人对网页是很感兴趣并且是很想学习的。当初创立小轻网及小轻论坛网页就是为了帮助大家学习一些技术经验,同时也学会如何去找资源。今天,我们给原有网页加一些部件,达到装饰和增加功能的作用。

以超级治愈的时钟小人和QQ客服悬浮代码为例,我们来简单了解下代码的使用。(这两个部件我都用到小轻网了,大家可以查阅)

让我们先见识下这个时钟小人,动态效果请见小轻网(http://fun.xzwidea.cn/)

是不是很有意思呢?

然而这个小人早在2008年9月份就发布了

时钟作者网站

小轻前段时间关注到这个功能是在一个网页截图上,之后在一个抖音视频解析网站上找到代码,点击时钟下面的“ HONE HONE CLOCK ”就可以进入到发明这个时钟的日本网友的博客。

透明代码为:

<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

白底代码为:

<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>

现在代码有了,怎么让代码展示在网页上呢?我们把<script> 标签放入<div>中,为其创一个属性nav,设置悬浮,调整其位置到你需要的地方。代码中“width”“height”很清楚了,表示的就是需要悬浮的样式大小,“border”就是悬浮边框线的粗细,由于我设置的边框没颜色,所以在这里可以不加,如果大家想使用框线,可在这个之后加代码“solid #(十六进制颜色代码)”。“position:fixed”就是相对浏览器的定位,right:0就是紧贴浏览器右边,而“top:86%”就是在窗口从顶部算86%的位置,这样大小、位置都确定了。(数值仅供参考)

时钟代码

接着在body结束前面加入带nav属性的div标签,在其中嵌入上述时钟代码,透明或者白底时钟看你喜欢。

<div id="nav"><script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script></div>
时钟代码

再给大家讲讲如何加入QQ客服悬浮框。

代码已经准备好,只需要大家去利用。关注微信公众号【小轻论坛】发送关键词“QQ客服”即可获取代码。

jQuery在线QQ客服代码

现在将“css”“images”“js”文件夹上传到服务器,现在需要做的就是提取index.html中的有用信息了,什么是有用信息?

代码头

head中的<link>和<script>标签,这块直接复制到原来的主页的head中,这样就可以引用到“css”“images”“js”文件夹里的内容。

接着,将中间的div标签直接复制到<body>标签结束前,和上面的代码放置方法相同。

客服代码

修改里面的客服QQ及名称即可。如图,框选出的内容均是可修改的。

客服代码

以下是效果展示:

小轻导航网效果展示

是不是很棒呢?以此为例,相信没有网页基础的你,也可以轻松为大部分网站加许多的部件。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 真是笑skr人,贴膜师傅让我删掉这条推送!

    相信许多人都在依赖天桥上的小贩、手机店老板贴膜吧!然而很多人在不断进化过程中学会了贴膜这一项“技术活”。贴膜真的是技术活么?手机真的要贴膜么?什么膜更加适合你?...

    半夜喝可乐
  • 42年前,所有社交网络前身——首个BBS诞生

    背景:1978年2月16日,芝加哥两位计算机专家Ward Christiansen和Randy Seuss开发出第一个计算机BBS系统:CBBS(Compute...

    半夜喝可乐
  • 小白也能轻松为网页加各种部件

    小轻相信,许多人对网页是很感兴趣并且是很想学习的。当初创立小轻网及小轻论坛网页就是为了帮助大家学习一些技术经验,同时也学会如何去找资源。今天,我们给原有网页加一...

    半夜喝可乐
  • Nodejs 进阶:解答 Cluster 模块的几个疑问

    ?在 PM2 的配置文件中可以设置 exec_model:'cluster' 和 instances 两个属性来设置开启多个进程,PM2 其实主要也是利用 N...

    五月君
  • 单细胞数据拟时序分析-destiny

    单细胞数据分析常用到建立trajectory和pseudoTime,拟时序分析可以用 Diffusion( Destiny R package)

    生信编程日常
  • [群友分享] 第一次安装liunx系统排坑总结

    本文来自群友“易水难求”总结,适合新手排坑 第一次安装设置虚拟机爬坑总结 第一坑:使用VMware Workstation 11版本的设备安装 CentOS-...

    风间影月
  • 细说进程五种状态的生老病死——双胞胎兄弟Java线程

    java线程的五种状态其实要真正高清,只需要明白计算机操作系统中进程的知识,原理都是相同的。

    intsmaze-刘洋
  • 【hrbust2294】方方正正

    哈理工2016级新生程序设计全国邀请赛C题 一个r行c列的01矩阵,告诉你每行的和、每列的和,问是否存在这样的矩阵?

    饶文津
  • TDLS协议学习笔记

    最近在学习WIfiDisplay,WifiDisplay不仅用到了WifiDirect技术,也用到了TDLS协议,所以了解一下。

    用户7557625
  • 使用MIC进行变量选择

    如果有很多自变量,我们能在很多自变量中选出几个对因变量影响最大的吗?或许MIC可以解决这个问题哦。

    钱塘小甲子

扫码关注云+社区

领取腾讯云代金券