前端笔记共65篇
前端基础
div滚动到指定位置固定
首先将需要顶部固定的区域使用<div id='nav_fuanfu'>包裹起来，然后在网页的特别底部放上以下的JS代码，用于控制这个区域顶部滚动固定。 <script type='text/javascript' > functio...
2年前
仿凡科网站右侧悬浮窗 在线客服简约图标大全快捷导航钻芒美化版
之前有发个一个凡科的右侧悬浮窗，今天给加了一些图标样式，新增css判断窗口大小自动隐藏（手机端不会显示），这下比较齐全了。 可以自己自定义图标，在css更改图片链接即可（背景图标和鼠标hov...
5年前
JS+jquery实现网页播放音乐歌词高亮自动滚动WordPress钻芒简洁美化版
效果如下: 截图： 样式根据自己需求修改 项目说明 想给关于页面加个音乐播放控件，加完看着又想加个歌词滚动，嗯..想在的效果和预想的一模一样。（一体性挺强） 文件名： js+jquery实现网页播放...
5年前
DIV+JS+CSS实现点击弹出图片效果
前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。 # ZMKI VLOG: VLOG.ZMKI.CN 效果如下: #代码 CSS代码 <style type='text/css'> .black_overlay { di...
5年前
给WordPress或网站内添加新年挂灯笼特效
源码及教材源自知更鸟:http://zmingcx.com/hanging-lantern.html 这里说一下，作者提供了两种方法部署灯笼， 第一种是 在footer.php主题页脚文件内添加灯笼前端代码，然后在添加style.css样式表...
4年前H5 Canvas 旋转小伞+时钟
原生态的js， 利用H5 Canvas 写的旋转小伞+时钟 指针和表盘会变颜色哦！指针到达小伞位置，会跟四周的小伞颜色一致！ 效果如下： JavaScript代码： <script type='text/javascript' language...
5年前
FontAwesome Icon图标和文字水平对齐以及设备自适应解决方案
在给新站美化插入font图标的时候，总是和文字对不齐。尝试常规方法后不行那只能用最笨的方法来写。 实例如下: css代码 font-size: 21px!important; /*字体强制大小*/ left:30%; /*偏离左侧30%位...
4年前
CSS限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行
为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。 效果如下: 未限制显示长度，如果超出了会溢出到第二行里。严重影响用户体验和...
5年前进入就弹出网站公告提示框的JS弹窗代码
<script language='javascript'>alert('博客主体转企业备案，未来一段时间首页将不能正常访问。售后服务联系博主Q20838641 ，敬请谅解')</script>
5年前
web开发中插入FontAwesome 图标字体库
Font Awesome是一套绝佳的图标字体库和CSS框架，它是可缩放的矢量图标，用户可以可以对图标的特性进行更改，比如大小、颜色、阴影等并且可以组合不同的图标创造自己喜欢的图标。Font Awesome的...
5年前
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适配屏幕尺寸大小自适应
改新模板的时候考虑到单独适配手机端排版美化。只需要在css内写好窗口大小相对应的样式。访问就根据窗口大小自动使用相应的样式。 PC端CSS控制自适应: 自动PC端隐藏 手机端显示CSS代码判断实现...
4年前
自动PC端显示 手机端隐藏CSS代码判断实现自适应
实现场景描述： 有些内容部署在PC端但是有不适合在手机端显示（比如盒子过大，遮挡内容）或者手机端显示毫无意义等。我们可以使用下面的代码来实现：电脑端显示，手机端隐藏 实现方法： CSS控制...
5年前
CSS修改浏览器内的页面滚动条样式
有时候网站逼格够了之后却发现默认的滚动条很影响和整体美观 如下图: 暗黑模式下全屏展示右侧的滚动条显得很突兀。 修改后 由于要考虑到白天模式，所有个滚动条也要合适白天使用，所以这里钻芒...
4年前
右侧悬浮菜单悬浮窗 CSS+html CSS自动判断PC显示手机端隐藏
源自:http://miwua.com/1521.html 感觉还不错，只是部署到博客不太搭配（颜色太鲜艳了），用css加了个设备判断，电脑端显示、手机端隐藏。1221px 界点 预览: css <!--右侧悬浮菜单 開始--...
5年前
CSS背景阴影部分效果【样式效果】
持续更新 文字效果阴影 text-shadow: 5px 5px 5px #0000CC;/*右偏移 下偏移 阴影背景模糊*/ 块阴影 box-shadow:2px 5px 12px #3B2E32;/*设置块阴影 水平位移 垂直位移 模糊半径 *...
5年前