经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 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

关于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学习 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】HTML5学习笔记

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

跨域访问方法介绍(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

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

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

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

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

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的查询和删除

编程工具 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

目录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 让文字序号更有意思

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

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风格视觉效果

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

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

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

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

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

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

html+css实现文字折叠特效实例_HTML/Xhtml

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

css height属性中的calc方法详解_CSS教程_CSS

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

CSS极坐标的实例代码_HTML/Xhtml

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

HTML+CSS 实现顶部导航栏菜单制作_HTML/Xhtml

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

CSS 奇思妙想 | Single Div 绘图技巧

CSS 奇思妙想 | Single Div 绘图技巧

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

css height属性中的calc方法

css height属性中的calc方法

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

WEB安全防护相关响应头(上)

WEB安全防护相关响应头(上)

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

WEB安全防护相关响应头(下)

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

CSS filter 有什么神奇用途_CSS教程_CSS

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

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性_CSS教程_CSS

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

HTML+CSS制作心跳特效的实现_HTML/Xhtml

HTML+CSS制作心跳特效的实现_HTML/Xhtml

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

html+css实现赛博朋克风格按钮 _HTML/Xhtml

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

CSS filter 有哪些神奇用途

CSS filter 有哪些神奇用途

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

关于倒在flex上的那些事

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

2021 年使用人数最多的5款主流前端框架点评

2021 年使用人数最多的5款主流前端框架点评

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

《从零开始的大前端学习01-html篇》

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

使用 CSS perfer-* 规范,提升网站的可访问性与健壮性

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

一种巧妙的使用 CSS 制作波浪效果的思路

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

CSS 制作波浪效果的思路_CSS教程_CSS

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

CSS的class与id常用的命名规则_CSS教程_CSS

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

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