2022 年 4月 27 日随笔档案 - RicardoSimple

Dom事件

摘要： DOM事件 DOM绑定事件之前接触的事件： // 监听Input输入事件 dom.addEventListener("input", function () {}); // 监听鼠标放置，移动事件 dom.addEventListener("mouseover", function () {}); 阅读全文

posted @ 2022-04-27 21:14 RicardoSimple 阅读(27) 评论(0) 推荐(0) 编辑

Dom鼠标移动事件

摘要：鼠标移动事件分类： mousemove这个是鼠标移动事件，比较简单 mouseenter/mouseleave这个是鼠标进入和离开，但是仅仅作用于当前DOM节点，不会作用于后代节点 mouseover/mouseout也是鼠标进入和离开事件，但是与enter/leave不同，此事件除了作用于当前节阅读全文

posted @ 2022-04-27 21:14 RicardoSimple 阅读(236) 评论(0) 推荐(0) 编辑

JSDom

摘要： DOM 文档对象模型(DOM)可以将web页面和脚本或编程语言连接起来 1. 这里的web页面，也就是我们之前用HTML和CSS绘制的页面，也称作为文档 2. 脚本或编程语言。是因为DOM是一种规范，或者是一种约定，只要遵循这个约定，那么无论是JS，.还是python，或者java都可以被联系起来阅读全文

posted @ 2022-04-27 21:13 RicardoSimple 阅读(126) 评论(0) 推荐(0) 编辑

Dom操作

摘要： DOM操作 DOM样式修改需要哪些技术： 1. 如何使用JS创建节点 2. 如何设置节点的样式、属性？ 3. 如何在已存在的节点内部添加子节点 4. 如何清空节点内部子节点达到上述效果 html <!DOCTYPE html> <head> <meta charset="utf-8" /> <l 阅读全文

posted @ 2022-04-27 21:13 RicardoSimple 阅读(27) 评论(0) 推荐(0) 编辑

JSBom

摘要： BOM 页面交互过程 Bom 我们知道为了让浏览器显示出来，必须要在浏览器中键入网址，敲击回车，浏览器能自动帮我们渲染网页内容，和浏览器渲染有关的对象，我们叫做浏览器对象模型(BOM) BOM是由一系列相关对象构成，每个对象都提供了很多方法和属性但BOM缺乏标准，BOM属于约定俗成，比如chrom 阅读全文

posted @ 2022-04-27 21:12 RicardoSimple 阅读(36) 评论(0) 推荐(0) 编辑

JS对象

摘要：对象是JS的核心概念，也是最重要的数据结构什么是对象简单说，对象就是一组键值对(key-value)的集合，是一种无序的复合数据集合大括号：定义一个对象 person：定义的对象被赋值给person，则person指向这个对象 name:'henry'/age=18:键值对，键值用:分开一个阅读全文

posted @ 2022-04-27 21:11 RicardoSimple 阅读(65) 评论(0) 推荐(0) 编辑

JS函数

摘要：函数是一段可以反复调用的代码块 JS中，函数是头等对象(first-class)也可以称其方法获取随机数 Math.random() const num = Math.random(); 这是JS的内置函数，Math是一个内置对象，用于执行数学任务这行代码可以获得0到1(不包括1)之间的随机值阅读全文

posted @ 2022-04-27 21:10 RicardoSimple 阅读(27) 评论(0) 推荐(0) 编辑

JS基础

摘要：认识JavaScript 是一种专为网页设计的脚本语言 JavaScript主要由三部分组成核心（ECMAScript）文档对象模型（DOM）浏览器对象模型（BOM） js的书写位置与css类似，分为html内部和外部 JavaScript写在html内部使用标签可以将JavaScript 阅读全文

posted @ 2022-04-27 21:09 RicardoSimple 阅读(27) 评论(0) 推荐(0) 编辑

微博底部栏分析

摘要：微博底部栏的开发和副导航类似 justify-content: space-between; 主要使用flex的水平布局第二项是头像，宽度不一样 footer.footer { .item { // 将每一项的宽度设置为固定宽度 // px2rem是处理尺寸的自定义函数 width: px2rem 阅读全文

posted @ 2022-04-27 21:07 RicardoSimple 阅读(43) 评论(0) 推荐(0) 编辑

消息布局分析

摘要：可以划分为灰色的content和白色的padding，所有的微博都适用这个布局，不同的是content的内容 content部分被分为上中下三个部分 <div class="container"> <header></header> <main></main> <footer></footer> < 阅读全文

posted @ 2022-04-27 21:06 RicardoSimple 阅读(28) 评论(0) 推荐(0) 编辑

meta元素及各种单位

摘要：如果我们要做手机端上用的页面(H5),除了用媒体查询进行小屏幕设备的适配，还需要设置一些特别的内容，比如页面是否允许被用户缩放这里我们要用到<head>中的<meta>元素 meta元素 meta是一个自闭和元素，只有开始标签，没有结束标签对meta元素进行设置指的是通过标签属性进行设置 met 阅读全文

posted @ 2022-04-27 21:05 RicardoSimple 阅读(284) 评论(0) 推荐(0) 编辑

设计稿尺寸处理

摘要：实际的前端开发中，会根据设计稿的尺寸处理，而一般移动端设计稿是是基于iphone6设计的，宽度往往是750px 现在的高清屏一般的像素比是2，比如iphone6的实际可视区域宽度为375px，但能够显示750px，我们写样式代码时需要除以2才能用。但每个值都要处理后才能用，很麻烦 Sass自定义函阅读全文

posted @ 2022-04-27 21:05 RicardoSimple 阅读(273) 评论(0) 推荐(0) 编辑

响应式布局

摘要：响应式布局响应式布局就是一个网站能够兼容多个终端，而不是为了一个终端而做的一个特定的版本响应式布局不仅仅是页面在不同设备上的不同布局，在同一设备上调整浏览器宽度，同样可以看到页面的布局发生了变化要用到css3中的媒体查询@media 媒体查询基本语法： "screen":告知设备在打印页面时阅读全文

posted @ 2022-04-27 21:04 RicardoSimple 阅读(499) 评论(0) 推荐(0) 编辑

CSS预处理器

摘要： css预处理器 SCSS SASS sass是一款css的预编译器定义了一种新的编程语言，为css增加了一些编程的特性，开发者使用这种语言进行编码后，代码需要编译成css才能被浏览器理解 sass比css更像一门编程语言，它可以有函数，变量，控制语句，导入，嵌套等高级功能类似的css预编译器还有阅读全文

posted @ 2022-04-27 21:03 RicardoSimple 阅读(267) 评论(0) 推荐(0) 编辑

CSS装饰

摘要： css装饰 cursor 鼠标箭头的变化就是cursor实现的 <p>点击这里了解更多cursor性质</p> 添加方式： p{ cursor: pointer; } cursor的值很多，有：pointer，default，text，move，grab，zoom-in，zoom-out MDN c 阅读全文

posted @ 2022-04-27 21:02 RicardoSimple 阅读(36) 评论(0) 推荐(0) 编辑

CSS高级美化

摘要：单行文本超出省略在网页中我们经常看到文本内容溢出，用省略号代替剩余内容的情况正常情况下文字内容超过所给的范围宽度就会自动换行，但是我们不希望它换行，就涉及三个内容：强制不换行，元素内容溢出处理和文本溢出省略强制不换行 HTML5中推荐使用"white-space: nowrap"实现不换行阅读全文

posted @ 2022-04-27 21:02 RicardoSimple 阅读(55) 评论(0) 推荐(0) 编辑

CSS定位

摘要： css定位 position-static(默认定位) css的一个非常关键的属性-position，这个属性在css中用于定位dom元素，修改dom元素的布局 static是遵循默认的文档流，从上到下，从左到右除了这个static还有四个值 relative(相对定位) absolute(绝对定阅读全文

posted @ 2022-04-27 21:01 RicardoSimple 阅读(45) 评论(0) 推荐(0) 编辑

CSS背景颜色

摘要：普通的背景颜色就是直接设置渐变色这个按钮左边的颜色和右边的颜色就不一样、左边的色值: #95CA47 右边的色值为: #4DC891 background的新的值linear-gradient(线性渐变) 渐变类型，渐变方向，开始颜色，结束颜色每个值的含义渐变方向 to right/to 阅读全文

posted @ 2022-04-27 21:01 RicardoSimple 阅读(189) 评论(0) 推荐(0) 编辑

css进阶

摘要： html5/css3介绍 html5简而言之就是html的升级版语义化标签 html代码  <header>header</header>  <main>  <nav>nav</nav>  <section>s 阅读全文

posted @ 2022-04-27 21:00 RicardoSimple 阅读(54) 评论(0) 推荐(0) 编辑

CSS盒模型

摘要：盒模型 content 在页面中画出矩形的格子 div标签，许多标签都是在div标签的基础上改造的 div就是一个干净透彻的矩形，没有默认，没有margin，padding，border，content content div标签写出来是没有默认高度的，只有默认的宽度，和父标签宽度一样设置矩形的宽阅读全文

posted @ 2022-04-27 21:00 RicardoSimple 阅读(24) 评论(0) 推荐(0) 编辑

ricardo-simple

导航

公告