- 博客(32)
- 收藏
- 关注
RSS订阅原创 每日面试题（HTML+CSS）（二）
每日面试题（HTML+CSS）★ 1. 简述title与h1的区别，b与strong的区别，i与em的区别。1. title和h1的区别(1) 从网站角度看，title 更重于网站信息。title可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的。(2) 从文章角度看，h1则是用于概括文章主题。(3) 一个网站可以有多个title,最好一个单页用一个title，以便突出网站页面主体信息，从seo看，title权重比h1高，适用性比h1广。(4) 标记了h1的文字页面给予的权重会比页面
2021-10-19 11:09:01
188
原创 每日面试题（HTML+CSS）（一）
每日面试题（HTML+CSS）★ 1. 父元素和子元素宽高不固定，如何实现子元素水平垂直居中1. 弹性盒模型(1) 给父元素设置display: flex; justify-content: center; align-items: center;.fu{ display: flex; justify-content: center; align-items: center;}(2) 给父元素设置display: flex; 子元素设置margin: auto; .fu{ dis
2021-10-18 12:00:01
263
原创 给JS扫扫盲——读JS红宝书（第四章）
第4章 变量、作用域与内存一、原始值和引用值原始值就是最简单的数据引用值则是由多个值构成的对象。在把一个值赋给变量时，JavaScript引擎必须确定这个值是原始值还是引用值。Undefined 、Null 、Boolean、Number 、String 和Symbol 。保存原始值的变量是按值访问的，因为我们操作的就是存储在变量中的实际值。引用值是保存在内存中的对象。JavaScript不允许直接访问内存位置，因此也就不能直接操作对象所在的内存空间。在操作对象时，实际上操作的是对该对象的引用
2021-08-28 20:13:12
346
原创 给JS扫扫盲——读JS红宝书（第三章）
第3章 语言基础一、语法1. 区分大小写ECMAScript中一切区分大小写。无论是变量、函数名还是操作符，都区分大小写举个例子：变量test和变量Test是两个不同的变量2.标识符（1）第一个字符必须是字母、下划线（_）或美元符号（$）（2）剩下的其他字符也可以是字母、下划线、美元符号或数字ECMAScript标识符使用驼峰大小写形式，也就是第一个单词首字母小写，后面每个单词首字母大写。注意: 关键字、保留字、true 、false 和null不能作为标识符举几个例子：firstSec
2021-08-14 15:41:48
1146
原创 JavaScript数据结构与算法——数组
js数据结构与算法——数组（一）小编有话说这段时间没有更新文章先给读者们道个歉，因为个人心态等原因没有把自己所学的写博客，这段时间自学了vue全家桶还有node.js，后续我会重新的去整理出它们的学习笔记（二）重要性数据结构和算法对于不管是什么方向的程序员来讲都是非常重要的，不仅仅是为了过面试，还有我们不可能在整个职业生涯中仅仅做一个crud boy，所以我想开拓一个新的模块和大家一起学习js版数据结构与算法。（三）我们为什么用数组举个例子：现在有这样一个需求：保存所在城市每个月的平均温度。可
2021-05-03 23:38:00
354
原创 jQuery（一）
jQuery1.jQuery下载使用官网地址 https://jquery.com/.复制粘贴引入js文件写一个小案例吧<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sale=1.0, maximum-scale
2021-03-20 22:49:26
102
原创 移动端网页特效
移动端网页特效1.触摸事件touch对象代表这样一个触摸点常见触摸事件：触摸touch事件说明touchstart手指触摸到一个 DOM 元素触发touchmove手指在一个 DOM 元素上滑动时触发touchend手指从一个 DOM 元素上移开时触发2.触摸事件对象TouchEvent 是一类描述手指在触摸平面的状态变化的事件touchstart、touchmove、touchend 三个事件都会各自有事件对象触摸事件对象三个常见对象列表：
2021-03-17 22:39:20
271
原创 常见网页特效案例
常见网页特效案例1.返回顶部案例滚动窗口至文档特定位置window.scroll(x,y);用之前的淘宝侧边栏案例做返回顶部，点击添加滚动窗口事件，发现会迅速回到顶部例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial
2021-03-15 11:11:55
796
2
原创 PC端网页特效（三）
PC端网页特效（三）1.缓动效果原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路：1. 让盒子每次移动的距离慢慢变小，速度就会慢慢降下来2. 核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离步长3. 停止的条件是：让当前盒子位置等于目标位置时就停止定时器4. 步长值取整（正值向上取整，负值向下取整）例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"
2021-03-13 20:17:53
157
原创 PC端网页特效（二）
PC端网页特效（二）动画函数封装1. 动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置实现步骤：1. 获取盒子当前位置2. 让盒子在当前位置上加一个距离3. 利用定时器不断重复操作4. 加一个结束定时器的条件5. 此元素需要添加定位，才能使用element.style.left例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <me
2021-03-11 22:26:37
107
原创 PC端网页特效（一）
PC端网页特效（一）1.元素偏移量 offset 系列（1）offsetoffset 就是偏移量，可以动态的得到该元素的位置、大小等● 获取元素距离带有定位父元素的位置● 获取元素自身的大小● 返回的数值不带单位（2）offset 系列常用属性offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素 如果父级没有element.offsetTop返回元素相对带有定位父元素上方的偏移element.offsetLeft
2021-03-10 23:19:24
360
原创 BOM（二）
BOM（二）1.JS执行队列（1）JS是单线程JS语言的一大特点是单线程，同一时间只能做一件事（2）同步和异步同步：前一个任务执行完执行下一个任务异步：任务同时进行本质区别：流水线上各个流程的执行顺序不同① 同步任务同步任务都在主线程上执行，形成一个执行栈② 异步任务JS的异步是通过回调函数实现的异步任务有以下三种类型1. 普通事件，如 click、resize等2. 资源加载，如 load、error等3. 定时器，如 setInterval、setTimeout等异步任务
2021-03-09 14:58:09
117
原创 BOM（一）
BOM浏览器对象模型1.什么是BOM?BOM即浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window2.BOM的构成BOM比DOM更大，包含DOMwindows对象是浏览器的顶级对象，具有双重角色1. 它是JS访问浏览器窗口的一个接口2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法在调用的时候可以省略window注意：window下的一个特殊属性window.name输出为空，声明要避开3.window对象的常
2021-03-09 00:03:49
155
原创 DOM（五）
DOM（五）1.常用键盘事件键盘事件触发条件onkeyup某个键盘按键被松开时触发onkeydown某个键盘按键被按下时触发onkeypress某个键盘按键被按下时触发 不识别功能键比如 ctrl shift 箭头三个事件执行的顺序是：keydown——keypress——keyup如果使用监听器则不需要加 on2.键盘事件对象键盘事件对象属性说明keyCode返回该键的ASCII值onkeydown 和 onkeyup 不区
2021-03-08 11:11:24
152
1
原创 DOM（四）
DOM（四）1. 事件高级（1）注册事件概述给元素添加事件，称为注册事件或者绑定事件注册事件有两种方式：传统方式和方法监听注册方式传统注册方式：● 利用 on 开头的事件 onclick● btn.onclick = function(){}● 特点：注册事件的唯一性● 同一元素同一事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数（2）方法监听注册方式● w3c标准推荐方式● addEventListener( )● IE 9 之前不支持此方法，可使用atta
2021-03-08 02:13:23
134
原创 DOM（三）
DOM（三）1.删除节点node.removeChild( )方法从 DOM 中删除一个子节点，返回删除的节点例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sale=1.0, maximum-scale=1.0, mi
2021-03-06 17:19:02
153
原创 DOM（二）
DOM（二）1.排他思想首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sale=1.0, maximum-scale=1.0, minimum
2021-03-05 18:47:34
581
3
原创 DOM（一）
DOM1.什么是DOM文档对象类型，是 W3C 组织推荐的处理可扩展标记语言的标准编程接口通过这些 DOM 接口可以改变网页的内容、结构和样式2.DOM树文档：一个页面就是一个文档，DOM 使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点，DOM 中使用 node 表示Dom把以上内容都看作是对象3.获取元素（1）获取元素的方式① 根据ID获取② 根据标签名获取③ 通过HTML5新增方法获取④ 特殊元
2021-03-05 00:14:24
3939
3
原创 移动Web开发——响应式布局（完结）、阿里百秀首页实战
响应式布局（完结）因为网页实在是访问不了，所以直接用现有的素材做了。1.技术选型方案：采取响应式页面开发方案技术：bootstrap框架设计图：采取1280px设计尺寸
2021-03-03 21:33:17
1080
3
原创 移动Web开发——响应式布局（二）
响应式布局（二）学习目标（1）能够说出响应式原理（2）能够使用媒体查询完成响应式导航（3）能够使用 bootstrap 的栅格系统（4）能够使用 bootstrap 的响应式工具（5）能够独立完成阿里百秀首页案例1.bootstrap使用（只用样式库）控制权在框架本身，使用者要按照框架所规定的某种规范进行开发bootstrap 使用四个步骤：1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容（1）bootstrap下载下载地址https://
2021-03-03 14:33:48
433
原创 移动Web开发——响应式布局（一）
响应式布局（一）学习目标（1）能够说出响应式原理（2）能够使用媒体查询完成响应式导航（3）能够使用 bootstrap 的栅格系统（4）能够使用 bootstrap 的响应式工具（5）能够独立完成阿里百秀首页案例1.响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备划分尺寸区间超小屏幕（手机）< 768px小屏设备（平板）>= 768px ~ < 992px中等屏幕（桌面显示器）>
2021-03-02 16:24:46
1729
原创 移动Web开发——rem适配布局（完结）、苏宁首页实战
rem适配布局（完结）1.rem适配方案（第二种）（1）使用技术flexible.js+rem（2）flexible.js的原理github地址链接: https://github.com/amfe/lib-flexible.不需要写不同的媒体查询，js做处理原理：把设备划分成10等份，不同设备下，比例是一致的我们要做的是确定好当前设备的 html大小 比如当前设计稿是750px，只需要把html文字大小设置为75px（750px/10）页面元素 rem 值 = 页面元素的px值 / 7
2021-03-02 11:16:39
753
原创 移动Web开发——rem适配布局（七）
rem适配布局（七）1. 用技术1实现苏宁首页苏宁首页访问链接：https://m.suning.com/.（1）技术选型方案：采取单独制作移动页面方案技术：布局采取rem适配布局（less + rem + 媒体查询）设计图：采取750px设计尺寸（2）搭建相关文件结构（3）设置视口标签以及初始化样式html代码// 初始化<!DOCTYPE html><html> <head> <meta charset="utf-8">
2021-03-01 23:22:10
210
原创 移动Web开发——rem适配布局（六）
rem适配布局（六）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.rem适配方案（1）提出问题我们使用rem适配的目标是什么？怎么去实现它？① 让一些不能等比的自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备② 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸
2021-03-01 10:43:28
430
原创 移动Web开发——rem适配布局（五）
rem适配布局（五）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.Less变量@变量名: 值;1.变量名规范● 必须有@为前缀● 不能包含特殊字符● 不能以数字开头● 大小写敏感2.Less 编译本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通
2021-02-28 17:09:15
152
2
原创 移动Web开发——rem适配布局（四）
rem适配布局（四）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页...
2021-02-28 11:24:21
116
原创 移动Web开发——rem适配布局（三）
媒体查询1.引入资源当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets原理：直接在link中判断设备的尺寸，然后引用不同的css文件例1：html代码// 例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, i
2021-02-27 21:06:08
86
原创 移动Web开发——rem适配布局（二）
rem适配布局（二）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.媒体查询（1）什么是媒体查询媒体查询（Media Query）是CSS 3的新语法① 使用 @media 查询，可以针对不同的媒体类型定义不同的样式 ② @media 可以针对不同的屏幕尺寸设置不同的样式 ③ 当重置浏览器的大小的过程中，页
2021-02-27 20:15:35
126
原创 移动Web开发——rem适配布局（一）
rem适配布局（一）学习目标（1）能够使用rem单位（2）能够使用媒体查询的基本语法（3）能够使用Less的基本语法（4）能够使用Less中的嵌套（5）能够使用Less中的运算（6）能够使用2种rem适配方案（7）能够独立完成苏宁移动端首页1.rem基础（1）rem单位rem(root em)是一个相对单位，类似于em，em是父元素字体大小不同的是，rem的基准是相对于html元素的字体大小例如：根元素(html)设置 font-size = 12px &n
2021-02-27 14:33:23
128
原创 flex布局——子项常见属性、携程网实战
（一）flex布局子项常见属性属性说明flex子项目占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序（前后顺序）1.flex定义子项目分配剩余空间用flex来表示占多少分数// 格式.item{ flex: <number>;}2.align-self控制子项在侧轴上的排列方式align-self 属性允许单个项目与其他项目不一样的对齐方式属性值说明auto默认 继承父
2021-02-27 01:41:13
628
1
原创 flex布局——父项常见属性
flex布局父项常见属性1.flex布局原理：通过给父盒子添加flex属性，来控制盒子的位置和排列方式。属性说明flex-direction设置主轴方向justify-content设置主轴上的子元素排列方式flex-wrap设置子元素是否换行align-content设置侧轴上的子元素排列方式（单行）align-items设置侧轴上的子元素排列方式（多行）flex-flow同时设置flex-direction和flex-wrap2.
2021-02-25 22:26:17
439
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人