HTML+CSS
关注
分享
扫一扫
文章平均质量分 79
多云转晴ing
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
事件对象和事件冒泡、捕获机制
冒泡与捕获事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。再点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它；然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素；而冒泡与捕获恰恰相反：浏览器原创 2020-07-27 10:23:32 · 531 阅读 · 0 评论 -
四个好用的DOM API
1. classList.contains这个方法可以判断某个元素节点是否有某个 class 类名，返回布尔值。比如：// div 元素是否有 wrapper 类名div.classList.contains("wrapper"); 封装：function hasClassName(el, className){ return el.classList.contains(className);}node.contains除了 classList.contains 方法之外，还有原创 2020-07-25 10:20:51 · 354 阅读 · 0 评论 -
响应式设计技术概览
什么是响应式开发在移动互联网日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端设备上的展示和阅读。在响应式流行之前，通常的做法是对移动端单独开发一套特定的版本，但是，如果移动端设备越来越多的时候开发成本会比较大，因为需要做所有屏幕的适配。响应式开发的目的就是：一个网站能兼容多种终端。实现不同屏幕分辨率的终端上浏览网页时有不同的展示方式，通过响应式设计能使网站在不同终端上有更好的浏览阅读体验。响应式开发的技术媒体查询（@media）；bootstrap；CSS 单位（rem、vh、vw、e原创 2020-07-25 10:03:30 · 2057 阅读 · 0 评论 -
放大镜原理
在浏览各大网购网站时（淘宝、京东等），图片放大效果是常见的一个功能。实现思路鼠标移入小图片时，放大的图片区域会显示出来，同时小图片上有一个提示被放大的区域；当移出小图片时，放大的图片隐藏，提示区域也被隐藏；在移动过程中提示框也会跟着鼠标进行移动。相关技术鼠标事件；背景图片样式；元素的尺寸属性和数学计算；HTML 骨架<div id="main"> <div class="wrapper"> <!-- 小图和提示被放大的区域原创 2020-05-17 16:58:30 · 1104 阅读 · 0 评论 -
meta 标签知多少
meta 标签提供该页面的一些信息，比如针对搜索引擎和更新频度的描述和关键词，它还可以控制页面缓冲、响应式窗口等，定义 meta 标签有利于网站 SEO（有利于搜索引擎访问），对于响应式窗口也起着作用，因此 meta 标签是 HTML 中很重要的一个标签。在生成默认的 HTML 文档结构时，通常会有两个 meta 标签：<head> <meta charset="UTF...原创 2020-05-06 09:45:26 · 886 阅读 · 0 评论 -
浏览器特性
1. onload 事件图片可以绑定一个 onload 事件，表示当图片加载完成后才触发执行脚本。<body> <img src="./img/01.png" /> <script> let img = document.querySelector('img'); img.onload = functio...原创 2020-04-26 12:42:02 · 759 阅读 · 1 评论 -
HTML5 File API 使用入门
HTML5 File API在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控件。这个控件可以让我们能调出文件选择窗口然后读取这些文件的内容成为可能。<input type="file" id="file-ipt" name="file" accept=".jpg,.jpge,.gif,.png">上面代码就是一个 file DOM。它支持选择...原创 2019-10-20 09:21:34 · 586 阅读 · 0 评论 -
CSS三角和梯形
等边三角行：<html> <body> <div class="div1"> </div></body></html>css样式：先做成一个没有长和高的四边形：.div1原创 2018-05-01 13:41:05 · 554 阅读 · 0 评论