- 博客(26)
- 收藏
- 关注
RSS订阅原创 前端首屏懒加载
<title>图片懒加载</title> <style> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 300px; margin: 50px auto; background: url(./img/3.jpg) ...
2022-01-12 19:58:18
575
原创 JS图片切换，焦点对齐，自定义索引的使用
js代码 <script> // 获取元素 var box = document.getElementsByClassName('box')[0], ps = box.getElementsByTagName('p'), img = box.getElementsByTagName('img')[0], btns = box.getElementsByTagName('button'),
2021-12-14 16:56:17
1048
原创 原生JS计算两个数的和，arguments属性的介绍，求1-100的和。
今天在这里首先给大家介绍的是arguments属性，个人感觉这是一个容易被忽略的属性，如果不是工作中确实会用到这个属性，我还真一点印象都没有了。 介绍这个arguments属性之前先进行一番铺垫，首先来写一下用原生JS计算两个书数的和。// 求两个数的和 var sum1 = function(a1,a2){ console.log(a1+a2) } sum1(100,200);这完全没必要解释...
2021-12-12 22:31:56
760
原创 JavaScript写选项卡，自定义索引，this的使用
首先讲解思路。1.当前事件触发的时候，想让所有的li都没有背景颜色并且让所有的div都隐藏，然后再让当前点击的这个li有颜色，并让对应的那个div显示2.涉及到重复的事情必然要循环遍历借此机会锻炼自己的JS。注意自定义索引和this的使用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
2021-12-11 20:20:08
500
原创 JavaScript数据类型的转换
数据类型转换只针对于基本数据类型，复杂数据类型大多数情况下用不到数据类型转换。其他数据类型转换为数值Number(数据)规律：1. true为1，false为0，null为0，undefiend为NaN, 空数组为0， 2. 引用数据类型转化时先转为字符串，再转为数值。 3. 只能识别纯数字字符串，可保留一位小数，只能识别1个小数点 <script> console.log(Number('123'));//1...
2021-12-11 11:51:07
340
原创 b is not defined报错详解
<script> var a=100; console.log(a); console.log(b); </script>这是引用错误，因为b没有定义而直接引用导致的，解决办法就是先定义b，然后才去引用b。在开发中经常遇到这类报错，我这里是直接写了代码演示一下，原理很简单，但是在工作中遇到这里报错的情况五花八门，解决报错也是考验一个程序员的重要指标。...
2021-12-10 19:04:26
1222
原创 JavaScript操作元素样式
.style只能操作行内样式，想要获取style标签里面的样式需要通过window.getComutedStyle(元素).属性，由于这个属性在IE6~8不兼容，所以要进行兼容处理。在IE6~8使用元素.currentStyle.属性来获取，这两个方法都只能获取样式不能设置。不管是设置还是获取操作的都是行内样式。设置： 元素.style.样式属性=样式值；获取： 元素.style.样式属性；样式的操作元素.style.cssText="样式属性：样式值；样式属性：样式值"...
2021-12-08 18:19:05
311
原创 JavaScript操作元素的内容
规律：从当前元素中获取到的都是字符串原则：给值就是设置，不给值就是获取分为3类：1，操作表单元素内容设置： 表单元素.value=值；获取： 表单元素.value; <input type="text" id="text1" value=""> <script> // 给值就是设置，不给值就是获取 // 操作表单元素 var text1=document.getElementById('text1'); ..
2021-12-08 17:19:06
364
原创 JS鼠标各种事件
// js三部曲：获取元素，绑定事件，做对应的事 // 点击事件 document.getElementById('box1').onclick=function(){ console.log("点击事件") } // 双击事件 document.getElementById('box2').ondblclick=function(){ console.log('双击事件')..
2021-12-08 15:28:00
123
原创 rem适配方案
.less文件//设置常见的屏幕尺寸，修改里面的html文字大小//先写一个固定的，这样一打开页面显示的就是这个固定值html{ font-size: 50px;}//此次划分的分数 15份//定义一个分数变量@no:15;@media screen and (min-width:320px){ html{ font-size: 320px / @no; }}@media screen and (min...
2021-12-05 20:48:02
100
原创 a标签的使用和拓展
相信学前端的小伙伴一定对a标签很熟悉了，但其实大家普遍会用的就是src属性。今天在这里统一记录一下a标签的所有知识点，希望可以帮助到有需要的人。相对路径和绝对路径的问题就不在这里过多介绍了。1.<a href="https://www.baidu.com/" >百度</a>首先就是一个最简单的用法：跳转页面，这也是a标签真正的作用。2. <a href="#">嘿嘿 </a>在href中加一个#。这是一个空链接，在开发时写静
2021-12-05 16:34:57
438
原创 Grid布局--移动端
Grid布局---网格布局是一种二维布局：水平方向和垂直方向同时存在。grid布局可以很快的写出这种布局样式，不需要浮动定位套div。无需拆分左右，上下。概念容器container:采用网格布局的区域项目item:容器中采用网格定位的子元素行row:容器中水平区域列column:容器中垂直区域单元格cell: m行 n列 m*n个单元格网格线gril line:划分网格的线 水平网格线：行 垂直网格线：列正常...
2021-12-05 11:47:19
1014
原创 前端css盒子绝对居中
固定宽高1，margin负间距+绝对定位定位2，transform:translate()+绝对定位3，绝对定位4，flex布局5，fixed固定定位宽高不确定的盒子绝对居中首先我给大家罗列出来的几种可能性，用到的都是同一种方法。外面的盒子是有宽高的里面的盒子不需要设置宽高。top和bottom取值百分比要相同，left和right的取值百分比要相同。小盒子的大小和形状和百分比有关，也和大盒子的宽高有关。...
2021-12-03 16:31:54
231
原创 flex弹性盒子布局问题，细节处理，jusitify-content属性
jusitify-content:弹性子元素在主轴方向的对齐方式该属性有一个属性值是：space-between,在两者之间分配相同的距离如果子元素是2的倍数关系：即有8，12，16等个数的子元素，这种情况下该属性是非常好用的。那如果子元素个数不是2的倍数关系呢，该属性就无法准确分配空白空间了。那这种情况应该怎么办呢可以尝试使用margin-right属性。给子元素加上margin-right:1%,就可以得到这种效果了。亲测有效。该方法对奇偶数都好用。...
2021-12-03 11:57:02
576
原创 移动端响应式布局--媒体查询
概念：一个网站适配所有终端，实现不同屏幕分辨率下的终端网页的不同布局，使用媒体查询针对不同设备宽度进行布局设置。优点：一站适配所有终端，减少工作量，缩短开发周期。对搜索引擎友好，在每个设备中都能得到较好的展示。缺点：对老版本浏览器兼容性不好，兼容各个设备工作量大。效率较低，加载更多的样式文件和脚本文件。设计比较难以精确，是一种折中性的设计方案，维护困难。技术：弹性布局，图片，CSS，media, query等页面的设计和开发需要根据用户的行为、设备环境进行相应的调整。通过媒体查询检测不同
2021-12-02 21:43:49
1588
原创 css清除和重置默认样式
/* 将所有标签的内外边距清零 */ * { margin: 0; padding: 0 } /* 将em和i的字体不倾斜 */ em, i { font-style: normal } /* 清除自带样式小圆点 */ li { list-style: none ...
2021-11-30 21:18:19
770
原创 CSS三角形强化
如何做到上面那个三角形呢！！！这其实考验的就是一个人学到的知识会不会灵活运用了。在京东的项目中确实存在这样的案例，希望可以帮到大家
2021-11-30 19:18:09
214
原创 巧妙运用浮动元素不会压住文字的特点写项目板块
做项目中经常运动左边放图片，右边放文字的板块，如果用css的宽高一点点凑的话，是一件非常麻烦还容易出错的方法。在这里给大家推荐一种简洁有效的方法：利用浮动元素不会压住文字的特点来写这个板块。这样写出来的代码即简洁又高效，还不容易出错。...
2021-11-30 16:37:15
170
原创 盒子边框细节，点击效果
ul li{ position: relative;/*让z-index命令起作用*/ width: 100px; height: 200px; border: hotpink 1px solid; float: left; list-style: none; margin-left: -1px;/*避免了相邻两个盒子之间边框重叠的问题*..
2021-11-30 16:09:24
344
原创 单行文本显示省略号和多行文本显示省略号
在工作中会遇到一些前端确实可以解决但却不经常遇到的问题。比如说让文本显示出省略号，这个问题其实不麻烦，但在实际项目中用到的次数很少，所以难免大家做的时候没有头绪，所以我在此统一写一下代码(如有不妥或有新的方法，欢迎讨论)。 .box{ width: 100px; height: 100px; background-color: pink; white-space: nowrap;/*默认normal自动换行
2021-11-30 13:45:27
361
原创 自动计算盒子的宽高， box-sizing属性介绍。
我们前端工作者在写项目的静态页面时，页面中某一部分的宽度高度是200px,此时就是指这个盒子本身的大小就是一个200*200的盒子（包括边框，内边距，外边距）。但我们写的时候会先给盒子宽高分别是200px,然后根据项目的实际要求设置边框线和内外边距(如果此时四个内边距都是相同的宽度，会简单一些，如果每个边的宽度都不同，那就比较麻烦了)，此时盒子总体的大小就改变了。为了解决这一问题，有了box-sizing这个属性，使用最频繁的属性值是：border-box给大家上一段代码 .box{ .
2021-11-29 18:50:19
487
原创 【前端：css画三角形】
网上也有各种各样用CSS样式来写三角形的文章，但个人觉的有些乱，本来可能就不明白如何写，可能看完之后和没看是没什么区别的。因此本人在这里写好了方法，希望可以帮助的刚入门的前端工作者.box{ width: 0; height: 0; border: 10px solid transparent ; /*由边框的宽带觉得三角的大小,注意边框颜色一定是要transparent透明的*/ b...
2021-11-29 17:27:32
590
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人