小白也能轻松为网页加各种部件
原创
小白也能轻松为网页加各种部件
原创
小轻相信，许多人对网页是很感兴趣并且是很想学习的。当初创立小轻网及小轻论坛网页就是为了帮助大家学习一些技术经验，同时也学会如何去找资源。今天，我们给原有网页加一些部件，达到装饰和增加功能的作用。
以超级治愈的时钟小人和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客服”即可获取代码。
现在将“css”、“images”和“js”文件夹上传到服务器，现在需要做的就是提取index.html中的有用信息了，什么是有用信息？
head中的<link>和<script>标签，这块直接复制到原来的主页的head中，这样就可以引用到“css”、“images”和“js”文件夹里的内容。
接着，将中间的div标签直接复制到<body>标签结束前，和上面的代码放置方法相同。
修改里面的客服QQ及名称即可。如图，框选出的内容均是可修改的。
以下是效果展示：
是不是很棒呢？以此为例，相信没有网页基础的你，也可以轻松为大部分网站加许多的部件。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
![前端小白也能快速学会的博客园博客美化全攻略[附源码]](https://ask.qcloudimg.com/http-save/yehe-4599976/x1ykfaris9.png)
腾讯云开发者
