摘要: babel是一个JavaScript编译器,babel官网:https://www.babeljs.cn/ babel运行环境基于node,所以需要安装node:https://nodejs.org/zh-cn/download/ 1.初始化项目的package.json,存储当前项目的信息:npm 阅读全文
posted @ 2021-01-16 18:20 向前走。 阅读(334) 评论(0) 推荐(0)
摘要: 一:类的声明 1.声明类,关键字class,constructor为构造函数 2.简单的类封装 二:静态方法与静态属性 静态方法与静态属性不会被类的实例所拥有,只能类自身调用 1.静态方法,用关键字static声明 2.静态属性,类.属性=值,只能给静态方法使用 三:getter、setter:在获 阅读全文
posted @ 2021-01-16 18:18 向前走。 阅读(66) 评论(0) 推荐(0)
摘要: 1.回调与Promise 回调依赖处理,十分不易于维护 用Promise链式处理, 1..then()为成功后走的分支,resolve为具体要求做的事事 2..catch为失败的分支 3..finally,不管是否成功,都会走此分支 4..all,把多个Promise实例包装成一个新的Promise 阅读全文
posted @ 2021-01-16 18:15 向前走。 阅读(84) 评论(0) 推荐(0)
摘要: 1.参数的默认值 2.扩展运算符 3.箭头函数 1.基础的箭头函数 2.函数体有多行代码 3.在箭头函数中,没有arguments参数 4.箭头函数中没有this 阅读全文
posted @ 2021-01-16 18:13 向前走。 阅读(71) 评论(0) 推荐(0)
摘要: 一:字符串扩展 1.模板字符串:`` 2.补全字符串:padStart、padEnd 3.repeat:重复 4.startsWith、endsWith:判断字符串的开头和结尾 5.includes:判断字符串中是否包含另一个字符串 二:for of 阅读全文
posted @ 2021-01-16 18:05 向前走。 阅读(66) 评论(0) 推荐(0)
摘要: 一:数组 扩展运算符:...,合并多个数组 交换变量 接收函数返回的多个值 二:对象 配合扩展运算符使用 合并对象 使用对象传入乱序的函数参数 获取函数的多个返回值 三:字符串 阅读全文
posted @ 2021-01-16 18:02 向前走。 阅读(81) 评论(0) 推荐(0)
摘要: 一:let let与var的区别 1.let声明的变量只在当前(块级)作用域内有效, 2.用let声明的变量不能被重复声明 3.let不存在变量提升,不会将let声明的变量提升到最前面 二:const声明的都是常量 1.声明时必须赋值,否则会报错 2.一旦声明,不能改变 阅读全文
posted @ 2021-01-16 18:01 向前走。 阅读(64) 评论(0) 推荐(0)
摘要: 实现效果 HTML <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="Total"> <div id="title"> 账户信息 </div> 阅读全文
posted @ 2021-01-16 17:59 向前走。 阅读(231) 评论(0) 推荐(0)
摘要: 实现效果:通过正则表达式进行校验、匹配、替换,点击常用的正则表达式时,直接使用 HTML CSS JS <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> dl, dd{p 阅读全文
posted @ 2021-01-16 17:58 向前走。 阅读(318) 评论(0) 推荐(0)
摘要: 1.校验QQ号 console.log(/^[1-9]\d{4,10}$/); // 严格控制5~11位console.log(/^[1-9]\d{4}$/); // 不小于5位即可 2.用户名 console.log(/^[\u4e00-\u9fa5a-zA-Z0-9_]{2,18}$/);con 阅读全文
posted @ 2021-01-16 17:57 向前走。 阅读(115) 评论(0) 推荐(0)
摘要: 1.search:返回匹配到的索引,没有匹配到则返回-1 2.match:非全局的情况下参会返回分组中匹配到的内容,全局匹配只能匹配到所有匹配到的字符 3.split:根据关键字切割 4.replace:替换字符串 阅读全文
posted @ 2021-01-16 17:55 向前走。 阅读(101) 评论(0) 推荐(0)
摘要: 一:首尾匹配 1.首匹配:^ 2.尾匹配:$ 3.案例:验证字符串为全数字 二:单体边界匹配 1.单词边界:\b 2.前瞻性匹配:指定单词后面元素的匹配 3.负向前瞻性:与前瞻性相反 阅读全文
posted @ 2021-01-16 17:54 向前走。 阅读(572) 评论(0) 推荐(0)
摘要: 1.选择,或:| 2.分组 3.引用,在正则中直接使用匹配到的数据 阅读全文
posted @ 2021-01-16 17:53 向前走。 阅读(187) 评论(0) 推荐(0)
摘要: 1.指定要匹配的个数:{个数} 2.指定要匹配的个数范围:{范围起,范围止} 3.大于等于,匹配至少一个,大于等于1:{1,},或者+ 4.匹配0次或1次:可以用?表示 5.匹配允许0次:* 6.综合应用 7.非贪婪的重复:? 8.使用案例 阅读全文
posted @ 2021-01-16 17:51 向前走。 阅读(440) 评论(0) 推荐(0)
摘要: 一:转义字符 1.反斜杠:\,当要匹配在正则中有特殊含义的字符时,需要转义 2.匹配反斜杠 3.换行:\n 二:字符类 1.[字符字符字符字符]:从第一个开始拿出来匹配,匹配到一个就停止匹配 2.取反:^ 3.范围:-,只能从小到大 4.以unicode中的中文字符范围匹配中文字符 三:别名 1.条 阅读全文
posted @ 2021-01-16 17:49 向前走。 阅读(1703) 评论(0) 推荐(0)
摘要: 一:创建正则表达式的两种方式 1.字面量 2.构造函数 二:模式修饰符 i:ignoreCase:忽略大小写 g:global:全局匹配 m:multiline:多行匹配 模式匹配可以混合使用,不区分顺序: 阅读全文
posted @ 2021-01-16 17:48 向前走。 阅读(271) 评论(0) 推荐(0)
摘要: HTML和CSS实现 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{background: #eee} #calculator{margin: 100px 阅读全文
posted @ 2021-01-16 17:46 向前走。 阅读(245) 评论(0) 推荐(0)
摘要: 一:history对象:保存了用户在浏览器中访问页面的历史记录,从浏览器打开的时候算起 1.back和go back:回到历史记录的上一步,和浏览器的后退按钮一致 go:去到历史记录的指定条记录,负数为后退 back()和go(-1)效果一致 2.forward和go forward:回到历史记录的 阅读全文
posted @ 2021-01-16 17:44 向前走。 阅读(150) 评论(0) 推荐(0)
摘要: location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能,它既是window对象的属性,也是document对象的属性 1.href:返回当前加载页面的完整url,同时,也可以设置url,此时加载的url会在浏览器的历史中生成一条浏览记录,可以通过浏览器回退按钮退回 2.ha 阅读全文
posted @ 2021-01-16 17:43 向前走。 阅读(116) 评论(0) 推荐(0)
摘要: BOM:browser object model,浏览器对象模型 window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象 1.所有的全局变量和全局方法都被归在window对象上 2 阅读全文
posted @ 2021-01-16 17:41 向前走。 阅读(126) 评论(0) 推荐(0)
摘要: UI事件load:页面所有加载后触发resize:窗口大小发生变化时触发foucs:获得焦点时触发(不支持冒泡)foucsin:获得焦点时触发(支持冒泡)blur:失去焦点时触发foucsout:失去焦点时触发change:域的内容改变时发生,一般用于select、checkbox、radiosub 阅读全文
posted @ 2021-01-16 17:40 向前走。 阅读(268) 评论(0) 推荐(0)
摘要: 1.type:事件类型 根据事件类型,执行不同的js代码 <body> <button id="btn">点击按钮</button> <script> var btn = document.getElementById('btn'); var func = function (event){ con 阅读全文
posted @ 2021-01-16 17:39 向前走。 阅读(594) 评论(0) 推荐(0)
摘要: 一:事件周期 解释器创建一个event对象后,会按如需爱过程将其在HTML元素间进行传播 第一阶段:事件捕获,事件对象延DOM树向下传播 第二阶段:目标触发,运行事件监听函数 第三阶段:事件冒泡,事件延DOM树向上传播 二:事件冒泡:直系亲属树结构中,点击某个元素,亲属树上的长辈元素元素方式添加了事 阅读全文
posted @ 2021-01-16 17:38 向前走。 阅读(126) 评论(0) 推荐(0)
摘要: 事件:可以被JavaScript侦测到的行为,就是当用户与web页面进行某些交互时,解释器就会创建响应的event对象以描述事件信息 示例,监听点击事件 一:事件定义的三种方式 方式一:直接在HTML中定义元素的事件相关属性,此方式违反了 内容与行为分离 的原则,应该尽量少用 方式二:DOM0级事件 阅读全文
posted @ 2021-01-16 17:37 向前走。 阅读(384) 评论(0) 推荐(0)
摘要: onkeydown:按下键盘任意按键时触发onkeypress:按下键盘任意按键时触发(只响应字母与数字符号)onkeyup:松开按键时触发keyCode:返回onkeydown、onkeypress、onkeyup事件触发的键值的字符代码,或键的代码 阅读全文
posted @ 2021-01-16 17:35 向前走。 阅读(146) 评论(0) 推荐(0)
摘要: 事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间 1.HTML事件:直接在HTML元素标签内添加事件,执行脚本 2.DOM0级事件:ele.事件 = 执行脚本,在DOM对象上绑定事件,执行脚本可以是一个匿名函数,也可以是一个函数的调用 3.鼠标事件类型: onload:页面加载时触发onclic 阅读全文
posted @ 2021-01-16 17:34 向前走。 阅读(700) 评论(0) 推荐(0)
摘要: 一:包含空白节点的属性 获取第一个子节点,head 获取第二个子节点,body 默认情况下,会将标签之间的空格或者换行也作为一个节点 递归获取节点结构 二:不包含空白节点的属性,类数组对象 nodeList是一种类数组对象,用于保存一组有序的节点,只是类数组不是真正的数组,不具备数组的内置方法 阅读全文
posted @ 2021-01-16 17:32 向前走。 阅读(171) 评论(0) 推荐(0)
摘要: 一:document: 1.write:写入节点内容 二:create系列创建节点 1.document.createElement():创建标签节点 2.document.createTextNode():创建文本节点 3.document.createDocumentFragment():创建文 阅读全文
posted @ 2021-01-16 17:31 向前走。 阅读(397) 评论(0) 推荐(0)
摘要: 一:获取时间 1.创建时间对象:new Date(); 不传参的情况下,返回当前日期的对象 2.getFullYear:返回4位数的年份 3.getMonth:返回日期中的月份,返回值为0-11 4.getDate:返回月份中的天数 5.getDay:返回星期,值为0-6 6.getHours:返回 阅读全文
posted @ 2021-01-16 17:28 向前走。 阅读(249) 评论(0) 推荐(0)
摘要: 1.min:一组数据中的最小值 2.max:一组数据中的最大值 3.ceil:返回大于给定数字的最小整数(向上取整) 4.floor:返回给定数字的整数部分 5.round:将给定数字四舍五入为整数 6.abs:取给定数字的绝对值 7.random:生成0~1之间的随机数 阅读全文
posted @ 2021-01-16 17:27 向前走。 阅读(72) 评论(0) 推荐(0)
摘要: 1. string[index]:取出索引位置的字符串 2.string.charAt(index):返回字符串中的index位置的字符本身 3.string.charCodeAt(index):返回字符串中的index位置的字符的编码 4.string.indexOf(字符串):从一个字符串搜索给 阅读全文
posted @ 2021-01-16 17:25 向前走。 阅读(245) 评论(0) 推荐(0)
摘要: 1.创建数组: 1.new Arra() 2.直接放中括号里面 2.从数组取值,索引,从0开始 3.给数组赋值 4.数组长度,array.lenth 通过设置长度,移除数组中长度之后的数据 5.数组遍历 数组的方法: 1.push,往数组的最后顺序的添加对象 2.unshift:往数组的最前面加数据 阅读全文
posted @ 2021-01-16 17:22 向前走。 阅读(410) 评论(0) 推荐(0)
摘要: 1.函数的定义:使用function声明,后面跟一组参数以及函数体: function funcName(){ // 函数逻辑} 2.调用:函数名() 3.带参数的函数 4.函数的返回值 5.arguments参数:所有参数接收都是使用arguments列表来管理 6.案例 求任意一组数的平均值 阅读全文
posted @ 2021-01-16 17:20 向前走。 阅读(47) 评论(0) 推荐(0)
摘要: 一:分支语句 1.if语句 1.1.if(){代码块}; 1.2.if(){代码块1}else{代码块2}; 1.3.if(){代码块1}else if{代码块2}···esle{代码块3}; if嵌套 2.switch 二:循环语句 1.for for嵌套 2.for in 3.while,先判断 阅读全文
posted @ 2021-01-16 17:14 向前走。 阅读(120) 评论(0) 推荐(0)
摘要: 一:算数操作符 加:+ 减:- 乘:* 除:/ 取余:% 递增:++ 递减:-- 二:赋值操作符 简单赋值:= 复合赋值: 加等:+= 减等:-= 乘等:*= 除等:/= 余等:%= 三:比较操作符,返回布尔值 >、 <、 >=、 <=、 ==(相等,只比较值是否相等)、 (全等,比较值的同时,比较 阅读全文
posted @ 2021-01-16 17:12 向前走。 阅读(72) 评论(0) 推荐(0)
摘要: typeof:检测变量类型,返回值为string类型的数据类型 一:undefined:undefined类型只有一个值,即特殊的undefined,一般来说,不存在显式的把一个 变量设置为undefined的情况 二:null:表示一个空的指针对象,如果定义的变量准备在将来用于保存对象,那么最好将 阅读全文
posted @ 2021-01-16 17:09 向前走。 阅读(74) 评论(0) 推荐(0)
摘要: 1.变量的声明(使用var为局部变量,否则为全局变量): 声明局部变量需要使用var操作符:var 变量名 2.声明变量时赋值:var 变量名 = 值 3.声明后赋值 4.一次声明多个变量 阅读全文
posted @ 2021-01-16 17:06 向前走。 阅读(115) 评论(0) 推荐(0)
摘要: 一:@font-face的语法规则 @font-face { font-family: ''; /* 字体名称 */ src: <source>[format]; /* 字体存放路径,可多个 */} 二:@font-face的取值说明 1.font-family:自定义的字体名称,将被引用到web元 阅读全文
posted @ 2021-01-16 16:57 向前走。 阅读(275) 评论(0) 推荐(0)
摘要: 一:文本 1.文本阴影:test-shadow, h-shadow(水平偏移,负数为往左)、v-shadow(垂直偏移,负数为往右)、blur(模糊距离,值越大越模糊)、color(颜色) 2.文本轮廓(任何主流浏览器都不兼容此属性):text-outline 二:换行 1.文本自动换行:word- 阅读全文
posted @ 2021-01-16 16:48 向前走。 阅读(131) 评论(0) 推荐(0)
摘要: 渐变可以在两个或多个指定的颜色之间显示平稳的过渡 一:线性渐变:是沿着一根轴线改变颜色,从起点到终点颜色进行属性渐变(从一边拉向另一边) background: linear-gradient(direction, color-stop1, color-stop2, ...) 1.线性渐变-从上到下 阅读全文
posted @ 2021-01-16 16:44 向前走。 阅读(143) 评论(0) 推荐(0)
摘要: 一:背景图像区域: background-clip:指定背景绘制区域 border-box:背景被剪裁到边框盒 padding-box:背景被剪裁到内边距框 content-box:背景被剪裁到内容框 content-box padding-box border-box <!DOCTYPE html 阅读全文
posted @ 2021-01-16 16:42 向前走。 阅读(116) 评论(0) 推荐(0)
摘要: 一:圆角 border-radius属性:一个最多可指定四个border-*-radius属性的复合属性,这个属性允许为元素添加圆角边框,多个值的 时候,从左上角开始,顺时针 单个属性指定: border-top-left-radius:左上角的弧度 boder-top-right-radius:右 阅读全文
posted @ 2021-01-16 16:37 向前走。 阅读(289) 评论(0) 推荐(0)
摘要: CSS伪元素用于向某些选择器设置特殊效果 语法格式:元素::伪元素(element::pseudo-element) 1.first-line:根据first-line伪元素的样式对element元素的第一行文本进行格式化,first-line伪元素只能用于块级元素 2.first-letter:用 阅读全文
posted @ 2021-01-16 16:31 向前走。 阅读(167) 评论(0) 推荐(0)
摘要: 权重:当很多的规则被应用到某一个元素上时,权重是一个决定哪种规则生效,或者是优先执行的过程 权重等级与权值: 行内样式(1000) > ID选择器(100) > 类、属性选择器和伪类选择器(10) > 元素和伪元素(1) > *(0) CSS权重规则 1.包含更高权重选择器的一条规则拥有更高的权重 阅读全文
posted @ 2021-01-16 16:27 向前走。 阅读(141) 评论(0) 推荐(0)
摘要: nth选择器:也称CSS3结构类 选择器方法: first-child、last-child、nth-child()、nth-last-child()、nth-of-type()、nth-last-of-type()、first-of-type、last-of-type、only-child、onl 阅读全文
posted @ 2021-01-16 16:24 向前走。 阅读(996) 评论(0) 推荐(0)
摘要: UI元素状态伪类有: enabled(默认):输入框可输入的时候 disabled:输入框不可输入的时候 checked:选项被选中的时候 阅读全文
posted @ 2021-01-16 16:15 向前走。 阅读(130) 评论(0) 推荐(0)
摘要: 动态伪类并不存在于html中,只有当用户和网站交互的时候才能体现出来 1.锚点伪类 :link:超链接的展示效果 :visited:访问过的链接 2.用户行为伪类 :hover:鼠标移动到此元素时的效果 :active:选中的时候 :focus:表单或输入框聚焦 focus 阅读全文
posted @ 2021-01-16 16:13 向前走。 阅读(148) 评论(0) 推荐(0)
摘要: 使用CSS3属性选择器,可以只指定元素的某个属性,或者还可以同时指定元素的某个属性和其对应的值 以a标签为例 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 选中 阅读全文
posted @ 2021-01-16 16:01 向前走。 阅读(172) 评论(0) 推荐(0)
摘要: 1.子选择器 概念:子选择器只能选择某元素的子元素 语法:父元素 > 子元素 2.兄弟选择器 概念:相邻兄弟选择器可以选择紧接在另一元素后的元素,而且阿门具有一个相同的父元素 语法格式:元素 + 兄弟相邻元素 3.通用兄弟选择器 概念:选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素 语法 阅读全文
posted @ 2021-01-16 15:56 向前走。 阅读(153) 评论(0) 推荐(0)
摘要: HTML5新布局的意义: 1.语义化:HTML5可以让更多语义化的结构代码标签代替大量的无异议的div标签 1.这种语义化的特性提升了网页的质量和语义 2.减少了以前用于CSS调用class和id属性 2.对搜索引擎的友好:新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好 HTML5之前的布 阅读全文
posted @ 2021-01-16 15:52 向前走。 阅读(2039) 评论(0) 推荐(0)
摘要: 一:链接属性 1.size:<link rel="stylesheet" href="" sizes="16x16"> 2.target:<base href="" target="_blank"> 3.超链接(a标签): 1.a.media:表示对设备进行优化, handheld对“手持”设备进行 阅读全文
posted @ 2021-01-16 15:45 向前走。 阅读(103) 评论(0) 推荐(0)
摘要: 1.autocomplete:作用于form或input域,点击时自动弹出历时输入过的数据,点击可快速输入 on:打开此功能 off:关闭此功能 在form上使用时,对整个form有效,但是form下的inout标签可以单独声明 2.autofocus:页面初始化时,自动聚焦到使用此属性的标签 3. 阅读全文
posted @ 2021-01-16 15:37 向前走。 阅读(237) 评论(0) 推荐(0)
摘要: 1.email:邮件类型 2.url:统一资源定位符 3.tel:电话号码 4.number:数字类型,只能输入数字相关:0123456789-+.e 5.date:日期,年月日 6.month,月份,年月 7.week:第多少周 8.time:时分 9.datetime-local,年月日时分 1 阅读全文
posted @ 2021-01-16 15:34 向前走。 阅读(126) 评论(0) 推荐(0)
摘要: 一:删除的标签: 1.纯表现的元素:Basefont、big、center、font、s、strike、tt、u 2.对可用性产生负面影响的元素:frame、frameset、noframes 3.产生混淆的元素:acronym、applet、isindex、dir 二:重定义标签(显示不变,只是表 阅读全文
posted @ 2021-01-16 15:26 向前走。 阅读(237) 评论(0) 推荐(0)
摘要: 一:注释标签 ruby:标记定义注释或音标 rt:标记定义对ruby的注释内容文本 rp:告诉不支持ruby元素的浏览器如何去显示,rp标签不要放在rt标签内 使用rp标签做兼容 <p>这个字念<ruby>夼<rt>Kuang</rt></ruby></p><br><br><br><br><!--对 阅读全文
posted @ 2021-01-16 15:19 向前走。 阅读(184) 评论(0) 推荐(0)
摘要: 一:状态标签 1.meter:状态标签(实时状态显示:气压、气温) value:当前值 min:最小值,当真实值小于此值时,用此值 max:最大值,当真实值大于此值时,用此值 low:最小安全值,小于此值时报警 high:最大安全值,大于此值时报警 optimum:最优值 当不指定属性值,只有val 阅读全文
posted @ 2021-01-16 15:16 向前走。 阅读(259) 评论(0) 推荐(0)
摘要: 多媒体标签的出现意味着富媒体的发展及支持不使用插件的情况下即可操作媒体文件,极大的提升了用户体验 三类多媒体资源: video:标记定义一个视频 audio:标记定义音频内容 source:标记定义媒体资源 1.audio标签 autopaly:自动播放 loop:循环次数:-1为无限循环 cont 阅读全文
posted @ 2021-01-16 15:04 向前走。 阅读(295) 评论(0) 推荐(0)
摘要: 一:HTML5新增的10个结构标签 article:标记定义一篇文章 header:标记定义一个页面或者区域的头部 nav:标记定义导航链接 section:标记定义一个区域 aside:标记定义页面内容部分的侧边栏,常与section配合使用、 hgroup:标记定义文件中一个区块的相关信息 fi 阅读全文
posted @ 2021-01-16 14:53 向前走。 阅读(419) 评论(0) 推荐(0)
摘要: 页面效果 页面结构 一:头部,一个logo,一个菜单 CSS写到外部文件 引用CSS文件 效果 /* 清除默认样式 */*{padding: 0;margin: 0;}/* 头部 */.header{width: 100%;height: 100px;}/* logo */.header img{ 阅读全文
posted @ 2021-01-16 14:47 向前走。 阅读(196) 评论(0) 推荐(0)
摘要: 一:混合布局 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{margin: 0;padding: 0;color: #fff;text-align: cen 阅读全文
posted @ 2021-01-16 14:45 向前走。 阅读(187) 评论(0) 推荐(0)
摘要: 一:两列布局 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*初始化页面样式*/ body{margin: 0;padding: 0;color: #fff} /* 阅读全文
posted @ 2021-01-16 14:43 向前走。 阅读(151) 评论(0) 推荐(0)
摘要: 一:单行布局 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*清除和初始化body样式*/ body{ margin: 0; padding: 0; color: 阅读全文
posted @ 2021-01-16 14:40 向前走。 阅读(153) 评论(0) 推荐(0)
摘要: 一:static:静态定位常规定位/自然定位 二:relative:相对定位 三:absolute:绝对定位 四:fixed:固定定位 五:sticky:磁贴定位/粘性定位/吸附定位 阅读全文
posted @ 2021-01-16 14:38 向前走。 阅读(88) 评论(0) 推荐(0)
摘要: 用浮动实现网页的导航和布局 header部分 主体和footer部分: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 重置样式 */ *{margin: 0;p 阅读全文
posted @ 2021-01-16 14:36 向前走。 阅读(743) 评论(0) 推荐(0)
摘要: CSS定位机制: 1.普通流(标准流) 2.浮动 3.绝对定位 一:普通流:默认状态,元素自动从左往右或者从上往下 块元素: 1.独占一行 2.可以设置宽、高 3.如果不设置宽,默认为容器的100% 4.常见的块级元素标签:div、p、h1~h6、ul、ol、li、dl、dt、dd 行内元素 1.与 阅读全文
posted @ 2021-01-16 14:34 向前走。 阅读(111) 评论(0) 推荐(0)
摘要: 一:设置列表的标记样式类型 无序列表 有序列表 二:使用图片设置列表项的标记:list-style-image 三:列表项标记的位置:list-style-position 四:列表样式缩写:list-style 阅读全文
posted @ 2021-01-16 14:32 向前走。 阅读(268) 评论(0) 推荐(0)
摘要: 一:背景样式 1.背景颜色:background-color 2.背景图片:background-image: 3.设置背景图片重复:background-repeat 4.背景图片显示方式:background-attachment 5.背景图片定位:background-position 6.背 阅读全文
posted @ 2021-01-16 14:31 向前走。 阅读(118) 评论(0) 推荐(0)
摘要: 实现一个列表标签 一:初始化内容和样式 二:大盒子,加样式,左右居中 三:标题块 四:内容块 五:去除最后一行内容下的横线,处理span标签的字体 阅读全文
posted @ 2021-01-16 14:29 向前走。 阅读(169) 评论(0) 推荐(0)
摘要: 一:HTML元素分类: 二:display属性 处理元素之间的缝隙 解决方法1:行内标签标签之间,去掉换行或空格 解决方法2::块级元素外部添加一个父元素,并把字体设置为0,然后把子元素的字体放大 阅读全文
posted @ 2021-01-16 14:28 向前走。 阅读(177) 评论(0) 推荐(0)
摘要: 外边距:margin 二:缩写 三:声明margin属性,覆盖原有默认的margin属性 四:margin合并 五:标准盒子模型计算 计算方式 阅读全文
posted @ 2021-01-16 14:27 向前走。 阅读(147) 评论(0) 推荐(0)
摘要: padding内边距: 一:内边距属性 二:缩写: 阅读全文
posted @ 2021-01-16 14:26 向前走。 阅读(166) 评论(0) 推荐(0)
摘要: 盒子模型中的边框: 边框拥有的属性 边框样式border-style可用的值: 一:对边框四个方向都有效 加边框样式 二:设置边框的4个方向的属性(上下左右): 三:缩写: 阅读全文
posted @ 2021-01-16 14:25 向前走。 阅读(253) 评论(0) 推荐(0)