- 博客(67)
- 收藏
- 关注
RSS订阅原创 windows下sourceTree解决url无效问题
0x00 前言在正式入职后，因为工号更换了，导致soureTree打开克隆直接报了url无效，查看报错发现是因为账号密码错误，于是在网上查找解决办法，找到的都是mac的解决办法，而windows下的一个没找到，并且找到的博客基本都没用。研究了好久发现了这个解决办法，希望写出来能对有同样困惑的人一些帮助0x01适用情况在确保url地址正确并且gitlab开发者权限已经拥有，在sourceTree中输入url后没有弹出输入账号密码的框，直接报了url无效的错误。0x02解决方法打开sou..
2021-07-13 14:58:05
1596
1
原创 JS中属性为字符串数字的对象数组排序
0x00 前言 做项目时需要对数组对象进行排序，但是因为需要排序的数组对象的属性为字符串数字，例CO001Z01-01，网上找的博客文章根本没讲到点子上，后来翻阅mdn找到了解决办法，遂写出来与大家分享一下。0x01 代码 还是用的sort函数排序，但是因为js中字符串比较是使用charAt()进行一个个字符的比较，所以数字无法正常比较大小，比如2是要比12大的，所以这里比较函数中使用了localeCompare来返回值，localeCompare中的第三个参数为一个对象，其中的nu...
2021-04-20 09:50:58
1347
1
原创 jQuery学习-01
0x00 入口函数 入口函数是等dom元素加载完毕后再执行函数内的代码$(function (){ $('.box').hide();})0x01 顶级对象 $就是jquery的顶级对象，$=jquey；像0x00的例子一样，就是将.box这个对象包装成了jquey对象，所以可以调用jquey方法。 jquery对象就只能使用jquery方法，而DOM对象就只能使用原生js方法。 jquery对象转换为dom对象的方法：$('.box')...
2020-11-10 15:57:09
176
原创 王者荣耀手风琴效果实现
0x00 网页地址 http://pvp.qq.com/strategy/0x01 代码 HTML <div class="demo"> <p class="title">周免英雄(10月26号-11月1号)</p> <ul> <li class="active"> <img sr...
2020-10-30 14:44:35
943
1
原创 移动端开发插件（持续更新）
0x00 Swiper插件 中文站https://www.swiper.com.cn/ H5网页需要引入一个css与一个js文件即可引入此插件 此插件主要用于插入网页轮播图，也可用于制作各种推送，新闻网页。0x01 iscroll插件 https://github.com/cubiq/iscroll 用于定义滚动条0x02 富文本编辑器 https://ckeditor.com/ckeditor-4 用于在网页中加入富文本编辑器...
2020-10-29 14:06:11
173
原创 js查漏补缺-14
0x00 scroll scroll与client十分相似，都是返回值不带边框且不带单位，与client不同的一点就是，当元素超出盒子之后，client返回的值仍是盒子的大小，scroll返回的大小则是加上了超出盒子元素的大小。0x01 offset client scroll三大系列的对比总结 offset系列主要用于获取元素位置offsetLeft offsetTop； 另外需要注意的是以上两个方法兼容性差，只兼容ie9及以上的浏览器。offsetWidth和offse...
2020-10-29 10:03:41
81
原创 携程移动端静态页面仿写
0x00 写在最前 这次并没有完全复刻，首先是顶图用svg做遮罩层的部分没做，然后是页脚也用到了svg，这部分也没做，之后学习了svg可能会重新更新一下本博客吧 携程移动端网址m.ctrip.com0x01 HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
2020-10-14 09:02:30
1043
原创 京东移动端仿写
0x00 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <link rel="
2020-10-10 09:10:01
454
3
原创 移动端布局day01
0x00 视口 移动端有三种视口，第一种是布局视口，它将页面宽度设为980px，未做移动端的网页会自动缩放为980px，所以很多网页我们打开看到的都是缩小了的。第二中是视觉端口，也就是用户看到的视口；第三种视口是理想视口，需要通过meta视口标签来设置布局视口来使其和理想视口宽度一致。 meta视口标签0x01 二倍图 因为像素比的原因，pc网页的图片在移动端会被放大，具体放大多少倍看设备，所以在准备图片时一般会准备更大的图片，比如宽高都为两倍的图片，然后指定大小为正常...
2020-10-10 09:05:36
83
原创 3d导航栏
0x00 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="topBar"> <img src="img/baidu.png" class="logo">
2020-09-29 10:47:30
524
原创 css查漏补缺day07
0x00 tranform translate（）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="box"> </div></body><style...
2020-09-25 17:37:08
117
原创 css查漏补缺day06
0x00 h5新增语义标签 ie中需要将其转换为块元素0x01 H5新增多媒体标签 video标签 audio0x02 h5新增表单属性 input0x03 css3新增特性 属性选择器，可以根据属性选择元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
2020-09-25 09:25:57
149
原创 css实现京东的价格标签
0x00 京东效果图0x01 原理及代码 京东这个实质上是分为了三个部分，左边盒子中间盒子右边盒子 这个效果主要是通过中间盒子来实现，中间盒子的代码如下
2020-09-24 14:37:22
753
原创 css查漏补缺day05
0x00 css三角<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="box"> </div></body><style> .box {
2020-09-24 14:30:16
162
原创 图片底部的空白缝隙的消除办法
0x00 问题实例 有时候在div中设置图片时会发现图片底部存在一个空白缝隙，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="box"> <img src="tes...
2020-09-23 15:10:18
605
原创 css精灵图技术
0x00 为什么要用精灵图sprites 网页所使用的小图标很多，如果分开储存，则会多次向服务器发送请求，增大服务器的负载，降低页面的加载速度。0x01 精灵图原理 精灵图主要针对背景图片，将多个背景图片整合到一张图片中 精灵图的本质就是通过bgc-position来移动图片位置，达到显示想要的背景图片的效果 因此，使用精灵图需要精确测量各背景图片位置...
2020-09-23 11:26:23
243
原创 css查漏补缺day04
0x00 定位 相对定位不脱标，偏移量是根据本身来移动的； 绝对定位在移动位置的时候，是相对它的祖先元素来移动的。当没有祖先元素或者祖先元素无定位时，以document为祖先元素 当祖先元素有定位时，则已最近的有定位的祖先元素来进行偏移。 绝对定位脱标，不占有原有的位置 当子元素需要用绝对定位时，父元素需要用相对定位 固定定位fixed也是脱标的，可以看成特殊的绝对定位 fixed的元素一般left和margin-left配合使用，可以做...
2020-09-22 17:13:57
98
原创 css查漏补缺day03
0x00 盒子模型 边框简写没有顺序border: 1px solid red; border-collaspe属性表示绘制表格边框的格式border-collapse: collapse; // 表示相邻边框合并 padding的复合写法
2020-09-22 10:50:22
135
原创 块元素塌陷问题解决方案
0x00 嵌套块元素塌陷问题复现 首先是基础代码<body> <div class="father"> <div class="son"> </div> </div></body><style>.father { width: 400px; height: 400px; background-color: black;}.son { width: 200px...
2020-09-21 10:40:23
385
原创 css查漏补缺day02
0x00 链接伪类选择器 链接伪类选择器一定要严格按照LVHA的顺序声明。否则可能无法生效，:link; :visited; :hover; :active; 因为a有默认样式，最好项目中给a单独指定样式0x01 元素显示模式 块元素 块元素独占一行 可以设置宽度高度内外边距 宽度默认为父元素的100% 是一个盒子，里面可以放行内或块级元素 另外，文字类元素里不能使用块级元素...
2020-09-17 17:33:25
96
原创 emmet语法快速编写html与css
0x00 emmet语法快速生成HTML ·想要生成标签，直接输入标签按tab就行，要生成html标准模板，则输入！再tab就可以了
2020-09-17 14:54:04
154
原创 css查漏补缺day1
0x00 今日随笔 类选择器命名习惯 默认字体与大小 谷歌浏览器默认字体为微软雅黑，默认字体为16pxp { font-weight: bold; // font-weight设置文字粗细 font-weight: 700; // 可以直接设置数字，表示粗细，400为normal font: font-style font-weight font-size/line-height font-family // font的复合属性，顺序不能更改，f...
2020-09-17 14:52:05
92
原创 一天复习完HTML
0x00 DOCTYPE和lang以及charset DOCTYPE的作用就是告诉浏览器使用的是哪个版本的HTML<!DOCTYPE html> // 表示使用的版本是html5 lang用来定义文档中显示所用的语言<html lang='en'></html> // 表示页面是英文页面<html lang='zh-CN'></html> // 表示页面是中文页面 charset定义编码方式<...
2020-09-15 14:08:01
74
原创 fish模块化
0x00 模块化开发 首先需要引入模块化js用来处理模块化的加载开发 <script type="text/javascript" src="frm/fish-desktop/js/fish-desktop-require.js" data-main="main.js?v=1.0.0"></script>然后需要进行主视图IndexView.js的渲染，之后就可以定义模块了define(['./person'], function (person) {...
2020-09-09 14:34:18
501
原创 fish控件语法
0x00 控件初始化$('#app').combobox({ value: 1, dataSource: [ {name: 'Apple', value: 0}, {name: 'Banana', value: 1} ]});dataTextField: 'label',// 这个属性是选择下拉菜单中显示的数据dataValueField: 'value',// 决定使用的value// 通过原型链修改属性默认参数$.ui.comb
2020-09-08 15:15:19
294
原创 fish表格
0x00 demo$("#grid01").grid({ data: [ {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} , {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, {id:"3",invdate:"200
2020-09-08 14:17:09
256
原创 fish数据模型和数据集合
0x00数据模型的方法var PeopleModel = fish.Model.extend({ defaults: { name: 'unknown', birthday: '', gender: 'unknown' }});var people = new PeopleModel();console.log(people.get('name'));// get方法获取属性值people.set({ name: 'j
2020-09-07 15:29:14
885
原创 fish视觉组件
0x00 视觉组件中的setViewvar parentView = new ParentView().render();// 1)setViews// 父视图的body节点插入ChildView1和ChildView2两个子视图parentView.setViews({'.body': [new ChildView1(), new ChildView2()]});// 父视图的body节点渲染ChildView1和ChildView2两个子视图parentView.render...
2020-09-04 17:34:03
762
原创 Js查漏补缺-13
0x00 元素偏移量offset系列 利用offset相关属性可以得到元素的偏移量和大小 <div class="father"> <div class="son"> </div> </div> <script> let father = document.querySelector('.father'); let son = document.querySelector('.son');...
2020-07-21 11:01:45
110
原创 Js中的立即执行函数
0x00 传统的两种写法 当需要函数立即执行时就可以使用立即执行函数let box = document.querySelector('.box'); (function (a) { console.log('第一种写法'); console.log(a); })(1); //这个括号可以看成函数的调用 //这种方法支持箭头函数 ((a) => { console.log('第一种写法使用箭头函数'); con.
2020-07-21 10:41:15
198
原创 关于Js中的this指针指向的对象
0x00 前言 this指针的指向问题一直是个大坑，今天无意间刷到了一篇文章，觉得说的挺好，记录一下方便复习 链接：https://www.cnblogs.com/pssp/p/5216085.html0x01 正文 时刻记住，this指向调用它的对象 function a(){ let user = "追梦子"; console.log(this.user); //返回undefined console.log(this);...
2020-06-25 09:15:21
366
原创 Js查漏补缺-12
0x00 window对象(续) 清除定时器-clearInterval() <button class="btn-start">开始定时器</button> <button class="btn-stop">停止定时器</button> <script> let start = document.querySelector('.btn-start'); let stop = document.query...
2020-06-23 21:47:25
112
原创 css动画实现炫酷的hover效果
0x00 前言 今日在b站上看到一个hover动画效果，感觉写的非常好，所以复刻了一个0x01 HTML+JS<!doctype html><html class="no-js" lang=""><head> <meta charset="utf-8"> <title>Log-in</title> <meta name="description" content=""> <me...
2020-06-14 20:04:09
1457
原创 html+css实现视差滚动
0x00 HTML代码 <div class="main"> <section class="list-item"> <div class="item-image">
2020-06-12 18:30:23
1243
原创 京东秒杀倒计时仿写
0x00 京东秒杀倒计时 <div class="secKill"> <div class="secKill-title">京东秒杀</div> <div class="secKill-time"> <div class="secKill-time-title">16:00点场倒计时</div> <div class="secKill-time-secKill">...
2020-06-11 19:46:54
621
原创 Js查漏补缺-10
0x00 事件委托 当需要给多个元素设置监听器时，不给子元素设置监听器，而是给父元素设置监听器，利用冒泡事件来设置子元素的事件，这样可以减少dom的操作次数，提高程序性能。 <div class="father"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li&g...
2020-06-07 19:59:19
178
原创 关于前端的meta标签
0x00 前言 说实话这个标签我一直没怎么注意，最近重学前端时才发现了关于这个标签的重要性，今天就来总结一下meta标签的作用吧。0x01 meta标签简介 meta标签表示不能由其他HTML相关元素（<script> <base> <link> <style> <title>）表示的元数据信息 若定义了name属性，则表示该meta标签提供的是文档级别的元数据，应用于整个页面； 若定义了http-equ...
2020-06-06 20:32:07
284
原创 Js如何获取display为none的元素的宽高
0x00 原理 在css中visibility:hidden为不可见属性，但使用visibility:hidden隐藏的元素有物理尺寸，因此这里的原理就是将display：none的元素转换为isibility:hidden的元素，并计算宽高后改回来；0x01 弊端 此方法有一个弊端，就是可能会导致闪烁的现象（当计算时间较长时）;如果实际过程中仅仅只是计算长宽，那么往往可以忽略掉这个时间，也就是等于没有闪烁；并且将元素设为绝对定位脱离文档流，这样便不会影响其他元素，加上极短的闪烁时间...
2020-06-03 18:43:33
2485
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人