前端笔记共65篇
前端基础
仿凡科网站右侧悬浮窗 在线客服简约图标大全快捷导航钻芒美化版
之前有发个一个凡科的右侧悬浮窗，今天给加了一些图标样式，新增css判断窗口大小自动隐藏（手机端不会显示），这下比较齐全了。 可以自己自定义图标，在css更改图片链接即可（背景图标和鼠标hov...
5年前
JS+jquery实现网页播放音乐歌词高亮自动滚动WordPress钻芒简洁美化版
效果如下: 截图： 样式根据自己需求修改 项目说明 想给关于页面加个音乐播放控件，加完看着又想加个歌词滚动，嗯..想在的效果和预想的一模一样。（一体性挺强） 文件名： js+jquery实现网页播放...
5年前
CSS适配屏幕尺寸大小自适应
改新模板的时候考虑到单独适配手机端排版美化。只需要在css内写好窗口大小相对应的样式。访问就根据窗口大小自动使用相应的样式。 PC端CSS控制自适应: 自动PC端隐藏 手机端显示CSS代码判断实现...
4年前
给WordPress或网站内添加新年挂灯笼特效
源码及教材源自知更鸟:http://zmingcx.com/hanging-lantern.html 这里说一下，作者提供了两种方法部署灯笼， 第一种是 在footer.php主题页脚文件内添加灯笼前端代码，然后在添加style.css样式表...
4年前
web开发中插入FontAwesome 图标字体库
Font Awesome是一套绝佳的图标字体库和CSS框架，它是可缩放的矢量图标，用户可以可以对图标的特性进行更改，比如大小、颜色、阴影等并且可以组合不同的图标创造自己喜欢的图标。Font Awesome的...
5年前
凡科右侧悬浮菜单定位瞄点
正好用到，还挺好看。就扒来了。 效果在: https://tool.zmki.cn/ 简单修改了一下，演示如下: 二维码图片链接在css里，自行替换即可。 代码: <!-- <link rel='stylesheet' href='https://f...
5年前
FontAwesome Icon图标和文字水平对齐以及设备自适应解决方案
在给新站美化插入font图标的时候，总是和文字对不齐。尝试常规方法后不行那只能用最笨的方法来写。 实例如下: css代码 font-size: 21px!important; /*字体强制大小*/ left:30%; /*偏离左侧30%位...
4年前JS禁止右键和F12查看
此方法目的用来防小白，稍微有点经验的站长绕过方法有很多。 代码转载自: https://www.jianshu.com/p/fcb7747ec620 判断浏览器窗户大小发生变化自动关闭网页是最骚的！ <script language='...
4年前H5 Canvas 旋转小伞+时钟
原生态的js， 利用H5 Canvas 写的旋转小伞+时钟 指针和表盘会变颜色哦！指针到达小伞位置，会跟四周的小伞颜色一致！ 效果如下： JavaScript代码： <script type='text/javascript' language...
5年前
JS实现全屏切换控制 WordPress
前段时间做的几个小项目都加入进去了全屏切换控制按钮，这个过程是怎么实现的呢，其实和暗黑控制切换一样。非常的简单。并且适用于所有网站，WordPress、typecho都不是问题，技术互通。只待你补...
4年前
HTML5 SVG+CSS3霓虹灯文字边框动画特效
@font-face { font-family:fzz; src: url('https://img.zmki.cn/ttf/fzz.ttf');} 预览效果 html <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> &...
5年前CSS图片填充的几种方式
当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。 img有个属性object-fit 属性值：object-fit: fill / contain / cover / none / sc...
4年前
HTML双列布局
源码 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title></title> <style> header{ width: 100%; height: 80px; background-color: #...
5年前
Html ul、li CSS标签详解 使用图片自定义样式 隐藏小点样式齐全
前排丢一下本文大部分内容机器生成用的代码，贴一下供参考 PHP [collaps title='点击展开 查看For循环'] <style> body{ width: 1200px; margin: 0 auto; margin-top: 100px; } p{ border:...
4年前