![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web
文章平均质量分 61
才不是小弱鸡
一起学习~
展开
-
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 · 179 阅读 · 0 评论 -
王者荣耀手风琴效果实现
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 · 958 阅读 · 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 · 176 阅读 · 0 评论 -
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 · 84 阅读 · 0 评论 -
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 · 112 阅读 · 0 评论 -
携程移动端静态页面仿写
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 · 1074 阅读 · 0 评论 -
移动端布局day02
0x00 flex布局 flex布局为弹性布局,可以为任意盒子指定原创 2020-10-13 14:17:09 · 84 阅读 · 0 评论 -
京东移动端仿写
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 · 460 阅读 · 3 评论 -
移动端布局day01
0x00 视口 移动端有三种视口,第一种是布局视口,它将页面宽度设为980px,未做移动端的网页会自动缩放为980px,所以很多网页我们打开看到的都是缩小了的。第二中是视觉端口,也就是用户看到的视口;第三种视口是理想视口,需要通过meta视口标签来设置布局视口来使其和理想视口宽度一致。 meta视口标签0x01 二倍图 因为像素比的原因,pc网页的图片在移动端会被放大,具体放大多少倍看设备,所以在准备图片时一般会准备更大的图片,比如宽高都为两倍的图片,然后指定大小为正常...原创 2020-10-10 09:05:36 · 86 阅读 · 0 评论 -
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 · 526 阅读 · 0 评论 -
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 · 121 阅读 · 0 评论 -
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 · 159 阅读 · 0 评论 -
css实现京东的价格标签
0x00 京东效果图0x01 原理及代码 京东这个实质上是分为了三个部分,左边盒子中间盒子右边盒子 这个效果主要是通过中间盒子来实现,中间盒子的代码如下原创 2020-09-24 14:37:22 · 772 阅读 · 0 评论 -
图片底部的空白缝隙的消除办法
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 · 614 阅读 · 0 评论 -
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 · 165 阅读 · 0 评论 -
css精灵图技术
0x00 为什么要用精灵图sprites 网页所使用的小图标很多,如果分开储存,则会多次向服务器发送请求,增大服务器的负载,降低页面的加载速度。0x01 精灵图原理 精灵图主要针对背景图片,将多个背景图片整合到一张图片中 精灵图的本质就是通过bgc-position来移动图片位置,达到显示想要的背景图片的效果 因此,使用精灵图需要精确测量各背景图片位置...原创 2020-09-23 11:26:23 · 246 阅读 · 0 评论 -
css查漏补缺day04
0x00 定位 相对定位不脱标,偏移量是根据本身来移动的; 绝对定位在移动位置的时候,是相对它的祖先元素来移动的。当没有祖先元素或者祖先元素无定位时,以document为祖先元素 当祖先元素有定位时,则已最近的有定位的祖先元素来进行偏移。 绝对定位脱标,不占有原有的位置 当子元素需要用绝对定位时,父元素需要用相对定位 固定定位fixed也是脱标的,可以看成特殊的绝对定位 fixed的元素一般left和margin-left配合使用,可以做...原创 2020-09-22 17:13:57 · 101 阅读 · 0 评论 -
css查漏补缺day03
0x00 盒子模型 边框简写没有顺序border: 1px solid red; border-collaspe属性表示绘制表格边框的格式border-collapse: collapse; // 表示相邻边框合并 padding的复合写法原创 2020-09-22 10:50:22 · 136 阅读 · 0 评论 -
块元素塌陷问题解决方案
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 · 401 阅读 · 0 评论 -
css查漏补缺day02
0x00 链接伪类选择器 链接伪类选择器一定要严格按照LVHA的顺序声明。否则可能无法生效,:link; :visited; :hover; :active; 因为a有默认样式,最好项目中给a单独指定样式0x01 元素显示模式 块元素 块元素独占一行 可以设置宽度高度内外边距 宽度默认为父元素的100% 是一个盒子,里面可以放行内或块级元素 另外,文字类元素里不能使用块级元素...原创 2020-09-17 17:33:25 · 100 阅读 · 0 评论 -
emmet语法快速编写html与css
0x00 emmet语法快速生成HTML ·想要生成标签,直接输入标签按tab就行,要生成html标准模板,则输入!再tab就可以了原创 2020-09-17 14:54:04 · 159 阅读 · 0 评论 -
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 · 93 阅读 · 0 评论 -
一天复习完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 · 76 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 1469 阅读 · 0 评论 -
html+css实现视差滚动
0x00 HTML代码 <div class="main"> <section class="list-item"> <div class="item-image">原创 2020-06-12 18:30:23 · 1252 阅读 · 0 评论 -
京东秒杀倒计时仿写
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 · 630 阅读 · 0 评论 -
Js查漏补缺-11
0x00 键盘事件 常用的键盘事件有三个分别为onkeyup onkeydown onkeypress*原创 2020-06-09 20:27:44 · 136 阅读 · 0 评论 -
关于前端的meta标签
0x00 前言 说实话这个标签我一直没怎么注意,最近重学前端时才发现了关于这个标签的重要性,今天就来总结一下meta标签的作用吧。0x01 meta标签简介 meta标签表示不能由其他HTML相关元素(<script> <base> <link> <style> <title>)表示的元数据信息 若定义了name属性,则表示该meta标签提供的是文档级别的元数据,应用于整个页面; 若定义了http-equ...原创 2020-06-06 20:32:07 · 288 阅读 · 0 评论 -
关于img标签的处理
0x00 写在最前 目前网页并没有一个完美的img解决方案,若需要完美按照要求显示图片可以使用ps或者裁剪图片来实现;0x01 图片自适应 将父元素div加入以下代码 display:flex; align-items:center; justify-content:center; img水平填充width:100%height:auto; img垂直填充width:auto;height:100%;0x02 css裁剪...原创 2020-05-27 20:41:22 · 545 阅读 · 0 评论 -
Js查漏补缺-05
0x00 精灵轮播图-淘宝 使用js更改li的backgroundPosition属性,达到分割一张图,并作为不同块的background的目的; <script> let lis = document.querySelectorAll('li'); for (let i = 0; i <12; i++){ lis[i].style.backgroundPosition = '0 -' + 44 * i + 'px'; ...原创 2020-05-26 21:35:46 · 138 阅读 · 1 评论 -
如何将input和button放在同一行
0x00 如何去除input与button中的空白 在写搜索框时经常会遇到input与button一起用时会出现一个空白的情况 这样影响布局,而删去这个的方法有两种,一种是将两个标签写在同一行; 第二种是在两个标签中写上注释 <div> <input type="text" value="奥利奥饼干"/><!-- --><button> <i class="iconfont">...原创 2020-05-26 21:09:19 · 12829 阅读 · 0 评论 -
CTF-实验吧忘记密码了
题目地址:http://www.shiyanbar.com/ctf/1808先看源码,发现并没有什么卵用QAQ,那就随便写个东西提交一下吧。发现弹出了这个框显然有个step2.php的网址,那我们输入url查看一下这个网址,发现马上跳回了step1.php既然这样,那就看一下step2.php的源码,在url前面加上view-source:就可以看到源码啦~然后我们发现了一些有趣的东西管理员邮箱,...原创 2018-05-10 08:48:52 · 1938 阅读 · 0 评论 -
CTF-实验吧Once More
题目地址:http://www.shiyanbar.com/ctf/1805这是题目的提示,根据社会工程学的方法找到了ereg的漏洞(其实就是百度。。。)漏洞是ereg函数存在截断漏洞。这里表示输入的password必须是大小写字母和数字这句表示password长度要小于8且大小要大于9999999,这不是自我矛盾嘛嘤嘤嘤。其实这里可以用科学记数法传参,password=1e9就行啦~这句表示pa...原创 2018-05-10 09:11:21 · 1170 阅读 · 0 评论 -
CTF-实验吧因缺思汀的绕过
web题嘛,第一步肯定是看源码。f12后发现这样一些奇怪的东东接下来肯定是打开这个文件嘛打开后就看到了php源码啦(是不是很开心!)分析一下源码可以看到这里过滤了一些sql语句(嗯,这些东西接下来不能用了)这里的意思大概是选择操作的数据库为db(数据库看不到QAQ)然后将咱们输入的uname在数据库查询uname和key,再将key和咱们输入的pwd比对,相等就打印flag。然后就要用一个注入的小...原创 2018-05-07 14:49:25 · 477 阅读 · 0 评论 -
CTF-实验吧简单的sql注入
好吧,其实这题我也是看了wp才知道的写wp的老哥个个都是人才,脑洞很大,知识丰富,还会嘤嘤嘤,我超喜欢的。咳咳咳,跑题了,这题一看就是sql注入嘛(别问我为什么知道,自己看题目名)先进行过滤测试。先试试1 and 1=1,发现返回显然and被过滤了然后继续测试,结果发现sql语句基本上都被过滤了QAQ看wp发现这里其实是过滤后面带有空格的关键字了解这个就可以开始愉快的注入了先查一下数据库 1'/*...原创 2018-05-07 15:20:52 · 1654 阅读 · 2 评论 -
CTF-实验吧后台登陆
题目:http://ctf5.shiyanbar.com/web/houtai/ffifdyop.php一言不合看源码果然有猫腻,PHP代码的意思大概是用输入经过md5加密后的密码和admin用户名查询,结果等于sql,然后看数据库中是否存在sql。注意这句这里显然是个sql注入点,注入方式参考:https://blog.csdn.net/qq_31481187/article/details/5...原创 2018-05-07 19:59:50 · 5889 阅读 · 0 评论 -
关于反序列化漏洞的一些理解
php类可能会包含一些特殊的函数叫magic函数,magic函数命名是以符号__开头的,比如 __construct, __destruct, __toString, __sleep, __wakeup等等。这些函数在某些情况下会自动调用,比如__construct当一个对象创建时被调用,__destruct当一个对象销毁时被调用,__toString当一个对象被当作一个字符串使用。为了更好的...原创 2018-09-16 16:18:18 · 9466 阅读 · 0 评论 -
js中appendChild的用法
0X00写在最前 之前学习js时看到的appChild方法都是用于列表,也就是添加li标签之类,类似这样今天在mdn上看到了新的用法,令人耳目一新,记录一下与大家共同分享0x01项目地址https://roy-tian.github.io/mdn-examples/javascript/gallery/0x02 appendChild方法分析var thumbBar ...原创 2019-01-19 15:36:51 · 14324 阅读 · 0 评论 -
关于float引起的定位问题
0x00 遇到的问题 前几天,在编写自己的网站时遇到了一个定位问题,问题如下本站热门的容器,定位本应该在本站热门那里,而这里定位居然跑到上面去了。0x01 float的一个特性 当容器被直接定义了float属性后,该容器的高度将变为0.0x02 该问题的解决办法 这里我仔细检查了代码,果然在本站热门上面的轮播图容器中发现了直接定义在容器里面的floa...原创 2019-07-07 11:46:39 · 489 阅读 · 0 评论