本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码，供大家参考，具体内容如下 template 双层div嵌套，进行隐藏滚动显示 <div cla ="list-container"> <div cla ="marquee" id="car...[2021/6/28]

CSS学习 CSS是层叠样式表（Cascading Style Sheets）的简称。 有时候也会称之为CSS样式表或级联样式表。 CSS也是一种标记语言。 CSS主要设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。 HTML可以专注去做结构，CSS用来做样式。 C...[2021/6/28]

初识HTML 什么是HTML Hyper Text Markup Language（超文本标记语言） HTML5的优势 世界知名浏览器厂商对HTML5的支持 微软 Google 苹果 Opera Mozilla 市场需求 跨平台 W3C标准 W3C World Wide We...[2021/6/28]

初始化 Vite 基于原生 ES 模块提供了丰富的内建功能，开箱即用。同时，插件足够简单，它不需要任何运行时依赖，只需要安装 vite （用于开发与构建）和 sa （用于开发环境编译 .sc 文件）。 npm i -D vite sc 项目配置 同时用 vite 开发插件和构建插件 ...[2021/6/28]

CSS学习（2） Emmet语法 emmet语法可以通过缩写的形式来提高html/c 的编写速度 生成标签：输入标签名按下tab键 生成多个相同标签：如div*3 生成父子级关系：如ul>li 生成兄弟级关系：如div+p 生成带有类名或id名字的标签：标签名称.demo或#two按下t...[2021/6/28]

?HTML HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 ?课程 https...[2021/6/28]

JSONP(JSON with Padding) 是 JSON 的一种"使用模式"，可以让网页从别的域名（网站）那获取资源，即跨域读取数据。JSONP 的优势在于支持老式浏览器，兼容性好（兼容低版本IE），缺点是只支持 GET 请求，不支持 POST 请求。本文主要介绍 JSONP 的使用方法，...[2021/6/28]

CSS 变量 基本用法 声明一个变量，属性名需要以两个减号（--）开始，属性值则可以是任何有效的CSS值。 element { --main-bg-color: brown; } 选择器是指定变量的可见作用域，该变量仅用于匹配当前选择器及其子孙，通常的最佳实践是...[2021/6/28]

开始 当我们想写一个类似掘金的文章或者自己的博客的时候，是否有想过该怎么实现给自己文章的章节添加章节号，给小标题增加标题号，或者给列表增加列序号，简单的静态文本我们或许可以手动输入或者使用html的有序列表 <ol>，但是有序列表自带样式，达到我们想要的效果可能还要费一番功夫，繁多的...[2021/6/28]

前言 小问题总是被人视而不见，等遇到的时候又突然想不起来，所以我们需要经常总结，这可以帮助我们更好的记忆东西。今天我们来总结两个不起眼的小问题：margin塌陷和margin合并 margin塌陷 什么是margin塌陷 我们先来看个例子，然后引出什么是margin塌陷 需求：在父子...[2021/6/28]

本文将介绍 CSS 中一个比较有意思的伪元素 ::marker，利用它，我们可以让我们的文字序号变得更加的有意思！ 什么是 ::marker CSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3 开始新增，CSS Pseudo-Elements Le...[2021/6/28]

编程工具 SQL Server2019 Visual Studio 2019 Visual Studio Code SQL Server数据 注：这边我循环添加了几百条测试数据 Visual Studio 2019 我用vs2019 创建了一个web api的项目用来做数据传递 V...[2021/6/21]

顶部菜单栏中放置搜索框是一个常见的场景，但如果搜索功能使用的不那么频繁，同时菜单栏中内容本来就比较拥挤，再放一个完整的搜索框在那就显得不那么美观。因此也有一个挺常见的做法是，只放一个搜索图标，需要时再显示整个搜索框，如下图所示： 实现思路 起始状态时搜索框没有显示，鼠标移入后从右侧滑入，因...[2021/6/21]

背景知识了解 图片url获取 1.将选定的背景图上传至博客园服务器 将选定的图片上传至自己博客园的相册中 2.获取上传至博客园服务器背景图的url 打开相册，选择需要的背景图片-->单击-->在打开的图片上方右键-->复制图片地址 JS权限申请 目的：后面的添加j...[2021/6/21]

目录CSS 简介CSS 语法Id 和 Cla id 选择器cla 选择器CSS 创建外部样式表内部样式表内联样式多重样式多重样式优先级背景（background）背景颜色背景图像background-repeatbackground-positionbackground-attachment简...[2021/6/21]

嘿！大家好哇，今天来带大家做一个可爱😊的滑动导航栏效果，这个demo很基础，但是使用场景非常广泛噢 :happy: ！作为前端大白，今天就手把手一步一步教你实现它吧！❤️ 实现效果 看！这个滑动的效果很有趣吧！这样的滑动效果相信你一定有想过吧...[2021/6/21]

背景 文章开始之前先简单了解下什么是 赛博朋克，以及什么是 赛博朋克2077。 赛博朋克（Cyberpunk）是“控制论、神经机械学”与“朋克”的结合词，背景大都建立于“低端生活与高等科技的结合”，拥有先进的科学技术，再...[2021/6/21]

经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就是少了一些难度，只需要有耐心，很多图形还是能够被慢慢实现出来的。 基于 CSS 绘图的这个需求，逐渐又有...[2021/6/21]

本文将介绍 CSS 中一个比较有意思的伪元素 ::marker，利用它，我们可以让我们的文字序号变得更加的有意思！ 什么是 ::marker CSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3 开始新增，CSS Pseudo-Elements Lev...[2021/6/15]

参考文档 CSS手册 - API参考文档 (apiref.com) 网页分为三部分 行为 js 表现 c 结构 htm c :层叠样式表 层叠：网页是一个多层的结构，通过c 可以分别给网页每一个层设置样式 <!-- 使用c 来修改元素的样式 ...[2021/6/15]

基于vue.c 样式改造 作为平时写文档必不可少的利器typora,自然就得要好看一点的皮肤啦，这里分享一下自己改造后的主题，可以相互借鉴下?? 这里对vue主题的一些样式做了修改，大家也可以根据自己的喜好自作修改，这里仅仅是参考，觉得可以的话，希望推荐下 样式展示： 代码：...[2021/6/15]

文档流 网页是一个多层的结构 通过c 可以分别设置每层的样式 最下面的一层，就是文档流 创建的元素默认是在文档流 文档流状态：在文档流，脱离文档流 文档流状态 在文档流 块元素： 在页面中独占一行 默认宽度是父元素的全部，会把父元素撑满 默认高度是内容（子元素）撑开 从上到下垂直排列 ...[2021/6/15]

背景 文章开始之前先简单了解下什么是 赛博朋克，以及什么是 赛博朋克2077。 赛博朋克（Cyberpunk）是“控制论、神经机械学”与“朋克”的结合词，背景大都建立于“低端生活与高等科技的结合”，拥有先进的科学技术，再以一定程度崩坏的社会结构做对比；拥有五花八门的视觉冲击效果，如街头的...[2021/6/15]

有这么一个需求，利用antd组件库中的BackTop组件的逻辑，但是自己写样式。 我的目标样式是：有两张图片，一张是normal（正常情况），一张是hover（悬停情况）。 这时候就要用到c 的动画了 这是第一版，也是错误的版本 下面是jsx的代码 <BackTop> ...[2021/6/15]

本文主要介绍了html+c 实现分层金字塔的实例，分享给大家，具体如下： 先上效果再看代码 直接上代码 html <div cla ="finetriangle"> <div cla ="sanjiao&quo...[2021/6/7]

本文主要介绍了html+c 实现文字折叠特效实例，分享给大家，具体如下： 效果： 实现： 1. 定义标签： <h1>aurora</h1> 2. 设置文字基本样式： h1{ text-tra...[2021/6/7]

什么是calc()? 学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。 calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是c 3的一个新增的功能，用来指定元素的...[2021/6/7]

前言 项目有图表方面的需求，其中有做卫星定位的图形，需要制作极坐标来显示当前北半球或南半球的卫星分布情况。第一时间想到了echarts的极坐标，找到示例，虽然满足了部分需求，但是极坐标是由canvs画的，卫星有自己的编号，所以难以辨析每个点对应的卫星编号。于是就想到了自己去用CSS画极坐标 ...[2021/6/7]

导航栏的制作： 技术要求：  CSS HTML各类标签 实现目的： 制作导航栏菜单 代码分析：  基本样式清除 无序列原点删除 下划线删除 文字默认居中 a标签设置块级元素 伪...[2021/6/7]

经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就是少了一些难度，只需要有耐心，很多图形还是能够被慢慢实现出来的。 基于 CSS 绘图的这个需求，逐渐又有...[2021/6/7]

例如父盒子是100%的高度 盒子里面的head部分固定位140px 内容部分始终为剩余的全部高度 height: calc(100% - 140px);    "+或-"两边要有空格 不然不生效     父盒子 .pushQueryPane...[2021/6/7]

WEB 安全攻防是个庞大的话题，有各种不同角度的探讨和实践。即使只讨论防护的对象，也有诸多不同的方向，包括但不限于：WEB 服务器、数据库、业务逻辑、敏感数据等等。除了这些我们惯常关注的方面，WEB 安全还有一个重要的元素——网站的使用者。 他们通常是完全没有 IT 知识的普通用户，网站方可以...[2021/6/7]

前篇“WEB安全防护相关响应头（上）”中，我们分享了 X-Frame-Options、X-Content-Type-Options、HTTP Strict Transport Security (HSTS) 等安全响应头的内容。下文中，我们则侧重介绍一些和跨站安全相关的响应头—— 一、Refer...[2021/6/7]

背景 基本概念 CSS filter属性将模糊或颜色偏移等图形效果应用于元素形成滤镜，滤镜通常用于调整图像，背景和边框的渲染。它的值可以为 filter 函数 <filter-function> 或使用 url 添加的svg滤镜。 filter: <filt...[2021/5/31]

文本将介绍 CSS 媒体查询中新增的几个特性功能： prefers-reduced-motion prefers-color-scheme prefers-contrast prefers-reduced-transparency prefer...[2021/5/31]

今天来制作一个简单的心跳效果，不需要很多代码，添加一个盒子，充分利用CSS展现就可以啦。 1.首先我们在页面添加一个可视化的盒子 <body> <div cla ="heart"></div> </body>...[2021/5/31]

先看效果： 前言： 这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯c ），下面是详细过程。最后面有完整代码。 实现： 1. 首先定义一个div标签作为按钮，类名为 .anniu： <div cla ="anniu&q...[2021/5/31]

背景 基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜，滤镜通常用于调整图像，背景和边框的渲染。它的值可以为 filter 函数 <filter-function> 或使用 url 添加的svg滤镜。 filter: <filte...[2021/5/31]

首先每个容器都可以开启弹性布局：display：flex或者display：inline-flex，如果浏览器兼容加上-webkit 理解两个概念：容器和项目 容器即为你要在什么地方开启弹性布局，就是一般为外层的div 项目即为你想设置分布位置的子div 即然分为父和子，那么两者都有不同...[2021/5/31]

1、Bootstrap： Bootstrap 无疑是目前使用最广泛的 CSS 框架，GitHub 上长期稳占第一就足以说明问题。优点有很多，比如响应式设计，海量资源且简单易学。不过也有人吐槽 Bootstrap 稍显臃肿，但是Bootstrap5 彻底抛弃Jquery之后瘦身了不小，做前端的几...[2021/5/31]

HTML 框架基础 问题 要学好前端，首先我们要先了解框架，也就是网页框架html。 那么HTML是什么？XML是什么？ SGML Standard Generalized Markup Language 标准通用标记语言是HTML的前身 HTML 超级文本标记语言 Hyper Text ...[2021/5/31]

文本将介绍 CSS 媒体查询中新增的几个特性功能： prefers-reduced-motion prefers-color-scheme prefers-contrast prefers-reduced-transparency prefers-reduced-data 利用好它们，能够...[2021/5/24]

在之前，我介绍过几种使用纯 CSS 实现波浪效果的方式，关于它们有两篇相关的文章： 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果，思路非常有意思。 从定积分实现曲边三角形面积说起 在进入主题之前，先看看这个，在高等数学中...[2021/5/24]

在之前，我介绍过几种使用纯 CSS 实现波浪效果的方式，关于它们有两篇相关的文章： 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果，思路非常有意思。 从定积分实现曲边三角形面积说起 在进入主题之前，先看看这个，在高...[2021/5/24]

网页公共命名： #wrapper - - 页面外围控制整体布局宽度 #container或#content - - 容器，用于最外层 #layout - - 布局 #head，#header - - 页头部分 #foot，#footer - - ...[2021/5/24]

前言 老板的手机收到一个红包，为什么红包没居中？ 如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。 你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场的时候，他们不敢这么写，也...[2021/5/24]

 一、c 背景标签 1，设置背景颜色 back-ground-color 属性指定元素的背景色。 小实例如下图所示： 运行结果如下： 可以通过选择器给不同的标签设置不同的颜色，在这里h1,div,和p标签将拥有不同的背景色： 实例： 运行结果如下图...[2021/5/24]

背景 起因是微信技术群里有个同学发问，有什么方法能够获取图片的主色呢？有一张图片，获取他的主色调： 利用获取到的这个颜色值，来实现类似这样的功能 -- 容器中有一张图片，希望背景色可以适配图片的主色，像是这样： 大家出谋划策，有说利用 Canvas 进行计算的，有推荐专门的开...[2021/5/17]

背景 有没有想过如何创建从前景元素中继承某些颜色的阴影效果？阅读本文并找出如何实现方法吧！ 前几天我经过家得宝（Home Depot，美国家得宝公司，全球领先的家居建材用品零售商），他们正在大规模展销正在出售的智能灯 💡，其中一种是一系列灯泡位于电视机后面，它们会投射出...[2021/5/17]

前言 今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别，这两个三行布局一直是一些大厂前端面试的高频考点，带你走进大厂面试题，活不多说，冲冲冲~ 布局效果 这两个种三行布局效果是一样的，实现的效果如上图示所示，其特点为： header和footer的高度为整个...[2021/5/17]