03-JavaScript基础

JavaScript基础 1、JavaScript概述 W3C标准:网页主要由三部分组成 HTML:用来制作网页基础内容和基本结构 CSS:用来网页样式美化效果 JavaScript:用来制作数据验证,和用户交互 JavaScript概念 JavaScript是一门跨平台、面向对象的脚本语言,运行在 ...

02-CSS基础

CSS 基础 1、CSS介绍 CSS概念 Cascading Style Sheet层叠样式表,通过不同的样式可以让网页更漂亮,样式也可叠加得到最终的效果。CSS用于渲染html元素进行样式控制的语言 CSS作用 网页美化 HTML与CSS的区别 HTML:网页结构的创建 CSS:网页美化 2、CS ...

妙用 CSS 构建花式透视背景效果

本文将介绍一种巧用 background 配合 backdrop- filter 来构建有趣的透视背景效果的方式。 本技巧源自于一名群友的提问,如何构建如 ElementUI 文档的一种顶栏背景特效,看看效果: 仔细看,在页面的的滚动过程中,顶栏的背景不是白色的,也不是毛玻璃效果,而是能够将背景颗粒 ...

11-ElementUI

1、Element简介 Element是饿了么公司前端开发团队提供的一套基于Vue的网站组件库,用于快速构建网页 Element提供了很多组件(组成网页的部件)供我们使用。 官方网站 https://element.eleme.cn/#/zh-CN 2、快速入门 2.1、将相关的element-ui ...

【H5/CSS】表格、列表、表单标签

1. 表格标签 1.1主要作用 显示和展示数据美观、良好。 1.2基本语法 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> <table></table>用来定义表格的标签 <tr></tr>标签用于定义表格中的行,必须镶嵌在<table>< ...

使用CSS实现多种Noise噪点效果

在前端开发过程中,我们也有可能遇到噪点插画风格的设计稿,应用基础的前端开发知识,能不能实现噪点风格的样式呢,本文主要内容主要就是通过几个示例来实现几种噪点效果。本文包含的知识点包括:CSS 属性 mask 遮罩、SVG 滤镜 feTurbulence、CSS 属性 filter 滤镜、CSS 属性 ... ...

sass @extend(继承)指令详解

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。 通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。 普通CSS的实现 接下来以警告框为例进行讲,解4种类型 | 类型 | 说明 | | | | | info | 信息!请注意 ...

使用前端技术实现静态图片局部流动效果 ?

如果你有玩过 🎮 《王者荣耀》、《阴阳师》 等手游,一定注意到过它的启动动画、皮肤立绘卡片等场景,经常采用静态底图加局部液态流动效果的简单动画,本文使用前端开发技术,结合 SVG 和 CSS 来实现类似的液化流动效果。本文包含的知识点主要包括:mask-image 遮罩、feTurbulence ... ...

css定位 position:sticky

今天在做css定位的时候遇到一个问题,我想用fixed定位下来,但是发现这个时候定义的百分百宽度不随着父元素走了而是整个屏幕的百分百,这个就很尴尬了,也不能固定宽度吧,毕竟还要宽度自适应。 这个时候发现了一个position的属性 sticky 它是relative和fixed的结合体可以理解为,当 ...

20 多个好用的 Vue 组件库

原文链接:20 多个好用的 Vue 组件库 在本文中,将分享一些常见的 vue.js 组件。 Tables / Data Grids Vue Tables-2 地址:https://github.com/matfish2/vue-tables-2 Vue Tables 2 旨在为开发者提供一个功能齐 ...

【H5/CSS】简单了解选择器的优先级

样式的冲突 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。 案例一:使用类选择器与元素选择器选中同一元素,设置不同颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...

【H5/CSS】CSS的写法与选择器

百科简介 层叠样式表 (英文全称:Cascading Style Sheets)是一种用来表现 HTML ( 标准通用标记语言 的一个应用)或 XML (标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 1. C ...