经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 CSS

小程序实现悬浮按钮的全过程记录_CSS教程_CSS

前言 在日常小程序开发中,我们可能会有这样的需求,将按钮悬浮,不随着页面的滑动而改变位置,例如文章详情页的分享按钮,我想做成悬浮的样子,或者首页设置一个悬浮按钮来实现一些可扩展的功能,既美观又方便实用 实现悬浮按钮我将从两方面进行讲解,一个是实现图片按钮,另一个是将按钮进行悬浮。 图片按钮...[2021/10/11]

CSS布局之浮动(float)和定位(position)属性的区别_CSS布局实例_CSS

CSS 布局 - position 属性 position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)。 position 属性 position 属性规定应用于元素的定位方法的类型。 有五个不同的位置值: ...[2021/9/27]

CSS动画如何中途停止并维持姿态_CSS教程_CSS

前言 我曾经遇到过一个难题. 我需要让一个摆动的房子从塔吊上落下,但点击落下途中,房子需要维持落下瞬间摆动的角度. 当时把我难坏了,刚开始我希望能获取到房子当前摆动的角度,并且在下落的瞬间赋值给房子的transform:rotate(),但这是实在是太麻烦了,不会是最优解. 但其实只要一个属...[2021/9/27]

使用CSS实现一个搜索引擎的原理解析_CSS教程_CSS

大家好,我卡颂。 在CSS中,我们通过selector(选择器)选择样式片段: .title { color: red; } 简而言之,选择器title对应样式color: red; 换个角度,我们也可以说:关键词.title对应数据color: red; ...[2021/9/14]

如何使用 resize 实现图片切换预览功能_CSS教程_CSS

关键点 CSS resize 属性允许你控制一个元素的可调整大小性 配合 resize 实现子元素的动态宽度 HTML:   <div cla =''picA''> <div cla =''picB''> ...[2021/8/26]

CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)_CSS教程_CSS

本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法。 将两张图片叠加在一起 改变上层图片的宽度,或者使用 mask, 改变 mask ...[2021/8/26]

CSS+HTML 实现顶部导航栏功能_CSS教程_CSS

CSS+HTML 实现顶部导航栏功能_CSS教程_CSS

导航栏的实现、固定顶部导航栏、二级菜单实现 效果图: 2018/11/16更新: 最近在使用这个导航栏的时候,发现页面在放大和缩小的情况下,导航栏的布局和显示都有些小问题,所以重新改了一下c 部分的代码,重新贴上来 新的代码实现(优化布局): <html>...[2021/8/26]

深入理解CSS 中 transform matrix矩阵变换问题_CSS教程_CSS

目录一、概述二、矩阵1、矩阵的定义2、矩阵的基本运算3、向量4、矩阵与向量三、矩阵变换1、矩阵缩放2、矩阵的旋转四、c 中的矩阵变换1、scale2、rotate3、skew4、translate5、matrix3d6、2D变换的矩阵形式 一、概述 c 中transform属性中的transla...[2021/8/26]

css中z-index: 0和z-index: auto的区别 _CSS教程_CSS

css中z-index: 0和z-index: auto的区别 _CSS教程_CSS

最近在学习层叠上下文,学习的过程中对z-index为0和为auto有什么区别产生了疑问,于是去百度查了一下资料。发现了一些问题,结合自己的实践(实验?)整理出了这篇笔记。 勘误 查资料时发现有一种说法是z-index为0是会创建新的层叠上下文,0会在auto上面。后半句话是错误的,z-ind...[2021/8/16]

分析对比华为虚拟化CSS与H3C虚拟化IRF2技术

目录一、华为CSS技术介绍二、H3C IRF2技术介绍三、华为CSS和H3C IRF2对比总结 一、华为CSS技术介绍 CSS是Cluster Switch System的简称,又被称为集群交换机系统(简称为CSS或集群)。是将几台交换机通过专用的集群线缆链接起来,对外呈现为一台逻辑交换机。 ...[2021/8/16]

CSS Transition通过改变Height实现展开收起元素_CSS教程_CSS

一个常见的开发需要,我们希望折叠元素的一部分,直到需要它为止。一些常见的框架(如 Bootstrap 和 JQuery)提供了转换效果。然而,CSS Transition 在转换高度方面给予了我们很大的灵活性。因此,您不必在项目中加入其他框架。 下面我们看看,如何使用 CSS Transitio...[2021/8/5]

css实现两栏布局,左侧固定宽,右侧自适应的多种方法_CSS教程_CSS

c 实现两栏布局,左侧固定宽,右侧自适应的7种方法,代码如下所示:  1、利用 calc 计算宽度的方法 c 代码: .box>div{height: 100%;} #box1>div{float: left;} .left1{width: 100px;b...[2021/8/4]

从QQtabBar看css命名规范BEM的详细介绍_CSS教程_CSS

从QQtabBar看BEM 首先BEM是什么意思? BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论,是一种 CSS命名规范 weui-primary_loading__dot:库名-组件_状态__元素名 ...[2021/8/4]

纯html+css实现打字效果_HTML/Xhtml

本文主要介绍了纯html+c 实现打字效果,具有一定的参考价值,感兴趣的可以了解一下 效果图 分析   可以将动画看做三个不同的层次: 最底层的文字 中间挡住文字的背景 最上层的光标 文字是静止的,而中间的背景和最上层的光标是动...[2021/8/4]

html+css实现滚动到元素位置显示加载动画效果_HTML/Xhtml

每次滚动到元素时,都显示加载动画,如何添加? 元素添加初始参数 以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部。 添加初始数据,默认透明度0、左右分别移动100px。 左侧容器 .item-leftContainer { opacity: 0; ...[2021/8/4]

CSS实现两列布局的N种方法_CSS教程_CSS

一、什么是两列布局 两列布局分为两种,一种是左侧定宽、右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间)。在c 面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能,下面将分别介绍实现方式。 二、左侧定宽、右侧自适应如何实现? 1.双inline-block ...[2021/8/4]

HTML+CSS实现导航条下拉菜单的示例代码_HTML/Xhtml

效果 代码中的图片可以自己换的 下拉菜单HTML代码 <header cla ="header"> <div cla ="header_left"> <img s...[2021/8/4]

纯html+css实现奥运五环的示例代码_HTML/Xhtml

效果图 代码 - 以蓝色和黄色的环为例 <div cla ="container"> <div cla ="ring blue"></div> <div cla =&quo...[2021/8/4]

纯html+css实现Element loading效果_HTML/Xhtml

纯html+css实现Element loading效果_HTML/Xhtml

这是 Element UI loading 组件的效果图,看起来很酷,我们来实现一下! 分析 动画由两部分组成: 蓝色的弧线由点伸展成一个圆,又从圆收缩成一个点。 圆的父节点带着圆旋转 代码 html <svg viewBox="25 2...[2021/8/4]

CSS 实现Chrome标签栏的技巧_CSS教程_CSS

这次来看一个带特殊圆角导航栏布局,如下谷歌浏览器的标签栏: 这样一个布局如何实现呢?下面介绍几种方法 一、伪元素拼接 假设有这样一个 HTML 结构 <nav cla ="tab"> <a cla ="tab-ite...[2021/8/4]

CSS实现隐藏搜索框功能(动画正反向序列)_CSS教程_CSS

CSS实现隐藏搜索框功能(动画正反向序列)_CSS教程_CSS

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

详解CSS中的特指度和层叠问题_CSS教程_CSS

前言 Q:如果多个规则匹配同一个元素,而且部分声明之间有冲突,那么我们如何知道哪个规则胜出呢? A:用户代理会计算每个规则中选择符的特指度,然后将其依附到规则中的每个声明上。如果两个或多个属性声明有冲突,特指度最高的声明胜出。而为了计算特指度,用户代理必须把规则“打散&rdquo...[2021/7/19]

html+css实现环绕倒影加载特效_HTML/Xhtml

本文主要介绍了html+c 实现环绕倒影加载特效,具体如下: 先看效果(完整代码在底部): 实现(可一步一步边看效果边编写): ※先初始化(直接复制): *{ margin: 0; padding: 0; ...[2021/7/12]

详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)_CSS教程_CSS

一. overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位。 /*c 样式*/ <style type="text/c ">...[2021/7/5]

关于CSS浮动与取消浮动的问题_CSS教程_CSS

浮动的定义 设置元素脱离正常的文档流,使元素向左或向右靠近。父元素的边缘,或者其他设置了浮动的元素的边缘 浮动解决的问题 1.解决文字包围图片的问题 2.解决间隔问题 3.可以向左,或者向右排版 将文字排版到图片左端 不采用浮动时: 采用浮动时: 采用的属性 ...[2021/6/28]

vue3实现CSS无限无缝滚动效果

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

CSS学习(1)

CSS学习(1)

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

HTML5

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

使用 vite 构建一个表情选择插件

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

CSS学习(2)

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

【HTML】HTML5学习笔记

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

跨域访问方法介绍(6)--使用 JSONP

跨域访问方法介绍(6)--使用 JSONP

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

CSS变量实现主题切换的方法_CSS教程_CSS

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

CSS实现章节添加自增序号的方法_CSS教程_CSS

CSS实现章节添加自增序号的方法_CSS教程_CSS

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

深入理解margin塌陷和margin合并的解决方案_CSS教程_CSS

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

CSS 伪元素::marker详解_CSS教程_CSS

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

Vue cli + Element plus的查询和删除

Vue cli + Element plus的查询和删除

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

前端 | 隐藏搜索框:CSS 动画正反向序列

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

自定义博客园主题样式

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

Dreamweaver基础教程:学习CSS - time-flies

Dreamweaver基础教程:学习CSS - time-flies

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

教你做个可爱的css滑动导航条_CSS教程_CSS

教你做个可爱的css滑动导航条_CSS教程_CSS

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

CSS几步实现赛博朋克2077风格视觉效果_CSS教程_CSS

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

CSS中Single Div 绘图技巧的实现_CSS教程_CSS

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

CSS ::marker 让文字序号更有意思

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

CSS

CSS

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

Typora样式改造

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

layout布局

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

仅用CSS几步实现赛博朋克2077风格视觉效果

仅用CSS几步实现赛博朋克2077风格视觉效果

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

antd组件库BackTop组件设置动态背景图片的问题

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

html+css实现分层金字塔的实例_HTML/Xhtml

html+css实现分层金字塔的实例_HTML/Xhtml

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

85
2
记录数:2426 页数:1/4912345678910下一页尾页
加载更多
 友情链接: NPS