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

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

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

以超级治愈的时钟小人和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客服悬浮框。

代码已经准备好,只需要大家去利用。

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

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

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

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

以下是效果展示:

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

本文分享自微信公众号 - 小轻论坛(lightweb),作者:可乐

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 掌握了这些win10操作技巧,你的操作便入无人之境

    介绍Win10 的一些使用小技巧,自2015年7月29日Win10 正式发布已经过了有2年了,期间也进行了好几个版本的迭代更新。

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

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

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

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

    半夜喝可乐
  • 浅谈Await

       我们都知道Await关键字是.Net FrameWork4.5引入的特性。await使得我们使用异步更加时特别便捷,并且还不会导致线程堵塞。我们在使用时也...

    莫问今朝
  • Javascript解析机制 执行机制

    HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助! jav...

    HTML5学堂
  • 总结工作这几年,每年目标是什么

    传统企业分公司IT系统部门 工作第一年作为一个新人菜鸟,也没什么大的目标和方向,就进入了一个传统行业的IT部门做技术支持,每天就是收集公司不同业务部门的业务/功...

    春哥大魔王
  • 实验研究工作流程详解:如何把你的机器学习想法变成现实

    选自dustintran 作者:DUSTIN TRAN 机器之心编译 参与:李泽南、Smith 从研究思想的提出到实验的具体实现是工程中的基础环节。但是这一...

    机器之心
  • javaScript的基本语法大全

    JavaScript 程序的执行单位为行(line),也就是一行一行地执行。一般情况下,每一行就是一个语句。语句(statement)是为了完成某...

    Java深度编程
  • 不光技术屌还要会营销,清华姚班麻省理工博士99 行代码实现《冰雪奇缘》

    昨天晚上下班,刷知乎热榜的时候看到一个提问《如何看待清华姚班毕业生、麻省理工博士胡渊鸣开发新特效编程语言,99 行代码实现《冰雪奇缘》?》,作为从业IT技术的我...

    飞雪无情
  • 程序员抄袭代码现象普遍, 却能拿到年薪30万, 你怎么看?

    你们知道程序员最熟悉,最熟练,最常用的两个快捷键是哪两个吗?没错,估计你现在心中所想的就是:和,俗名为:复制和粘贴。

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券