- 博客(46)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 工作随笔记
2、通过改变样式名而改变样式3、点击li标签改变子元素样式 JQ4、子元素选择器的区别二、判断是否含有class，无则加，有则去除三、图片自适应盒子宽度显示img{ width:100%; height:auto}头部信息中加入切记！！！！否则页面只适配与电脑屏幕尺寸。不适应手机端显示与隐藏模块css为：display：none;七、css文字居中，两边长线八、点击高亮显示，再点击取消先将其背景图片设置为灰色，即未点亮状态（判断背景色是否为亮色）九、css改变光标样式
2021-06-04 17:57:48
4506
原创 对应楼层跳转及高亮显示
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片显示</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> .menu-active{ .
2022-03-30 09:59:47
261
转载 css/js瀑布流效果
纯 css 写瀑布流1.multi-columns 方式：通过 Multi-columns 相关的属性column-count、column-gap配合break-inside来实现瀑布流布局。设置这样的 html 结构： <div class="masonry"> <div class="item"> <div class="item_content conte...
2022-02-24 17:37:55
2540
原创 Jq楼层跳跃+滚动高亮显示对应的楼层
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼层跳跃</title> <style> * { padding: 0; margin: 0; } ul, li { list-style: none; } div { width: 100%; heig...
2022-01-07 15:15:30
354
2
转载 iconfont字体图标的使用方法--超简单!
iconfont字体图标的使用方法--超简单!我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;step 2:找到图标管
2021-10-15 10:47:20
574
转载 JQ点击按钮复制文本内容
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" conte.
2021-10-13 17:00:28
1228
2
原创 手机端图片放大
<div class="mg"> <img src="images/map-mg.png" ></div>.mg{ width: 300px; height: 300px;} .mg img{ width: 100%;}<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="zoom.j.
2021-09-15 17:39:32
292
原创 html地图定位
<!DOCTYPE "><html ><head><meta charset="utf-8"/><title>网页地图形式展示公司地址</title></head><body><div id="container" style="width:1000px;height:600px;margin:auto;border:1px solid #ddd;overflow:hidden;">.
2021-09-11 14:39:19
812
1
原创 JQ选项卡切换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>选项卡</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js "></script> </head> <style> .tab-menu ul { list-sty.
2021-09-08 16:28:21
622
转载 行内块元素高度撑满父元素
最近遇到了一个css问题；问题如下父元素不设置高度，子元素全为（display:inline-block），左侧内容撑开高,想要右侧子元素高度为100%（即与左侧子元素高一致），使用height:100%,并不好使，始终是内容撑开的高，而非父级高，<li v-for="list in lists”> //父元素<div>{{list.name}}</div> //左侧子元素<div><p v-for="item in list.ch..
2021-08-13 17:23:00
1381
转载 纯CSS文字颜色渐变
在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯css实现渐变文字了。下面就介绍3中实现方式供大家参考！基础样式： 1 .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种
2021-08-07 16:12:04
161
原创 JQ点击出现弹框，背景加蒙版（仿关注微信公众号，样式自己可改）
<p class="mua"> 点击关注 </p> <div class="marsk-container"> <div class="tkyy_con"> <div> 发送给朋友 </div> <div> 收藏 </div> <div> 保存图片 </div> <div> 搜一搜 </div> <.
2021-07-08 13:33:50
440
原创 Bookstrap轮播-爱了爱了
<!DOCTYPE html><html><head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.o
2021-06-21 10:26:16
208
原创 JQ获取屏幕宽度，以及分辨率发生改变时既触发函数
获取屏幕宽度var winWide = $(window).width(); console.log(winWide);分辨率改变时既触发函数$(window).resize(function(){})小案例<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script> $(function(){
2021-06-17 19:14:16
1026
2
转载 不同分辨率下执行不同的JS(JQ)代码
方法一$(function(){ //判断屏幕宽度 var winWide = window.screen.width; //获取当前屏幕分辨率 alert("winWide")； var wideScreen = false; if(winWide <= 1024){ //1024及以下分辨率 //这里写要加载的代码 } else{ //大于1024的分辨率 //这里写要加载的代码 }}) 方法二 <script type="text/javascript
2021-06-17 18:08:46
952
转载 JQ购物车多个商品数量加减
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Co.
2021-06-17 11:13:22
664
原创 JQ下拉二级菜单（手风琴式）右侧+与-像替换
点击出现对应的下拉菜单，切右侧+、-号相互变换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.jb51.net jQuery手风琴效果</title> <style> .wawa{ width: 200px;height: auto;margin:50px auto;border-radius: 5px
2021-06-04 18:06:36
407
原创 vs code部署vue项目所踩的坑
一、部署运行vue的项目必配环境node.js之前写过https://blog.csdn.net/weixin_46019220/article/details/115482195二、将项目在VS code中打开后运行VS code下载，版本自己选VS下载后为英文状态，在左边的菜单按钮中点击最后一个按钮后在右边的搜索框输入chinese，点击install后，系统会自己下载安装。完成后即为中文版本了（切换中文版VS）小技巧：html文件右键可直接运行：以上同处搜索open后选择红色框框所选中的
2021-04-21 21:12:55
179
转载 01-HTML（web复习笔记）
先放一张图吧！！常用的浏览器一、网页1、网页的概念**网站**是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页合集。**网页**是网站中的一“页”，通常是HTML格式的文件，它是通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页是以.html或.htm后缀，因此将其俗称为HTML文件。2、什么是HTMLHTML是指超文本标记语言，它是用来描述网页的一种语言。它是标记语言，不是编程语言。所谓标记语言
2021-04-08 15:48:41
328
原创 nodeJS下载安装以及环境配置
下载nodeJS下载地址：由于nodeJS是开源供大家使用的，所以直接去官网下载就可以了。下载不包含任何广告，这点超赞的官网地址：https://nodejs.org/zh-cn/在官网选择自己所需要的的版本下载下来就是可以的啦！！首页会推送最新版本，如果需要下载其他版本，就要去其他下载→以前版本 / 所有版本里面寻找了（PS：如果有像我一样看到英文就头疼的，可以右键→翻译成中文简体的哦！！我用的是谷歌作为默认浏览器，其他的不知道有没有这个功能！！！）安装nodeJS的安装也是傻瓜式的（越来
2021-04-07 14:18:23
425
原创 dome01HTML表单的使用
table表单制作个人简历信息表单要点：1、消除单元格之间的缝隙2、纵 、横向合并单元格效果图：源码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>个人简历模板（即单元格合并使用）</title> <style type="text/css"> *{ margin: 50px auto; text
2021-02-26 11:34:30
129
原创 HTML下拉框二级菜单
一、form表单 <div> <form> <div> <!-- 下拉框 --> <select> //默认项为第一个 <option>广州</option> <option>深圳</opt
2021-02-26 10:20:47
7132
原创 鼠标点击button添加div，点击对于button删除最后的一个元素。以此类推
dome要点：1、父级元素宽高固定，内容超出则显示滚动条；2、点击添加时，新增加div；3、图片上传（单张图）功能；4、文本框使用textarea标签，并去除一些默认样式<!DOCTYPE><html><head> <title>108</title> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/2.2.
2021-01-08 16:58:42
467
4
原创 微信开发者工具预览二维码无法显示
在微信开发者工具中，模拟器中可以正常显示，但是点击预览时，二维码出不来，并有提示框（如下图）。如上图的2框显示，提示的是英文，我才疏学浅，看不懂（要加强英语的学习呀！！这样可以避免好多麻烦）。然后去问了一下度娘。大概意思就是项目主包超过2M了，无法预览。这个时候就可以通过右上角的详情看一下当前项目的信息了（我的如下图，这里的单位是KB）。这就是原因啦！！然后我把我在网上看到的其他的原因也汇总一下吧！！！方便以后学习和使用啦！！一、类似于以下这种就不用多说了呀，自己去官网下载安装最新版本吧二
2021-01-06 16:11:43
3688
1
原创 腾讯云的服务器解析域名步骤
一、登陆腾讯云二、点击头像进入后台三、鼠标移入云产品，选择DNS解析四、点击解析五、按图完成然后保存六、后如果需要添加网址返回第四步，选择添加即可七、绿色的正常解析就是添加成功啦...
2020-12-18 16:49:22
5380
1
原创 小程序·报错app.json文件中的enablePullDownRefresh需为Boolean
Boolean 变量的值显示为 True 或 False且只能是 True 或是 False。加了“”的true或者false是属于文本类型，所以系统会报错。改正把双引号去掉就好啦！！
2020-12-18 10:24:49
1471
2
原创 小程序开发、微信开发者工具中的快捷键
Shift+Alt+Up/Down：向上/向下复制一行Alt+Up/Down：上/下移动一行Shift+Alt+F：代码格式化(排列整齐)Ctrl+End：移动到文件结尾Ctrl+Home：移动到文件开头Ctrl+i：选中当前行Shift+End：选择从光标到行尾Shift+Home：选择从行首到光标处Ctrl+Shift+L：选中所有匹配Ctrl+D：选中匹配Ctrl+U：光标回退...
2020-12-04 11:07:03
164
1
原创 HBuilder运行到微信开发者工具步骤以及多种报错
HBuilder运行到微信开发者工具步骤以及多种报错**提示：**本人建议如果开发类为小程序，最好使用原生的开发者工具开发。因为现在微信小程序虽然支持有外部运行转入，但是会出现各种坑。而且你最终的发布还是要转回来的（笑哭）。一、使用HB开发小程序1、在Hbuilder里面新建一个项目，如下图所示2、然后选择uni-app类型，如下图所示3、接着项目就创建好了，如下图所示4、打开小程序开发工具，点击设置下面的安全设置，如下图所示5、然后在安全下面开启端口号，如下图所示然后就可以在微信
2020-12-03 16:54:04
5541
原创 微信小程序 常见问题（报错）
微信小程序 常见问题：一：项目结构微信小程序项目结构主要有四个文件类型,如下WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，js 逻辑处理，网络请求json 小程序设置，如页面注册，页面标题及tabBar。注意：为了方便开发者减少配置项，规定描述页面的这四个文件必须具有相同的路径与
2020-11-21 14:16:41
8242
原创 在小程序开发工具中报错提示 https://api.leancloud.cn 不在以下 request 合法域名列表中
在小程序开发工具中提示 https://api.leancloud.cn 不在以下 request 合法域名列表中因为工作的原因，所以最近开始研究小程序的开发。在开发过程中，遇见了“https://api.leancloud.cn 不在以下 request 合法域名列表中”的问题。虽然其后面给了一个参考文档的网址（即为微信开发文档），但是并没有解决我的问题（也可能是本人比较愚钝，也没有耐心去细看）。于是去各个网站查阅学习了一下。如上图，在开发者工具中找到详情设置，然后勾选“不校验合法域名、web
2020-11-20 14:01:17
594
2
原创 微金所案例（轮播+自适应布局）
微金所案例下载地址：[https://pan.baidu.com/s/1XvqZFyY8SByzAyZpXGHGmg]提取码：hn3g
2020-11-09 11:39:20
317
原创 css中的padding和margin
CSS中padding(内边距)与margin(外边距)的区别、取值、值为百分比的好处Margin和Padding是我们在网页设计经常使用到的CSS样式，他们分别是间距和填充，一个作用于盒子外面，一个作用于盒子里面，默认的情况下，这些属性的值都会被计算在盒子的面积里面取值:单位：默认以及最常用的就是以像素（px）为单位顺序当取四个值时的顺序为:上右下左（即为顺时针方向）eg：margin：10px20px 35px50px（上边距为10px、右边距为20px、下边距为35px、左边距为50px
2020-11-09 11:25:45
859
原创 webstorm设置Ctrl+滚轮缩放字体大小
webstorm设置Ctrl+滚轮缩放字体大小1、打开webstorm软件，点击左上角的file2、点击Setting（设置）3、点击Editor4、点击General5、勾选右侧的Change font size (Zoom) with Ctrl+Mouse Wheel6、点击OK，回到编辑页面试一下是不是可以了...
2020-11-09 09:40:19
650
原创 JS实现贪吃蛇游戏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #map { width: 800px; h...
2020-01-14 23:44:56
90
原创 阻止a标签的默认跳转事件
代码里面看注释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><a href="images/1.gif" id="link"&...
2020-01-05 20:47:45
423
原创 菜单全选案例
菜单全选案例1、点击全按钮，则列表全部选中2、有一个子列表取消选择，则全选框也取消3、子列表全部选中，全选框也自动选中<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style&...
2020-01-01 20:29:03
201
原创 仿百度搜索关键字弹出符合条件的内容
仿百度搜索关键字弹出符合条件的内容在百度等网站搜索时，输入一个字，系统会弹出包含该关键字的一些搜索词。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><b...
2019-12-30 23:34:43
303
原创 JS not defined报错
JS not defined报错控制台显示错误信息：点进错误信息后：原因：$my未定义解决：用函数封装方法获取节点PS：1、形参不能带引号2、一个 = 是赋值；两/三个 = 是比较。...
2019-12-26 22:54:19
344
原创 JS undefined报错
JS undefined报错查看：onclick的调用者未找到原因：调用该方法的变量的值为null，即节点未找到解决：在引用此变量的前文对此变量进行定义并赋值，不可以在后面定义并赋值，js是从上往下读的，在后面定义仍然读不到，依然是undefined...
2019-12-25 20:11:42
980
原创 使用原生JS实现倒计时功能（JS部分）
倒计时function getInterval(start, end) { var day, hour, minute, second, interval; //用后面的时间减去前面的时间 interval = end - start; //毫秒转秒 interval /= 1000; //转天数 day = Math.round(interval / 60 /60 ...
2019-12-24 22:31:36
333
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人