HTML+CSS
关注
分享
扫一扫
文章平均质量分 64
前端基础
凡小多
邮箱：wgh4318@foxmail.com
展开
-
unocss原子化
例如，ml-3（Tailwind），ms-2（Bootstrap），ma4（Tachyons），mt-10px（Windi CSS）均会生效。预设（实验阶段）是一系列流行的原子化框架的 通用超集，包括了。安装图标库，根据地址栏后缀安装对应图标库。属性语义化 无须class。原创 2023-01-18 09:12:12 · 808 阅读 · 0 评论 -
网站变成灰色——grayscale
网站变成灰色有很多办法，但相比于换内容样式\UI而言，使用滤镜更为方便使用的灰度属性原创 2022-12-05 09:44:29 · 283 阅读 · 0 评论 -
CSS+SVG实现简单的点赞效果
先看看效果图：通过改变 svg 的 属性实现点赞效果原创 2022-09-26 14:29:28 · 494 阅读 · 0 评论 -
常见CSS鼠标悬浮动画-hover属性
鼠标移入盒子,盒子向上移动并出现底部阴影。鼠标移入盒子放大并出现底部阴影。鼠标移入盒子,盒子右下角卷起。原创 2022-09-19 15:14:19 · 3304 阅读 · 0 评论 -
瀑布流布局之columns属性
columns 是 column-width 与 column-count 的简写属性。columns 属性是一个速记属性设置列宽和列数。原创 2022-09-19 10:47:29 · 558 阅读 · 0 评论 -
动画效果：实现卡片翻转抽奖动画（正反面内容不一样）
根据不同条件动态添加实现动画效果首先，为卡片列表添加一个是否翻转的元素 分别设置正反两面的样式及内容翻转动画一：完整代码动画二：完整代码原创 2022-09-16 14:56:10 · 1251 阅读 · 0 评论 -
霓虹灯闪烁效果
【代码】霓虹灯闪烁效果。原创 2022-08-30 16:52:58 · 193 阅读 · 0 评论 -
纯CSS实现点击动画
暂不推荐该方法，a标签会跳转页面，且不能直接第二次点击取消样式，需要设置href和id。：点击label内部文本可以触发该控件，实现点击选择框或文字都可以出现动画效果。＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。选择器可用于当前活动的target元素的样式。属性实现选中未选择变化。...原创 2022-08-30 13:56:18 · 6116 阅读 · 0 评论 -
动画效果——按钮触摸效果
先将按钮设置溢出隐藏，鼠标移入时，将左边隐藏的蒙版从左到右移动，并添加盒子阴影实现。先设置背景渐变，再通过设置背景尺寸的过渡实现背景渐变的动画。设置伪元素样式并移动到左侧。设置伪元素样式并移动到左侧。设置按钮样式以及溢出隐藏。...原创 2022-08-29 14:25:39 · 915 阅读 · 0 评论 -
backdrop-filter——毛玻璃效果
作用于元素背后区域所覆盖的元素。原创 2022-08-23 15:20:03 · 115 阅读 · 0 评论 -
动画效果——按钮边框滚动
设置伪元素的宽高为0，边框颜色为透明，并分别定位。双边动画其实更简单一点，只需要更改以下代码。从中间扩散由之前下拉菜单的边框动画想到。原创 2022-08-22 15:13:56 · 371 阅读 · 0 评论 -
导航栏设置fixed定位时，缩小浏览器没有滚动条，多余部分直接被隐藏的问题
一般解决方法：媒体查询重新布局等。原创 2022-08-19 16:19:12 · 985 阅读 · 0 评论 -
CSS中100%和inherit(继承)的区别，以及inherit的简单应用
继承父值，可以解决许多看似复杂的问题，比如实现图片倒影。定位元素，不继承父元素，而。原创 2022-08-19 14:18:23 · 608 阅读 · 0 评论 -
CSS优化滚动条样式设置
优化CSS滚动条样式，--webkit、IE、火狐原创 2022-08-12 14:18:20 · 1760 阅读 · 0 评论 -
背景视频铺满盒子
但是给video盒子设置具体px高度，则在ie浏览器有兼容问题，会在两边出现间隙。可以铺满盒子，盒子高度需100%，原创 2022-08-08 10:14:28 · 870 阅读 · 0 评论 -
flex使用align-content无效
代码】flex使用align-content无效。原创 2022-08-08 09:15:00 · 1784 阅读 · 0 评论 -
解决背景图设置100%铺满时，缩放浏览器出现水平滚动条时，滚动条超出的部分背景图没有铺满的问题
当视口宽度小于1000时，实际body元素的宽度没有被撑开到1000PX。而是按默认设置为“浏览器可视窗口的宽度”和”min-width”属性中的最大值来解析的。**解决方法**给父元素设置。原创 2022-07-25 14:48:23 · 1881 阅读 · 0 评论 -
Vue3集成Tailwind CSS
Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的官网地址：Tailwind CSS 中文文档可以在vscode安装 Tailwind插件进行代码的输入提示生成配置文件配置文件文档修改配置文件 tailwind.config.js创建 tailwind.css文件main.ts中引入 tailwind.css文件如果您想基于 Tailwind 生成的默认样式自定义任何 CSS ，通常情况下只需创建一个 CSS 文件，并使用 指令包含 的 ， 和原创 2022-07-13 10:54:35 · 806 阅读 · 0 评论 -
vue3之css插槽选择器、全局选择器以及动态css
默认情况下，作用域样式不会影响到 < slot /> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的解决方案 ：全局选择器之前我们想加入全局 样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案解决方案 ：等同于动态CSS单文件组件的 style 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：如果是对象请加引号...原创 2022-07-13 10:29:40 · 2082 阅读 · 2 评论 -
鼠标禁用样式(cursor: not-allowed)无效和鼠标禁用事件(pointer-events: none)冲突
鼠标禁用样式：鼠标禁用事件：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向其后代元素。如果同时使用 ，鼠标为默认样式；解决方法：外层添加盒子将样式分开外部盒子使用cursor: not-allowed;（cursor：no-drop）内部盒子使用pointer-events: none;不使用鼠标禁用事件，而是在鼠标点击事件中做判断...原创 2022-07-07 10:17:21 · 7872 阅读 · 0 评论 -
css变量实现接口获取背景图地址的变化（Vue为例）
想要在CSS中使用JS变量步骤：在行内的style属性中定义CSS变量<div class="box" :style="{'--background':banner}"></div>赋值JS变量// jsdata(){ return { banner:'url(../img/home_bg.png)', }}在CSS中使用变量.box { background: var(--background)}带有前缀 -- 的属性名，比如 -原创 2022-03-11 14:02:16 · 3929 阅读 · 0 评论 -
设置height:100%无效的原因以及两种解决方法
原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因<!-- 高度实际为字体大小 --><div class="box" style="width:100%;height:100%;background-color:red;"> width:100%;height:100%;</div>解决方法一：设置父元素高度html,bod原创 2022-01-04 17:57:11 · 21793 阅读 · 5 评论 -
实现含有分页与搜索页面的方法
方法一：双数组在获取全部列表数据的接口上，将返回的数据赋值到 dataList 和 renderList 两个数组中dataList ：是存储所有数据的数组renderList：是页面渲染的数组// 获取列表数据async getList () { const { data: res } = await this.$http.get('list', { params: this.queryInfo }) // 数据赋值 this.renderList= this.dataLis原创 2021-12-31 15:37:47 · 504 阅读 · 0 评论 -
input输入框怎么判断是否输入或输入的是空格
方法：把空格通过正则匹配替换为空字符串// this.inputValue——input输入值//----判断是否为空或者空格---if (this.inputValue.replace(/(^\s*)|(\s*$)/g, "") == "") { console.log('未输入或者输入为空格')} else { console.log('输入：', this.inputValue)};...原创 2021-12-31 14:02:24 · 4237 阅读 · 3 评论 -
HTML+CSS - 背景图片固定在页面下
<!doctype html><html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title&g原创 2021-11-26 14:49:25 · 1724 阅读 · 0 评论 -
响应式开发与 Bootstrap
响应式开发1.响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备响应式布局容器响应式需要一个父级作为布局容器，来配合子级元素来实现变化原理就是在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。平时响应式尺寸的划分超小屏幕（手机，小于768px）：设置宽度100%小屏幕（平板，大于等于768px）：设置宽度750px中等屏幕（桌面显示器，大于等于992px）：设置宽度970原创 2021-11-03 19:48:31 · 310 阅读 · 0 评论 -
响应式布局 - rem的适配方案
按照设计稿与设备宽度的比例，动态计算并设置html根标签的 font-size 大小；（媒体查询）CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 单位的值；rem + 媒体查询 + less技术【案例：移动端首页】1. 设计稿常见的尺寸宽度2. 动态设置 html 标签的 font-size 大小3. 设置视口标签以及引入初始化样式<meta name="viewport" content="width=device-width, user-scalab.原创 2021-11-03 15:51:08 · 468 阅读 · 0 评论 -
Less 基础
Less 是一门 CSS 扩展语言，也叫CSS预处理器在css的语法基础上，引入了变量、Mixin（混入）、运算以及函数等功能Less中文网Less是一门 CSS 预处理语言，它扩展了CSS的动态特性Less 安装基于 nodejs 在线安装Less，使用cmd命令 npm install -g less检查是否安装成功，使用cmd命令 lessc -v 查看版本即可Less 变量变量是指没有固定的值，可以改变，如css中的：颜色和数值@变量名: 值;变量命名规范必须有@为前缀原创 2021-11-03 10:58:44 · 182 阅读 · 0 评论 -
响应式布局 - 元素动态大小变化
rem基础em 相对于父元素的字体大小来说的rem 相对于 html元素的字体大小来说的媒体查询是CSS3新语法使用 @media 查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同屏幕尺寸设置不同样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询语法规范@media mediatype and|not|only (media feature){ css-code;原创 2021-11-03 10:05:03 · 441 阅读 · 0 评论 -
Web 服务器
把自己网站上传到服务器上，可以让其他人访问什么是Web服务器我们写的网站，目前是放到自己电脑上的，只能自己访问浏览。如果想要很多人访问我们的网站，可以把其放到服务器上，这样就可以多人访问了服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服务器等。Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文原创 2021-05-30 11:01:16 · 216 阅读 · 0 评论 -
旋转轮播图
旋转轮播图这个效果我们需要用到 透视 过渡还有 子元素 preserve-3dtransform-styletransform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。<!DOCTYPE html><html lang="en"> <head> <met原创 2021-05-28 20:47:04 · 295 阅读 · 0 评论 -
CSS W3C 统一验证工具和压缩
CSS W3C 统一验证工具CssStats 是一个在线的 CSS 代码分析工 http://www.cssstats.com/W3C 统一验证工具（可以检测本地文件）： http://validator.w3.org/unicorn/CSS 压缩通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。w3c css压缩： http://tool.chinaz.com/Tools/CssFormat.aspx原创 2021-05-28 20:26:00 · 226 阅读 · 0 评论 -
优雅降级和渐进增强
渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别： 渐进增强是向上兼容，优雅降级是向下兼容现在互联网发展迅速，一般采用优雅降级的方式浏览器前缀后面我们会有 常用的解决H5和C3 的兼容解决文件...原创 2021-05-28 19:37:10 · 2065 阅读 · 0 评论 -
BFC（块级格式化上下文）
BFC(Block formatting context) 直译为：块级格式化上下文它是一个独立的渲染区域，只有块级盒子(Block-level box)参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干元素的显示模式我们前面讲过 元素的显示模式 display。分为 块级元素 行内元素 行内块元素 ，其实它还有很多其他显示模式。哪些元素会具有BFC的条件不是所有的元素模式都能产生BFC，w3c 规范：display 属性为 block, list原创 2021-05-28 19:27:17 · 954 阅读 · 0 评论 -
三大标签 SEO 优化 和 logo SEO 优化
SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。页面必须有三个标签用来符合 SEO 优化一、网页title 标题title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。首页标题：网站名（产品名）- 网站的介绍例如：京东(JD原创 2021-05-27 20:18:04 · 361 阅读 · 0 评论 -
网站 favicon 图标
网站 favicon 图标favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上一、制作 favicon 图标把 logo 图标切成 png 图片。把 png 图片转换为 ico 图标这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/二、favicon 图标放到网站根目录下为了兼容性，将favicon.ico 这个图标放到根目录下三、 HTML页面引入 favicon 图标在html 页面里面的 元素之间引入代码原创 2021-05-27 19:01:22 · 2268 阅读 · 0 评论 -
HTML + CSS -12. 弹性（伸缩）布局(flex 布局)
一、伸缩布局(CSS3)CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的方向：默认主轴从左向右，侧轴默认从上到下主轴和侧轴并不是固定不变的，通过flex-direction可以互换。Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏原创 2021-05-26 15:26:45 · 1915 阅读 · 1 评论 -
HTML + CSS -11. CSS3 新特性
CSS3 特性1.1 图片模糊CSS3滤镜filter:filter CSS属性将模糊或颜色偏移等图形效果应用于元素。filter: 函数();例如： filter: blur(5px); blur模糊处理 数值越大越模糊<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi转载 2021-05-24 21:32:30 · 504 阅读 · 0 评论 -
CSS 初始化
base.css/* 把我们所有标签的内外边距清零 */* { margin: 0; padding: 0}/* em 和 i 斜体的文字不倾斜 */em,i { font-style: normal}/* 去掉li 的小圆点 */li { list-style: none}img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题转载 2021-05-24 12:01:03 · 105 阅读 · 0 评论 -
HTML + CSS -10. CSS 高级技巧
1. 精灵图为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。使用精灵图核心：精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为 sprites 精灵图 或者 雪碧图移动背景图片位置， 此时可以使用 background-position移动的距离就是这个目标图片的 x 和 y 坐标。转载 2021-05-23 21:19:45 · 201 阅读 · 0 评论