web前端基础学习笔记
文章平均质量分 87
香甜的甲基橙
昨夜西风凋碧树,独上高楼,望尽天涯路。
展开
-
JavaScript对象--更新对象属性,添加新属性,删除属性,对象查找,测试对象属性,访问嵌套属性,访问嵌套数组(补充内容)
使用点或中括号操作符来更新eg : 将这个愉快的狗的名字更改为字符串 两种方式来更新对象的 name 属性:或者像更改属性一样给 JavaScript 对象添加属性。eg : 给 添加一个属性 :或者eg : 删除 的属性 对象和字典一样,可以用来存储键/值对。如果数据是扁平的,你可以用对象来查找你想要的值,而不是链式使用 或 语句。当你知道输入数据在某个范围时,这种查找方式使用效果较好。eg 是字符串 检查一个对象属性是否存在。用对象的 方法来检查对象是否有指定的属性。 找到该属性时返回原创 2022-06-08 09:41:16 · 1348 阅读 · 0 评论 -
797-799 BOM(案例:五秒钟之后跳转页面,获取URL地址,locatio对象的方法)
文章目录BOM5 location对象案例:五秒钟之后自动跳转页面案例:获取URL地址5.4 location 对象的方法BOM5 location对象案例:五秒钟之后自动跳转页面案例分析利用定时器做倒计时效果时间到了就跳转页面。使用location.href17-五秒钟之后跳转页面.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met原创 2022-05-18 21:11:50 · 255 阅读 · 0 评论 -
793 - 796 --- BOM ( JS执行机制,location对象 )
文章目录BOM4 JS执行机制4.1 第一个问题4.2 第二个问题4.3 同步和异步4.4 JS执行机制5 location对象5.1 什么是location对象5.2 URL5.3 location 对象的属性BOM4 JS执行机制JavaScript语言的一大特点就是单线程\color{red}{单线程}单线程,也就是说 , 同一个时间只能做一件事\color{red}{同一个时间只能做一件事}同一个时间只能做一件事。 这是因为Javascript这门脚本语言诞生的使命所致一JavaScrip原创 2022-05-14 21:38:01 · 239 阅读 · 0 评论 -
789-792---BOM(定时器(setInterval() 定时器),案例 :倒计时,停止setInterval() 定时器,案例:发送短信,this的指向)
文章目录BOM3 定时器3.4 setInterval() 定时器案例:倒计时3.5 停止setInterval() 定时器案例:发送短信3.6 thisBOM3 定时器3.4 setInterval() 定时器window.setInterval(回调函数,[间隔的毫秒数]);setInterval0方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。注意:\color{red}{注意:}注意:window可以省略。这个调用函数可以直接写函数,或者写函数名\color{red}{原创 2022-05-12 21:08:05 · 362 阅读 · 0 评论 -
785-788---BOM(定时器(setTimeout() 定时器),案例:5秒后自动关闭广告,停止 setTimeout() 定时器,setInterval() 定时器)
文章目录BOM3 定时器3.1 两种定时器3.2 setTimeout() 定时器案例:5秒后自动关闭广告3.3 停止 setTimeout() 定时器BOM3 定时器eg: 此处轮播图有两张,它每隔一段时间就会播放下一个图片,这些跟时间打交道的效果,我们便可以使用定时器。3.1 两种定时器window对象给我们提供了2个非常好用的方法定时器。setTimeout()setInterval()3.2 setTimeout() 定时器window.setTimeout (调用函数,[延原创 2022-05-04 23:44:12 · 993 阅读 · 0 评论 -
781-784---BOM(BOM 概述,window对象的常见事件--窗口加载事件,调整窗口大小事件)
文章目录BOM1 BOM 概述1.1 什么是 BOM1.2 BOM 的构成2 window对象的常见事件2.1 窗口加载事件2.2 调整窗口大小事件3 定时器BOM目标能够说出什么是BOM能够知道浏览器的顶级对象window能够写出页面加载事件以及注意事项能够写出两种定时器函数并说出区别能够说出JS执行机制能够使用location对象完成页面之间的跳转能够知晓navigator对象涉及的属性能够使用history提供的方法实现页面刷新1 BOM 概述1.1 什么是 BOMBOM原创 2022-05-03 23:14:07 · 375 阅读 · 0 评论 -
773-780---DOM事件高级(常用鼠标事件,案例:跟随鼠标的天使,常用的键盘事件,案例:模拟京东按键输入内容,案例:模拟京东快递单号查询)
文章目录事件高级7 常用的鼠标事件7.1常用的鼠标事件7.2 鼠标事件对象案例:跟随鼠标的天使8 常用的键盘事件8.1 常用的键盘事件8.2 键盘事件对象8.3 ASCII 表案例:模拟京东按键输入内容案例:模拟京东快递单号查询事件高级7 常用的鼠标事件鼠标事件说明onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseout鼠标离开触发onfocus获得鼠标焦点触发onblur失去鼠标焦点触发onmousemove鼠原创 2022-05-02 22:32:39 · 288 阅读 · 0 评论 -
769-772 --- DOM事件高级(事件对象的常见属性和方法,阻止事件冒泡,事件委托)
文章目录事件高级4 事件对象4.4 事件对象的常见属性和方法5 阻止事件冒泡5.1 阻止事件冒泡的两种方式5.2 阻止事件冒泡的兼容性解决方案(了解)6 事件委托(代理、委托)7 常用的鼠标事件7.1常用的鼠标事件事件高级4 事件对象4.4 事件对象的常见属性和方法事件对象属性方法说明e.target返回触发事件的对象 标准e.srcElement返回触发事件的对象 非标准 ie6-8使用e.type返回事件的类型 比如 click mouse原创 2022-05-01 21:28:53 · 168 阅读 · 0 评论 -
762-768---DOM事件高级(注册事件,删除事件,DOM事件流,事件对象)
文章目录事件高级1 注册事件(绑定事件)1.1 注册事件概述1.2 addEventListener 事件监听方式1.3 attachEvent 事件监听方式(了解)1.4 注册事件兼容性解决方案(了解)2 删除事件(解绑事件)2.1 删除事件的方式2.2 删除事件兼容性解决方案(了解)3 DOM事件流4 事件对象4.1 什么是事件对象4.2 事件对象的使用语法4.3 事件对象的兼容性方案(了解)4.4 事件对象的常见属性和方法事件高级目标:能够写出元素注册事件的两种方式能够说出删除事件的两种方原创 2022-04-26 22:29:13 · 437 阅读 · 0 评论 -
web前端学习759-761(DOM---节点操作中三种动态创建元素区别,DOM重点核心,创建,增删改查,属性操作,事件操作)
文章目录DOM5 节点操作5.8 三种动态创建元素区别(了解)6 DOM 重点核心6.1 创建6.2 增6.3 删6.4 改6.5 查6.6 属性操作6.7 事件操作DOM5 节点操作5.8 三种动态创建元素区别(了解)document . write ()element . innerHTMLdocument . createElement ()区别document .write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘innerHT原创 2022-04-25 21:04:34 · 408 阅读 · 0 评论 -
web前端学习753-758(案例:动态生成表格)
文章目录案例:动态生成表格案例:动态生成表格根据学生数据动态生成表格,同时还可以删除学生数据。案例分析:因为里面的学生数据都是动态的,我们需要 js 动态生成,这里我们模拟数据,自己定义好数据。数据我们采用对象形式存储。所有的数据都是放到 tbody 里面的行里面。因为行很多,我们需要循环创建多个行(对应多个人)。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&原创 2022-04-23 16:34:06 · 325 阅读 · 0 评论 -
web前端学习742-752(DOM-节点操作---节点概述,节点层级,创建节点,添加节点,删除系欸但,复制节点,案例:发布留言,删除留言)
文章目录DOM5 节点操作5.1为什么学节点操作5.2 节点概述5.3 节点层级1 父级节点2 子节点3 兄弟节点5.4 创建节点5.5 添加节点案例:简单版发布留言案例5.6 删除节点案例:删除留言案例5.7 复制节点(克隆节点)插件HTML Tree GeneratoDOM5 节点操作5.1为什么学节点操作获取元素通常使用两种方式 :1.利用DOM提供的方法获取元素document.getElementByld()document.getElementsByTagName()docum原创 2022-04-20 22:31:46 · 813 阅读 · 0 评论 -
web前端学习751(案例:删除留言案例)
案例:删除留言案例案例分析当我们把文本域里面的值赋值给Ii的时候,多添加一一个删除的链接需要把所有的链接获取过来,当我们点击当前的链接的时候,删除当前链接所在的Ii阻止链接跳转需要添加 javascript:void(0);或者javascript:;在之前简单版发布留言案例基础上修改发布留言案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8">原创 2022-04-20 22:08:17 · 198 阅读 · 0 评论 -
web前端学习749(案例:简单版发布留言案例)
案例:简单版发布留言案例案例分析核心思路 : 点击按钮之后 , 就动态创建一个li ,添加到 ul里面。创建 li 的同时 , 把文本域里面的值通过li.innerHTML赋值给 li如果想要新的留言后面显示就用appendChild 如果想要前面显示就用insertBefore<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta na原创 2022-04-20 21:19:10 · 541 阅读 · 0 评论 -
web前端学习746(案例:下拉菜单)
案例:下拉菜单案例分析导航栏里面的 li 都要有鼠标经过效果 , 所以需要循环注册鼠标事件核心原理 : 当鼠标经过li里面的第二个孩子 ul显示,当鼠标离开 , 则ul 隐藏大概步骤:(设计思路由下图依次呈现)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi原创 2022-04-20 18:28:27 · 1790 阅读 · 0 评论 -
web前端学习720-741(DOM---操作元素,接上)
文章目录DOM4 操作元素案例:分时显示不同图片,显示不同问候语4.3 表单元素的属性操作4.4 样式属性操作DOM4 操作元素案例:分时显示不同图片,显示不同问候语根据不同时间,页面显示不同图片,同时显示不同的问候语。如果上午时间打开页面,显示上午好,显示上午的图片。如果下午时间打开页面,显示下午好,显示下午的图片。如果晚上时间打开页面,显示晚上好,显示晚上的图片。案例分析根据系统不同时间来判断,所以需要用到日期内置对象利用多分支语句来设置不同的图片需要一个图片,并且根据时间修改图原创 2022-04-19 20:15:00 · 431 阅读 · 0 评论 -
web前端学习709-719(DOM--- DOM 简介,获取元素,事件基础,事件基础,操作元素)
文章目录DOM1 DOM 简介1.1 什么是DOM1.2 DOM 树2 获取元素2.1 如何获取页面元素2.2 根据ID获取2.3 根据标签名获取2.4 通过HTML5 新增的方法获取2.5 获取特殊元素(body,html)3 事件基础3.1 事件概述3.2 事件三要素3.3 执行事件的步骤4 操作元素4.1改变元素内容4.2 常用元素的属性操作DOM能够说出什么是DOM能够获取页面元素能够给元素注册事件能够操作DOM元素的属性能够创建元素能够操作DOM节点1 DOM 简介1.1 什么是原创 2022-04-16 21:22:12 · 746 阅读 · 0 评论 -
web前端学习706-708(web APIs 简介---Web APls 和JS基础关联性,API 和 Web API)
文章目录web APIs 简介1 Web APls 和JS基础关联性1.1 JS的组成1.2 JS基础阶段以及 Web APls阶段2 API 和 Web API2.1 API2.2 Web API2.3 API和Web API总结web APIs 简介能够说出Web APIs阶段与JavaScript语法阶段的关联性能够说出什么是API能够说出什么是 Web API1 Web APls 和JS基础关联性1.1 JS的组成1.2 JS基础阶段以及 Web APls阶段JS基础阶段原创 2022-04-16 12:33:08 · 185 阅读 · 0 评论 -
web前端学习702-705(JavaScript 简单类型与复杂类型---简单类型与复杂类型,堆和栈,简单类型的内存分配,复杂类型的内存分配,简单类型传参,复杂类型传参)
文章目录JavaScript 简单类型与复杂类型1 简单类型与复杂类型2 堆和栈3 简单类型的内存分配4 复杂类型的内存分配5 简单类型传参6 复杂类型传参JavaScript 简单类型与复杂类型能够说出简单数据类型的内存分配能够说出复杂数据类型的内存分配能够说出简单类型如何传参能够说出复杂类型如何传参1 简单类型与复杂类型简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。值类型︰简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型string ,原创 2022-04-16 12:13:39 · 118 阅读 · 0 评论 -
web前端学习670-701(JavaScript内置对象---内置对象,查文档MDN,Math对象,日期对象,数组对象,字符串对象)
文章目录JavaScript内置对象1 内置对象2 查文档2.1 MDN2.2 如何学习对象中的方法3 Math 对象案例:封装自己的数学对象3.1 Math 概述3.2 随机数方法random()案例:猜数字游戏4 日期对象4.1 Date概述4.2 Date()方法的使用4.3 日期格式化4.4 获得日期的总的毫秒形式案例:倒计时效果(重点案例一定要会写)5 数组对象5.1 创建数组的两种方式5.2 检测是否为数组5.3 添加删除数组元素的方法案例:筛选数组5.4 数组排序5.5 数组索引方法案例︰数组原创 2022-04-15 22:51:53 · 709 阅读 · 0 评论 -
web前端学习658-669(JavaScript对象---对象,创建对象(利用字面量,new Object,构造函数创建对象),new关键字,遍历对象属性)
文章目录JavaScript对象1 对象1.1 什么是对象?1.2 为什么需要对象2 创建对象的三种方式2.1 利用字面量创建对象变量、属性、函数、方法的区别2.2 利用 new Object 创建对象2.3 利用构造函数创建对象2.4 构造函数和对象3 new 关键字4 遍历对象属性小结JavaScript对象目标能够说出为什么需要对象能够使用字面量创建对象能够使用构造函数创建对象能够说出new的执行过程能够遍历对象1 对象1.1 什么是对象?现实生活中: 万物皆对象,对象是原创 2022-04-10 21:11:11 · 1099 阅读 · 0 评论 -
web前端学习655-657(JavaScript预解析---预解析,变量预解析和函数预解析)
文章目录JavaScript 预解析1 预解析2 变量预解析和函数预解析3 预解析案例案例:结果是几?JavaScript 预解析目标:能够知道解析器运行JS分为哪两步能够说出变量提升的步骤和运行过程能够说出函数提升的步骤和运行过程1 预解析可以先看下面例子JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript 解析器在运行JavaScript代码的时候分为两步: 预解析和代码执行。2 变量预解析和函数预解析1 我们js引擎运行js分为原创 2022-04-09 17:45:39 · 2032 阅读 · 0 评论 -
web前端学习649-654(JavaScript作用域---作用域,变量的作用域,作用域链)
文章目录JavaScript作用域1 作用域1.1 作用域概述2 变量的作用域2.1 变量作用域的分类2.2 全局变量2.3 局部变量2.3 全局变量和局部变量的区别补充: js 没有块级作用域(了解)3 作用域链案例1:结果是几?案例2:结果是几?JavaScript作用域作用域变量的作用域作用域链1 作用域1.1 作用域概述通常来说, 一段程序代码中所用到的名字并不总是有效和可用的, 而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的原创 2022-04-08 21:47:14 · 746 阅读 · 0 评论 -
web前端学习628-648(JavaScript函数---函数概念,使用,函数的参数,函数的返回值,arguments的使用,函数案例,函数的两种声明方式)
文章目录函数1 函数的概念2 函数的使用2.1 声明函数2.2 调用函数2.3 函数的封装案例:利用函数计算1~100之间的累加和3 函数的参数3.1 形参和实参案例:求两个数之间的和3.2 函数形参和实参个数不匹配问题3.3 小结4 函数的返回值4.1 return 语句案例1:利用函数求两个数的最大值案例2:利用函数求任意一个数组中的最大值4.2 return 终止函数4.3 return 返回值4.4 函数没有return 返回 undefined4.5 break ,continue ,return原创 2022-04-07 23:00:32 · 969 阅读 · 0 评论 -
web前端学习611-627(JavaScript数组---数组,创建数组,获取数组元素,遍历数组,数组中新增元素,数组案例)
文章目录JavaScript数组1 数组的概念2 创建数组2.1 数组的创建方式2.2 利用new 创建数组2.3 利用数组字面量创建数组(常用)2.4 数组元素的类型3 获取数组元素数组的索引4 遍历数组4.1 数组的长度案例1:求和案例2:数组最大值案例3:数组转换为分割字符串5 数组中新增元素5.1 通过修改length长度新增数组元素JavaScript数组1 数组的概念之前学的变量:存储一个值。如果存班级中所有学生姓名:可以使用数组(Array),存放一组数据,提供访问(获取)方式数组:原创 2022-04-06 22:06:47 · 2272 阅读 · 0 评论 -
web前端学习584-610(JavaScript流程控制-循环---for循环 while循环 do...while循环 continue break)
文章目录JavaScript流程控制-循环1 循环2 for 循环案例1:求1-100之间所有的整数的累加和案例2:求学生成绩案例3:一行打印五个星星3 双重for 循环案例:打印五行五列星星案例:打印n行n列星星案例:打印倒三角案例案例:打印九九乘法表4 while 循环案例:1-100求和案例 :循环你爱我吗5 do while 循环循环小结6 continue break6.1 continue 关键字6.2 break 关键字JavaScript流程控制-循环前言: 类似于c语言1 循环原创 2022-04-05 22:21:44 · 1051 阅读 · 0 评论 -
web前端学习570-583(JavaScript流程控制--流程控制,顺序流程,分支流程控制if 语句,三元表达式,分支流程控制switch语句)
文章目录JavaScript流程控制-分支1 流程控制2 顺序流程控制3 分支流程控制 if 语句3.1 分支结构3.2 if 语句3.3 if else 语句(双分支语句)3.4 if else if 语句(多分支语句)4 三元表达式案例:数字补05 分支流程控制 switch 语句5.1 语法结构案例:查询水果5.2 switch 语句 和 if else if 语句的区别与C语言语法类似JavaScript流程控制-分支1 流程控制控制代码按照什么结构顺序来执行的流程控制有三种结构顺序原创 2022-04-05 16:25:30 · 768 阅读 · 0 评论 -
web前端学习556-569(运算符---算数运算符,递增递减运算符,比较运算符,逻辑运算符,赋值运算符,运算符优先级)
文章目录1 运算符2 算数运算符2.1 算数运算符概述2.2 浮点数得精度问题2.3 表达式和返回值3 递增和递减运算符3.1 递增和递减运算符概述3.2 递增运算符1 前置递增运算符2 后置递增运算符3.3 前置递增和后置递增小结4 比较运算符4.1 比较运算符概述4.2 =小结5 逻辑运算符5.1逻辑运算符概述5.4 短路运算(逻辑中断)1.逻辑与2.逻辑或6 赋值运算符7 运算符优先级++++前言:运算符类似于c语言里面的,学过其他语言也差不多1 运算符运算符( operator )也被称原创 2022-04-05 14:58:57 · 519 阅读 · 0 评论 -
web前端学习545-552(数据类型---获取变量数据类型,数据类型转换,案例:计算年龄,简单加法器)
文章目录数据类型3 获取变量数据类型3.1 获取检测变量的数据类型3.2 字面量4 数据类型转换4.1 什么是数据类型转换4.2 转换成字符串4.3 转换为数字型(重点)案例1:计算年龄案例2:简单加法器4.4 转换为布尔型前言:学习要踏实,就个人而言,要好好做笔记,系统学习,随机选取学习感觉学不好,没知识点笔记反正我心里是真不踏实数据类型3 获取变量数据类型3.1 获取检测变量的数据类型typeof 可用来获取检测变量的数据类型eg 20-获取变量数据类型.html<!DOCT原创 2022-04-05 13:29:58 · 766 阅读 · 0 评论 -
web前端学习539-544(简单数据类型---字符串型string,案例:弹出网页警告框、显示年龄,布尔型Boolean,Undefined和Null )
文章目录数据类型2 简单数据类型2.3 字符串型String1 字符串引号嵌套2 字符串转义符案例;弹出网页警告框3 字符串长度4 字符串拼接5 字符串拼接加强案例:显示年龄案例分析2.4 布尔型Boolean2.5 Undefined和Null数据类型2 简单数据类型2.3 字符串型String字符串型可以是引号中的任意文本,其语法为双引号” "和单引号’ 'var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串var strMsg2 ='我爱吃猪蹄~'; // 使用单引原创 2022-02-28 21:35:56 · 1141 阅读 · 0 评论 -
web前端学习535-538(数据类型简介,简单数据类型,数字型Number)
文章目录数据类型1 数据类型简介1.1 为什么需要数据类型1.2 变量的数据类型1.3 数字类型的分类2简单数据类型2.1 简单数据类型(基本数据类型)2.2 数字型Number1 数字型进制2 数字型范围(了解)3 数字型三个特殊值(了解)4 isNaN()2.3 字符串型String补充数据类型1 数据类型简介1.1 为什么需要数据类型在计算机中, 不同的数据所需占用的存储空间是不同的, 为了便于把数据分成所需内存大小不同的数据, 充分利用存储空间, 于是定义了不同的数据类型。1.2原创 2022-02-27 22:08:44 · 640 阅读 · 0 评论 -
web前端学习526-534(变量概述,变量的使用,变量语法扩展,变量命名规范,推荐Diagram Designer)
文章目录1 变量概述1.1 什么是变量2 变量的使用1 声明变量2 赋值3 变量的初始化案例:变量的使用3 变量语法扩展1 更新变量2 同时声明多个变量3 声明变量特殊情况4 变量命名规范案例:交换两个变量值5 小结推荐之前有个程序是弹出一个填密码的框,然后填写的数据要保存,可以用变量这个方法1 变量概述1.1 什么是变量白话:变量就是一个装东西的盒子。通俗:变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。本质:变量是程序在内存中申请的一块用来存放数据的空间类似酒店的原创 2022-02-27 14:53:30 · 438 阅读 · 0 评论 -
web前端学习519-525(JavaScript历史,JavaScript是什么,作用,js 的组成,行内式JS,内嵌JS,外部JS,JavaScript注释,输入输出语句)
文章目录1 初始 JavaScript1.1 JavaScript历史1.2 JavaScript(简称js) 是什么1.3 JavaScript 的作用1.4 HTML/CSS/JS的关系1.5 浏览器执行JS简介1.5 JS的组成1 ECMAScript2 DOM---文档对象模型3 BOM---浏览器对象模型1.6 JS初体验1 行内式 JS (简单了解,特殊情况才使用)2 内嵌 JS(常用)3 外部JS文件(常用代码量比较大的情况)2 JavaScript注释3 JavaScript输入输出语句原创 2022-02-25 22:30:08 · 547 阅读 · 0 评论 -
web前端学习162-164(案例2:快报模块---品优购快报)
文章目录3. 综合案例案例2:快报模块分析布局使用到的小知识点及技巧新知识点:去掉li前面的项目符号(小圆点)代码块3. 综合案例案例2:快报模块案例样式:品优购快报分析布局注意品优购快报下面的那一条线:上面的盒子只给下边框,然后放到最大的盒子中最大的盒子用div大盒子里面上面的盒子标题用h3下面的盒子用无序列表ul,里面包含很多个小li使用到的小知识点及技巧垂直居中:让行高等于盒子高度;输入ul>li*5>a+enter键/tab得到<ul>原创 2022-01-21 10:52:52 · 1579 阅读 · 0 评论 -
web前端学习156-161(案例1:产品模块---小米手机产品)
文章目录3. 综合案例案例1:产品模块3. 综合案例案例1:产品模块分析一下:出现一个命名问题:我开始命名图片b2.png,.box b2 {}一直达不到效果,后来改成普通的英文名字img.png就可以了(为什么?我还没查,应该是命名规则问题)eg : 26-综合案例-产品模块.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me原创 2022-01-20 17:42:35 · 1025 阅读 · 0 评论 -
web前端学习155(ps基本操作---选区,取色)
文章目录2. PS基本操作2. PS基本操作因为网页美工大部分效果图都是利用PS ( Photoshop )来做的,所以以后我们大部分切图工作都是在PS里面完成。文件—>打开:可以打开我们要测量的图片Ctrl+R:可以打开标尺,或者视图—>标尺右击标尺,把里面的单位改为像素**Ctrl+加号(+)**可以放大视图,**Ctrl+ 减号(-)**可以缩小视图按住空格键,鼠标可以变成小手,拖动PS视图用选区拖动 可以测量大小选区操作:(可以得到像素,高度,宽度)取色操作:(原创 2022-01-20 11:55:49 · 364 阅读 · 0 评论 -
web前端学习149-154(盒子模型---外边距,外边距应用,外边距合并,清除内外边距)
文章目录1 盒子模型1.7 外边距(margin)1.7 外边距典型应用1.8 外边距合并1.8.1 相邻块元索垂直外边距的合并1.8.2 嵌套块元素垂直外边距的塌陷1.9 清除内外边距1 盒子模型1.7 外边距(margin)margin属性用于设置外边距,即控制盒子和盒子之间的距离。属性作用margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距margin简写方式代表的意义跟原创 2022-01-20 11:30:42 · 1497 阅读 · 0 评论 -
web前端学习145-148(盒子模型---案例:新浪导航案例-padding影响盒子好处,小米导航案例修改-padding影响盒子大小计算)
文章目录1 盒子模型案例:新浪导航案例-padding影响盒子好处案例: 小米导航案例修改-padding影响盒子大小计算1 盒子模型案例:新浪导航案例-padding影响盒子好处padding内边距可以撑开盒子,我们可以做非常巧妙的运用因为每个导航栏里面的字数不一样多,我们可以不用给每个盒 子宽度了,直接给padding最合适直接给每个盒子一个宽度不合理,因为每个盒子里面字数不同,会导致字与盒子间距不同,显得不合理。如果给每个盒子左右相等内边距,就会合理一些。相关取值:(之后学ps学测量原创 2022-01-16 13:17:17 · 661 阅读 · 0 评论 -
web前端学习135-144(盒子模型---网页布局,盒子模型组成,边框,表格细线边框,盒子实际大小,内边距)
文章目录盒子模型1. 盒子模型1.1 看透网页布局的本质1.2 盒子模型(Box Model)组成1.3 边框(border)1.4 表格的细线边框1.5 边框会影响盒子的实际大小1.6 内边距(padding)盒子模型能够准确阐述盒子模型的4个组成部分能够利用边框复合写法给元素添加边框能够计算盒子的实际大小能够利用盒子模型布局模块案例能够给盒子设置圆角边框能够给盒子添加阴影能够给文字添加阴影1. 盒子模型页面布局要学习三大核心,盒子模型,浮动和定位学习好盒子模型能非常好的帮助我们布原创 2022-01-16 11:04:30 · 1483 阅读 · 0 评论 -
web前端学习128-134(CSS三大特性---层叠性,继承性,优先级)
文章目录1 CSS的三大特性1.1 层叠性1.2 继承性1.3 优先级1 CSS的三大特性CSS有三个非常重要的三个特性︰层叠性、继承性、优先级。1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会**覆盖(层叠)**另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠eg : 01-层叠性.html<!DOCTYPE html><html lang="en">原创 2022-01-15 09:39:08 · 461 阅读 · 0 评论