- 博客(31)
- 收藏
- 关注
RSS订阅原创 unset,inherit,initial,auto的区别是什么？
unset,inherit,initial,auto的区别是什么？1: 问position属性有多少取值？通常的回答是static、relative、absolute和fixed。当然还有一个sticky。其实，除此之外，CSS属性通常还可以设置下面几个值：unset, inherit, initial;1: unset是关键字initial和inherit的组合。如果该属性是默认继承属性，该值等同于inherit如果该属性是非继承属性，该值等同于initial换句话说这个unset关
2021-03-07 00:18:10
738
原创 倒计时CountDown类
<script> let start = new Date().getTime() console.log('start: ' + Math.floor(start / 1000)) setInterval(() => { let end = new Date().getTime(); console.log('end: ' + Math.floor(end / 1000)) // console.log(end - start) console.log(M.
2021-02-15 13:00:14
535
原创 伪类和伪元素区别；
注意: 由::before 和::after 生成的伪元素 包含在元素格式框内， 因此不能应用在替换元素上， 比如或 元素。CSS3 引入 ::before 是为了将伪类和伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法。<!-- CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。--><!-- 常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。-->/* Add a heart ..
2020-11-25 22:28:14
306
原创 jquery的attr
prop() 和 attr() 之间的不同prop() 和 attr() 可能返回不同的值。本实例演示了当用于返回复选框的 “checked” 状态时的不同。在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。但不得不说的是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。1、操作对象不同很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。不过，在jQuery
2020-11-20 10:12:36
243
原创 微信小程序自定义顶部导航栏（兼容适配所有机型）
为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。<view class="custom-navbar-container"> <!-- 状态栏占位元素 --> <view class="custom-status-bar" style="height: {{ statusBarHei
2020-11-19 21:54:46
1513
原创 bootstrapv4.5.2(栅格系统)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { m.
2020-11-15 12:11:02
205
原创 如何隐藏滚动条，同时具有滚动的功能,（同时兼容pc端和移动端浏览器）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { ma
2020-11-11 13:47:12
633
1
原创 bootstrapv3.37源码(响应式工具)
visible-* (常用类)visible-xsvisible-smvisible-mdvisible-lg.visible-xs,.visible-sm,.visible-md,.visible-lg { display: none !important;}/* 屏幕小于767px，显示元素 */@media (max-width: 767px) { .visible-xs { display: block !important; }}/* 屏幕在76.
2020-11-08 10:41:18
328
原创 bootstrap4.0中container容器
.container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl { /* 初始样式 */ width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}/* 屏幕大于576px,container的最大宽度为540px; */@media .
2020-11-08 09:40:50
708
原创 bootstrap中的@media媒体查询
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> &l
2020-11-05 13:26:41
1461
1
原创 jquery的attr()和prop()方法的区别；
attr()&prop()prop() 和 attr() 之间的不同prop() 和 attr() 可能返回不同的值。本实例演示了当用于返回复选框的 “checked” 状态时的不同。prop() --> trueattr —> checked在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。但不得不说的是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。1、操作对象不同很明显，attr和p
2020-10-31 01:41:10
198
原创 css transform导致像素模糊的问题解决办法
方法1: 使用flex布局，居中元素;（推荐）方法2: transfrom:translate(calc(-50%+ 0.5px),calc(-50% + 0.5px)); 用calc函数;
2020-10-29 16:59:38
830
原创 预处理器
预处理器# Sassnpm install -D sass-loader sass# Lessnpm install -D less-loader less# Stylusnpm install -D stylus-loader stylus然后你就可以导入相应的文件类型，或在 *.vue 文件中这样来使用：<style lang="scss">$color: red;&-loyer { position: absolute; top: 20px;
2020-09-07 22:54:17
113
原创 less css预处理语言
// 在平时工作中，我们就可以把 常用的变量// 封装到一个文件中，这样利于代码组织维护。// --- 属性值变量 ---//// color@base: #f938ab;// font-size@ft14: 14px;// margin@mr10: 10px;@mr20: 20px;@mb10: 10px;@mt10: 10px;// border@bd1: ...
2020-08-20 16:37:57
571
原创 原生js实现购物车全选/全不选逻辑
博客背景： 由于最近要开发一款电商小程序项目,购物车模块正好要用到这些知识，前来复习一下该功能逻辑。 <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #ccc; } .jdTabContent { width: 600px;
2020-08-17 19:52:25
873
原创 小程序模仿京东首页顶部scroll-navbar
javascript/* 滚动思路：父元素固定宽度，子元素宽度超出父元素宽度 */wxss文件.nav-bar-scroll-box { white-space: nowrap; // 保证子元素不换行显示}.scroll-x-item { display: inline-block; background-color: red; color: purple; font-size: 12px; text-align: center; width: 16.7%; p
2020-08-16 14:33:24
385
原创 window.postMessage
window.postMessage() 方法可以安全地实现跨源通信。只要正确的使用，这种方法就很安全。参考MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage语法发送: otherWindow.postMessage(message, targetOrigin, [transfer]);接收:window.addEventListener("message", receiveMessage, fal
2020-07-12 18:54:52
2905
原创 HTML内联框架元素 (「iframe」)
HTML内联框架元素 ( iframe) 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录(session history)和DOM树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。 <!-- 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面 --> <div
2020-07-12 17:30:00
885
原创 Window对象的open()方法
导航和打开窗口Window 接口的 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 或者标签 tab ）。内联框架 iframeHTML内联框架元素 () 表示嵌套的browsing context(浏览器上下文)。它能够将另一个HTML页面嵌入到当前页面中。解释一下:iframe的name属性可以使window.open() 方法的 windowName 参数值。那么通过window.open()方法指定的资源就会加载到iframe
2020-07-12 15:47:59
1773
原创 阿里矢量图标库
第一步: 定义字体 -> 推荐使用在线字体@font-face { font-family: 'iconfont'; /* project id 1072741 */ src: url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.eot'); src: url('//at.alicdn.com/t/font_1072741_kyk02u4tobq.eot?#iefix') format('embedded-opentype'), url
2020-07-11 16:58:09
340
原创 Javascript正则表达式
正则表达式： 正则是一种强大的工具,也是一门语言, 是程序员必备技能。参考《迷你正则表达式》书籍自问自答: 请你简单的描述一下正则表达式答: 正则表达式是一种字符串匹配的模式（pattern），1：要么匹配字符, 要么匹配位置。使用注意: 能用字符串 API 出马的问题, 就不该由正则出马。正则表达式的作用 * 用来检查一个字符串中是否含有某种子串, 也就是说是否匹配...
2020-07-09 00:32:37
173
原创 紧贴底部的页脚footer常用解决方案
问题描述:当页面内容的高度 < 视口的高度 - 页头的高度(header) - 页脚的高度(footer) 就会出现footer页面不不会紧贴在视口的最底部，而是跟在内容的下方。**解决方案一: ** 采用一个视口相关的长度单位 vh/vw 和 calc函数<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
2020-07-08 23:41:42
587
原创 Reset CSS和Normalize CSS的作用和区别
作用：Reset CSS和Normalize CSS都是重置浏览器自带样式。区别：reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置。Normalize.cssNormalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normal
2020-07-04 10:44:00
2502
原创 字符集的由来
字符集一、字符（Character）是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等。二、字符集（Character set）是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同。三、常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、 GB18030字符集、Unicode字符集等。四、计算机要准确的处理各种字符集文字，就需要进行字符编码，以便...
2020-02-06 11:40:31
220
原创 计算机硬件系统的构成
计算机的硬件系统基本上冯诺依曼提出的传统框架，有运算器，控制器，存储器，输入设备，输出设备五大基本部件构成。什么是裸机：没有安装软件的计算机习惯上被称为裸机，裸机是无法工作的。操作系统： 距离硬件最近的软件，它向下控制硬件，向上支持其他软件。其他软件必须在操作系统的支持下才能运行。...
2020-02-03 17:54:00
860
原创 计算机软件系统的构成
软件是计算机系统重要的组成部分，是计算机的灵魂，没有软件计算机就无法工作。人们针对某一需要为计算机编制的指令序列称为程序，程序连同有关的说明资料称为软件。语言处理程序 用各种程序设计语言如汇编语言 C++ Java编写的源程序，计算机是不能直接执行的，必须经过翻译（对汇编语言源程序是汇编，对高级语言源程序则是编译或解释），将他们翻译成机器可执行的二进制语言程序。这些翻译程序就是语言处理程序...
2020-02-03 17:53:09
1282
原创 浏览器事件循环原理
Javascript为什么是单线程的？浏览器js的作用是操作DOM，这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？任务队列单线程就意味着所有任务需要排队，如果因为任务cpu计算量大还好，但是I/O操作cpu是闲着的。所以js就设计成了一门异步的语言，...
2020-01-20 00:48:58
455
1
原创 XMLHttpRequest异步对象
XMLHttpRequest 异步对象参考链接: MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX一个成功的响应：有两个条件:1：服务器成功响应了。2：异步对象的响应状态为4。1 xhr.status == 200 可以获取当前服务器的响应状态。2 xhr.readyState == 4。异步对象发送请求给服务器，...
2020-01-18 15:43:05
421
原创 JavascriptDOM操作页面元素
Document 是window的一个重要属性document.documentElement 获取的DOM节点是html元素document.getElementsByTagName(‘html’)[0] 获取的DOM节点也是html元素document.body 获取的DOM节点是body元素。访问元素的行内样式任何支持 style 特性的 HTML元素在 JavaScript ...
2020-01-18 15:27:45
1319
原创 JavascriptDOM事件
事件流:事件流描述的是从页面中接收事件的顺序。IE团队 的事件流是事件冒泡流。而Netscape Communicator 的事件流是事件捕获流。事件捕获：如果你单击了页面中的元素，那么这个 click 事件会按照如下顺序传播(1) document(2) html(3) body(4) div事件冒泡:(1) div(2) body(3) html(4...
2020-01-18 15:02:43
353
原创 JavascriptBOM的核心对象window
Window对象参考 MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Windowwindow 对象表示一个包含DOM文档的窗口，其 document 属性指向窗口中载入的 DOM文档 。使用 document.defaultView 属性可以获取指定文档所在窗口。window作为全局变量，代表了脚本正在运行的窗口，暴露给 J...
2020-01-18 14:30:10
3081
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人