摘要：
html5从一开始就给开发者很多的期待，提供众多新的API，不用再想以前一样，为了实现某个功能写很多的代码。在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web端的js是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。而服务器呢，比 阅读全文
摘要：
表单一点击提交按钮(submit)必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页。 如下，可以看到一点击提交按钮，浏览器的刷新按钮闪了一下,如果想要阻止表单的默认提交事件，有以下几种方法： 1.将<input>标签内按钮类型从type="submit"修改为type 阅读全文
摘要：
向网页中嵌入视频 <video> 标签可以用于定义视频，且提供了播放、暂停、音量控件来控制视频。举个例子，像我们侠课岛网站上，课程视频播放，就是通过 <video> 标签来实现的。下面我们来看一下如何向网页中嵌入一个视频。 示例： 首先我们准备一个视频，例如一个 test.mp4，然后使用 <vid 阅读全文
摘要：
css为html标记语言提供了一种样式描述，定义了其中元素的显示方式。下面我们来看一下css如何设置文本超出几行显示省略号。 css设置超出几行显示省略号： 1、单行文本 使用text-overflow：ellipsis属性 text-overflow: clip|ellipsis|string; 阅读全文
摘要：
功能测试： 一、链接测试 链接是web应用系统的一个很重要的特征，主要是用于页面之间切换跳转：当发现页面显示内容与用户需求不一致时，就是一个bug。 链接测试：测试所有链接是否按指示的那样确实链接到了该链接的页面； 测试所链接的页面是否存在； 只有输入正确的url地址才能访问 1.链接是否按照既定指 阅读全文
摘要：
font-size:字体大小 说明 用于设置字号，属性的值推荐使用像素单位px或者em px是像素单位，em是相对单位 语法 {font-size:12px;} 注意 属性值为数值型时，必须给属性值加单位，属性值为0时除外。 单位还可以是1em ，根据父元素值来确定； font-family:字体 阅读全文
摘要：
一、什么是两列布局 两列布局分为两种，一种是左侧定宽、右侧自适应，另一种是两列都自适应（即左侧宽度由子元素决定，右侧补齐剩余空间）。在css面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能，下面将分别介绍实现方式。 二、左侧定宽、右侧自适应如何实现？ 1.双inline-block 原理： 阅读全文
摘要：
多语言版静态网页，通常都是先做一个语言的网页，比如中文版，或英文版，然后找人翻译成另一种语言，最后合作一起，上传到网页服务器。 这种方法，在后续的改动时，往往容易改了一个语言的网页、遗漏了另一个语言的网页更改；或者翻译多语言时，一不小心误删除了某个网页的某个部分，或者多键入了无关的字符，造成多个语言 阅读全文
摘要：
在之前某一个前端技术群里，有一个群友说他面试的时候遇到了一个问题，就是面试官让他用纯 css 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。 给出的初始结构如下： <style>body { padding: 2em; text-align: center;}.block { positi 阅读全文
摘要：
优秀的网站要对用户的互动做出反应。做到这一点的一个很好的方法就是对有人向下滚动你的页面做出反应。 除了视差组件和滚动事件外，添加响应式触摸的一种好方法是使元素在滚动视图时淡入。 在本技巧中，将介绍如何使用滚动事件和css转换在vue3中实现此功能。 这是我们将学习如何在本教程中进行构建的屏幕截图。 阅读全文
摘要：
生活中有很多事情是低效益，重复性。比如每天上某些网站，先登录再签到打卡，比如每隔一段时间清理回收站的文件等等。一个成熟的软件工程师应该想到用软件解决他。 对于这些简单的小任务，一般用脚本实现。比如Python脚本或者JavaScript脚本等等，不过还得装运行环境。如果能在电脑上直接用就好了，那么有 阅读全文
摘要：
本节我们学习 Less 中的嵌套，嵌套应该很容易理解，html 语言中就支持标签的嵌套。我们在使用 css 时，如果想要为多层嵌套的元素设置样式，要么给元素加上一个类选择器或ID选择器，要么使用后代选择器。例如： .xkd{ font-size: 14px; } .xkd p{ line-heigh 阅读全文
摘要：
每次滚动到元素时，都显示加载动画，如何添加？ 元素添加初始参数 以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。 添加初始数据，默认透明度0、左右分别移动100px。 //左侧容器 .item-leftContainer { opacity: 0; transform: translat 阅读全文
摘要：
现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的css :is() 和 :where() 伪类。 Chrome的实施仍然落后。 使用 :is() 减少重复 你可以使用 :is() 伪类来删除选择器列表中的重复项。 /* BEFORE */ .embed .save 阅读全文
摘要：
一 . 安装 在命令行中执行： 使用npm或者cnpm安装 npm install animate.css --save 或 cnpm install animate.css --save 使用yarn安装 yarn add animate.css 二. 引入 在main.js全局引入 import 阅读全文