开始写这篇文章的时间:2020-6-4 00:54:54
先放我做的网页:http://laoyisir.com/demo.html
太晚了,简单一说。
我呢,应该算是只前端的大白吧,为了能让公众号中关注我的粉丝,快捷的获取我分享的免费节点,我就想到了一键复制功能。
首先就是寄希望于typecho博客插件的代码块复制功能的插件,但是找了半天都没找到,而且就算找到了也无法在我的博客实现,所以放弃!

然后,我就想着干脆自己写个网页吧,一开始只是想着做几个按钮就行,说干就干,按钮是好做,但是怎么实现一键复制功能呢?所以我就开始各种谷歌,谷歌到利用JSJQ来实现,但是我不是看不懂代码,就是不知道别人写的代码应该放在哪里,所以继续持续的找,知道后来找到了http://www.clipboardjs.cn/然后根据官方给的文档和谷歌别人的代码,最终在我的网页上实现了“一键复制”功能。
但是,官方文档给的按钮实在是太丑了,就想着美化一下,然后就想到了bootstrap框架,然后给我的网页套上了bootstrap框架,结果套上bootstrap框架后,竟然不兼容,“一键复制”功能失效了。然后又开始各种谷歌,虽然找到了方法,官方也给了解决办法,但是,没办法,我是小白,我没解决了,可把我愁死了。又在网上随便看看,想着如何美化一下按钮,突然看到clipboardjs官网的按钮和排版都还不错吼,于是乎我有了个大胆的想法——直接在网页右键另存为,并且下载来的包传到服务器,完美运行。
接下来就到了漫长的修改时间,首先选择按钮的版式,最终选择了不带文本框只有一个按钮的样式,于是,我在网页上按下F12,开始删除不想要的多余的东西,改标题,改文字,改各种东西。其实改这些东西废了我好久的时间,因为有些样式他是放到层叠样式表里的,我并不知道是哪个文件,只能一个文件一个文件的按ctrl+F查关键字,功夫不负有心人,慢慢的都改成了我想要的东西。
我针对他们的官网主要做了以下更改:
1、在main.css中修改了点击按钮后的反馈,将“copied”改成了“已复制快去粘贴吧!”;
2、在main.css中修改了嵌在下方文本框右上角的名称,将图标改成了文字“备注”;
3、在snippest.js里删除了嵌在下方文本框右上角多余的图标按钮,为什么说他多余呢,主要是因为我第2个问题我没有处理好,导致了鼠标悬浮上去,会出现重叠的两个按钮,作为处女座的我,实在受不了死磕到底,这个废了好长时间;
4、header占得地方太大了,改!在main.css中缩减header的padding的值;
搞完这个之后时间是2020-6-1 01:37:04;
5、标题占用的段间距太大,所以改main.css中h1的margin的值;
6、h3标题是居中,看这不舒服,改!修改main.css中h3的text-align的值,将center调为left,左对齐;
7、缩减main.css中h4的margin的值。
ok,大功告成,自此网页基本形成,就是所有的东西都在前端,没办法,不会php。就这样吧,自己麻烦点,但是方便了他人,优化了使用体验,增加了粉丝粘性。
后来我感觉做的内容有点长,想做个悬浮目录,可能是因为关键词差的不对,所以第一次没有找到相应的代码,但是了解到了“锚点”这个词语,于是搜了些代码,放在了自己的网页上,实现了目录功能,但是只能处于最上方,不能浮动,很不方便。
到了今天,我又搜了关键词“悬浮菜单”,尼玛可给我找到了。搜到了csdn上别人分享的代码,由于下载需要买,考虑到以后可能还会用到,索性就买了一年的会员,下载了代码,研究了一下,放在了自己的网页中,为了让这个悬浮菜单的css和js等文件不和clipboardjs的冲突,单独建立了个文件夹区分开。在这里我也明白了前端是如何调用文件的。
放在电脑上运行了一下,我就知道不可能那么容易就让我顺利运转,模板的css导致了我原来网页的版式全乱了,而且还出现了大片的色块。没办法,修改吧,一开始我是找不到的,就把menu、reset两个css文件中的代码,都删一部分看看运行结果,最终被我找到了地方,本来想修改,但是发现成功不了,索性就删掉,然后呢电脑上运行的很完美,但是在手机上出了问题,是什么问题呢?就是悬浮菜单,虽然悬浮了,但是却悬浮在一键复制按钮的下方,也就是说,被按钮遮住了。但是幸运的是在csdn上找到了解决办法,贴个原文给大家看看吧:div被遮挡,让一个div层浮在最上层的方法主要是因为没z-index的值:

首先将position定义为,absolute、relative或fixed。
【必须position为以上三个属性,z-index才能层级体现出来,才能起作用】
设置 style 中 z-index:auto
auto可定义为一个值(整数数字),越大代表越置前,如可定义为: z-index:9999。
若定义为-1,代表为最底层。
如果要让div1不被div2遮挡,则将div1的z-index设置比div2大就可以了。

哦,对了前面说的删其实是被我注释掉了。
太晚了,写的有点乱!

最新更新日志:
2020-6-8 10:58:45 为了做一个亮瞎眼的button,在primer.css中增加.btn1 并修改其中background-image的色值,以及增加对应btn1的悬浮鼠标之后的反馈色值,在css中搜索“色值”即可找到相应内容修改;
2020-6-14 11:01:40 修改banner条,去除的标题高度,在main.css中修改margin的值50px改为-50px,padding的值10px改为15px,将subtitle的值,作为banner头。
2020-7-9 18:25:50 修改Open Graph Protocol(简化:og)属性,目的是为了在facebook中分享,前端即可修改。
2020-7-9 19:20:06 修改每个按钮外边距margin的值,原本是无上下外边距的,现在已添加,在primer.css中搜索“外边距”即可找到修改位置。

网址:http://laoyisir.com/demo.html
完成时间:2020-6-4 01:52:09

标签: none

添加新评论