随笔分类 - HTML/CSS/JS基础
实现基本的常用的网页效果。js部分用到原生js，不依赖任何三方库。
摘要： 1. Navigation 1.1 DNS Lookup 导航的第一步就是 寻找资源的定位，例如当你访问 https://example.com ， 该 HTML 页面被 serve 在IP地址为 93.184.216.34 的服务器上。 如果你首次访问这个站点，那么必定会发生一次 DNS 查找
阅读全文
摘要：How does cookie works? As we know that a cookie is a small and non-edible plain text file. It is stored in the browse, to be more precise, stored in t
阅读全文
摘要：## 浏览器如何工作？ 《前端性能优化 原理，工具和方法 - 邓德瑞》
阅读全文
摘要：1.准备工作 准备一个最简单的页面如上图左，其页面结构仅两层，如右所示。 2. 分析 本demo的目的在于探究在开发任务中，页面拖动而触发某些特定行为的简单实现。 2.1 页面元素 上拉加载，下拉刷新也好，都是在页面拖动行为到一定时机，触发了某个事件的执行。 所以，只关心上拉和下拉这两个临界关系就好
阅读全文
摘要：有三个主要的浏览器API用于实现复制内容到剪切板操作： Async Clipboard API [navigator.clipboard.writeText] 在Chrome66（2018/08）中被支持，是一种较新的方案。 访问时异步执行，且支持Promise，可以编写安全用户提示（如果显示），且
阅读全文
摘要：The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, wh
阅读全文
摘要：今天在学习clip-path属性的时候，遇到了<svg>元素的viewBox这个属性。网上了解了下，发现一开始不好理解，现在搞清楚了记录一下。由于直接定义，反而很模糊，所以这里先做一些实验性的观察，再做描述。 预备代码： <body> <svg height="200" width="200" vi
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：4.规范使用 <form>元素用于组织所有表单部件（也称为控件或字段），负责告诉浏览器把数据提交到哪里，方法是在action属性中提供一个URL。加入你只是想在客户端使用JavaScript操作表单，那么只要在action属性中指定一个井号**（#）**即可。 ⚠️注意：HTML5新增了一种机制，支
阅读全文
摘要：VUE 列表项目置顶过渡动画 jsfiddle_demo https://jsfiddle.net/jaycethanks/b9n6pch8/1/
阅读全文
摘要：Flexbox 网页布局完全详解 前言 以前网页布局，有时候会使用表格，float等方式去处理网页的布局，但是，这些方式在被发明出来的时候，都不是用于网页排版用的， 而Flexbox就是第一套专注于网页布局的css方法。本文总结自CodingStartUP-Steven，宝藏UP主。 博客园的mar
阅读全文
摘要：CSS position属性 属性是HTML中非常重要的一个属性，它有五个属性值，分别是： 、`absolute relative fixed sticky`。 HTML里面所有元素的position默认值都是static 。 ==top、 left、 right、 bottom 设定值不会对pos
阅读全文
摘要：CSS基础Block，Inline与Inline block HTML元素，大致上分为两种，一种是block，另一种是inline。block是区块的意思，例如一个文字的段落，就可以理解为一个区块，而inline中文译作“内联”。 例如一个段落中的一个词语，就是一个内联元素。 block元素 blo
阅读全文
摘要：先言： 通常我们将一个元素左右居中的方式是一件很容易的事： 当元素的 属性是 或者 ，即使成为行内（块）元素的时候，用 就可以将它左右居中了。 如果元素的 属性是 的时候，将 和`margin right auto`就可以将该元素左右居中了。 但是，上下居中就没有那么容易了，本文将总结三种常用的上下
阅读全文
摘要：先言：本文基于大佬 Steven的视频教程的个人总结。 "b站链接" 。大佬有很多很棒的总结，真的少见。 CSS 中最常用到的五个尺寸单位： "px" "em" "rem" "vw&vh" "vmin&vmax" "更多" px px, 即pixels， 像素。 这是最为常用的一种css单位，不加赘
阅读全文
摘要：CSS常用selector选择器列举总结 1.id选择器 2.class选择器 3.通配符选择器 ，匹配所有元素。 4.tag标签选择器 5.空格 指的是子节点选择（也是后代选择器） 例如 指的是具有类名为class1 的元素下有着类名为class2的子元素。 6.无空格并写指的是同时满足条件的元素
阅读全文
摘要：Table Of Content "准备" "基本思路" "实现" 我们期望实现这样的效果： 准备 这是一个基础的准备，仅仅含有html/css文件。 "下载link" 这是我们学习制作一个sidebar页面之前的准备，我们接下来只关注js部分的实现。 在以上准备文件中，如果你下载完毕，双击inde
阅读全文
浙公网安备 33010602011771号