编程开发 - 教程之家

245浏览

0评论

解决CSS中子元素z-index与父元素兄弟节点的层级问题

1.问题的出现写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。元素的结构大致如下：<...

2020-10-16 03:13:57

231浏览

0评论

使用CSS text-emphasis对文字进行强调装饰的实现代码

一、引言在过去，想要对某部分文字进行强调，通常的做法是加粗，或者使用一个高亮的颜色，现在有了新的选择，就是使用 text-emphasis 属性进行强调装饰。text-emphasis 家族总共有4个...

2020-10-16 03:13:55

228浏览

0评论

flex布局实现每行固定数量+自适应布局

本文介绍了flex布局实现每行固定数量+自适应布局，分享给大家，具体如下：效果展示解析 <div class="template" v-for="(item,templateIndex) in 7"> <div @click="u...

2020-10-16 03:13:54

202浏览

0评论

基于Css Variable的主题切换完美解决方案(推荐)

当接到这个需求的时候，百度到业界关于主题切换的方案还挺多的，css链接替换、className更改、less.modifyVars、css in js等等，但每一种方案听起来都是又累又贵。有没有那种代...

2020-10-16 02:40:29

247浏览

0评论

CSS3新增布局之: flex详解

flex 基本概念flex布局（flex是flexible box的缩写），也称为弹性盒模型。将属性和属性值（display:flex; ）写在哪个标签样式中，谁就是容器；它的所有子元素自动成为容器成员，称为项目...

2020-10-16 02:40:27

135浏览

0评论

浅析CSS :is() 和 :where() 即将出现在浏览器中

现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的CSS :is() 和 :where() 伪类。Chrome的实施仍然落后。使用 :is() 减少重复你可以使用 :is() 伪类来删除选择器列...

2020-10-16 02:40:25

289浏览

0评论

CSS3 box-shadow属性实例详解

CSS3 --添加阴影（盒子阴影的使用）CSS3 - 给div或者文字添加阴影（盒子阴影、文本阴影的使用）CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影...

2020-10-16 02:40:24

174浏览

0评论

CSS3为背景图设置遮罩并解决遮罩样式继承问题

工作中很多时候需要对图片背景作处理,比如设置通透性，模糊处理等等但是如果对背景图所在标签直接设置这些效果的话，这些样式会被子标签继承。例1: 给背景所在标签设置模糊效果...

2020-10-16 02:40:22

221浏览

0评论

CSS实现背景渐变和自动全屏的代码

CSS 关于背景渐变和自动全屏的问题主编在css开发时发现了一个致命的问题：
在设置了背景颜色渐变后好不容易调成了全屏覆盖
但按下了F11的时候崩溃的世界开始了
所以这篇文章...

2020-10-16 02:40:20

293浏览

0评论

基于CSS3的animation属性实现微信拍一拍动画效果

看到最近流行的微信拍一拍功能，复习下CSS3的animation,所以写下这个盒子晃动的动画，把qq的窗口抖动也加上吧@-webkit-keyframes shake { 0% { -webkit-transform: t...

2020-10-16 02:40:19

230浏览

0评论

css伪类右下角点击出现对号角标表示选中的示例代码

效果：css:.s_type { border: none; border-radius: 5px; background-color: #f3f3f3; padding: 7px 0; color: #606266; margin: 5px 2.5% 5px 0; widt...

2020-10-16 02:40:18

297浏览

0评论

如何利用vw+rem进行移动端布局

你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹简单介绍下rem布局方案rem是css中的长度单位，1rem=根元素htm...

2020-10-16 02:40:16

207浏览

0评论

CSS如何匹配到多个class的示例代码

css匹配到多个class 如下html标签li,class有open样式。我的需求是只有当open,active同时存在时，修改背景色为白色<li id="menu_268098" title="账户信息查询" class="open">...

2020-10-16 02:40:15

295浏览

0评论

使用CSS和Java来构建管理仪表盘布局的实例代码

您将要创造的在这个新教程中，我们将使用CSS和JavaScript来创建响应式管理仪表板布局。要构建它，我们将从WordPress仪表板中借鉴一些想法，例如其可折叠的侧边栏菜单。在整个教...

2020-10-16 02:40:14

194浏览

0评论

使用CSS的clip-path属性实现不规则图形的显示

clip-pathCSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。例子div { width: 200px; height: 200px; background: #6c00af; -webkit-clip-pa...

2020-10-16 02:40:13

207浏览

0评论

一文汇总 CSS 两列布局和三列布局的具体使用

前言随着大前端的发展，UI 框架层出不穷，让我们前端开发对 CSS 的能力要求变得没那么高或者没那么严苛，起码重要性是比不上 JS 编程的。但是，基础的 CSS 依然需要我们熟练掌握，今...

2020-10-16 02:40:11

226浏览

0评论

CSS规范BEM CSS和OOCSS的示例代码详解

前言在项目开发中，由于每个人的代码习惯不同，编写出来的css代码不够结构化，整洁度和语义化欠缺。BEM CSS和OOCSS的思想大家在日常编码中一定有所用到，只是没有系统的了解和完全...

2020-10-16 02:40:10

185浏览

0评论

CSS实现导航固定的、左右滑动的滚动条制作方法

如上效果的导航，导航是固定在顶部的，可以左右滑动点击更多选项的。这种制作相当简单，本文只是提几点注意：固定位置菜单固定在顶部不动，使用 position:fixed; top:0; left:0;。同...

2020-10-16 02:40:07

212浏览

0评论

Flex移动布局中单行和双行布局的区别及使用详解

这里是单行布局使用ul>li 来布局<ul class="local-nav"> <li> <a href="#"> <span class="local-nav-icon-icon1"></span> 攻略景点...

2020-10-16 02:40:05

261浏览

0评论

css 实现动态二级菜单

动态实现简单的二级菜单当鼠标放到一级标签上时，鼠标会变成小手的形状展示二级菜单，源码如下，复制即可直接使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...

2020-10-16 02:40:04

163浏览

0评论

纯CSS实现选中商品后右下角显示√号功能

推荐文章：css伪类右下角点击出现对号角标表示选中的示例代码：https://www.freexyz.cn/css/731762.html效果解析：1、利用伪元素选择器，来增加内容。
2、利用较宽的border实现&ra...

2020-10-16 02:40:03

300浏览

0评论

完美解决webpack打包css背景图片路径问题

在vue组件的style标签内部有如下一段使用背景图片的css代码background-image: url("../assets/img/icon_add.png");在webpack中css-loader的解析配置如下{ test: /\....

2020-10-16 02:40:01

206浏览

0评论

CSS变量对JS交互组件开发带来的提升与变革示例代码详解

一、CSS变量带来的质变CSS变量带来的提升绝不仅仅是节约点CSS代码，以及降低CSS开发和维护成本。更重要的是，把组件中众多的交互开发从原来的JS转移到了CSS代码中，让组件代码更...

2020-10-16 02:40:00

214浏览

0评论

css布局两个button在同父标签中左右两侧分布的方法

本文主要介绍了css布局两个button在同父标签中左右两侧分布的方法，分享给大家，具体如下：效果图布局代码<view class="grace-footer" style="width:100%;" slot="gFooter"> <vie...

2020-10-16 02:39:58

198浏览

0评论

CSS垂直居中的另类实现代码详解(不走寻常路)

前言众所周知，“css如何实现元素垂直居中？”已经是一个老生常谈的问题了，这个问题目前已经有了许多解决方案，这些方案也都有各自适用的场景以及优缺点，大致如下： fle...

2020-10-16 01:27:23

205浏览

0评论

CSS3里box-shadow属性的使用方法示例详解

CSS里面的属性很多，有些属性长时间不用，就容易忘，尤其是那种需要设置多个值的属性。比如：box-shadow，每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用，都要查阅资料才能实...

2020-10-16 01:27:22

233浏览

0评论

CSS 中使用径向渐变实现卡券效果

前几天，同事接到一个积分商城项目，其中有一个卡券兑换礼品功能。我想了一会没什么好的思路，就忙自己的项目去了。但想到以后自己可能也会遇到类似的需求，所以周末学习整理了下几...

2020-10-16 01:27:21

136浏览

0评论

解决CSS样式冲突的几个办法(小结)

1. 细化选择符通过使用组合器（Combinator）将选择器的描述写得更加精确（参考CSS选择器 - MDN ），例如对于下述代码片段，如果想给.cellphones中的.apple增加样式，只使用.apple，势必会...

2020-10-16 01:27:19

294浏览

0评论

如何使用HTML+CSS实现TG-vision 主页制作

本次我们用HTML+CSS布局来对TG-vision 双晖传媒的主页进行一个初步的搭建。一.顶部logo及导航条1.HTML代码<div class="topheader"> ...

2020-10-16 01:27:17

234浏览

0评论

使用CSS cross-fade()实现背景图像半透明效果的示例代码

一、需求描述某元素，希望 background-image 背景图片是半透明的，但是，元素里面的其他内容，例如文字，图标之类的还是不透明。如果是纯色背景或者是CSS渐变背景，很好处理，使用 rgba...

2020-10-16 01:27:16

307浏览

0评论

css3实现小箭头各种图形效果

css实现各种图形真是太赞了，再也不用切图了，直接用css就可以实现。最常用的就是用css实现的小三角了#triangle-up{ display:inline-block; width:0; height:0; border-left:30...

2020-10-16 01:27:02

270浏览

0评论

CSS让子容器超出父元素(子容器悬浮在父容器效果)

前言有时候，我们需要如下图这样一个悬浮效果需求：实现在标准的正常的情况下，只能使用绝对定位来完成。第一步：父容器定位设置为 relative（相对定位）。第二步：子容器定位设置为 ab...

2020-10-16 00:30:54

299浏览

0评论

div自适应高度自动填充剩余高度

方案1：Html：<div class="outer"> <div class="A"> 头部DIV </div> <div class="B">下部DIV </div></div>CSS： html,body { height: 100%; padding: 0; margin: 0; }.oute...

2020-10-16 00:30:51

141浏览

0评论

css实现图片自适应容器的几种方式(小结)

经常有这样一个场景，需要让图片自适应容器的大小。1、img标签的方式我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。<div class='div1'> <img src="./peiq...

2020-10-16 00:30:49

273浏览

0评论

CSS 实现 10 种现代布局的代码

前言周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西...

2020-10-16 00:30:47

298浏览

0评论

CSS届的绘图板CSS Paint API简介

一、把Canvas图片作为CSS背景图片CSS Paint API可以简单理解为（实际不能等同）把Canvas画布作为普通元素的背景图片。也就是CSS的background-image就是一个Canvas，我们可以利用C...

2020-10-15 23:51:08

488浏览

0评论

使用 CSS Paint API 动态创建与分辨率无关的可变背景效果

来源：https://medium.com/better-programming，作者：Ferenc Almasi现代Web应用对图像的需求量很大，它们占据网络下载的大部分字节。通过优化它们，你可以更好地利用它们的性能。如...

2020-10-15 23:51:05

277浏览

0评论

CSS设置盒子容器(div)高度(height)始终为100%

前言
有时需要让一个盒子容器的高度始终保持100%，无论怎么缩放浏览器高度始终不变。就像一些网站的侧边栏，但直接设置盒子容器的高度为100%是不起作用的。demo如果想让一个元...

2020-10-15 23:15:09

247浏览

0评论

CSS使用calc()获取当前可视屏幕高度的实现

先了解一下CSS3的相对长度单位(参考详细教程) ：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em...

2020-10-15 23:15:05

326浏览

0评论

CSS中引用svg图片支持动态切换颜色的实现代码

当我们添加一张svg图片显示时，react提示找不到文件。我们可以在全局文件global.d.ts内，添加图片类型的声明：详见《TypeScript 引用资源文件后提示找不到的错误处理方案》声明之...

2020-10-15 23:15:04

208浏览

0评论

css高度随宽度比例变化的几种实现方法

【方案一：padding实现】原理：一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。使用 padding-bottom 来代替 height...

2020-10-15 23:15:01

216浏览

0评论

CSS中@用法小结(示例详解)

at-rule是一个声明，为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字，这个关键字充当一个标识符，用于表示CSS该做什么。这是一个通用的语法，尽管每个at-...

2020-10-15 23:14:59

257浏览

0评论

纯CSS3实现鼠标滑过按钮动画第二节

有了之前的两章，小伙伴们对按钮悬浮动画是否又有了新的认识呢？前面两章主要是从背景着手，而本章主要是围绕边框动画做效果。并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世...

2020-10-15 23:14:58

310浏览

0评论

纯CSS实现自定义单选框和复选框功能

1 实现效果2 知识点讲解2.1 <label>标签在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果，<label>...

2020-10-15 23:14:51

126浏览

0评论

纯CSS实现iOS风格打开关闭选择框功能

1 效果演示地址： https://www.albertyy.com/2020/7/check2.html 另一篇文章：https://www.freexyz.cn/css/735639.html2 知识点2.1 <label>标签在html中，<label>标签通常和<input>...

2020-10-15 23:14:49

260浏览

0评论

纯Css实现Div高度根据自适应宽度（百分比）调整

在如今响应式布局的要求下，很多能自动调整尺寸的元素能够做到高宽自适应，如img，通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。然而，用的最多的标签一哥Div却不能...

2020-10-15 23:14:43

259浏览

0评论

使用css写带纹理渐变背景图的示例代码

项目中页面长度大概在2000px以上，再加上背景图是带纹理和渐变的，所以加载起来会很大很耗费时间，所以就改用css实现了。这次我们主要用到的网站是Hero Patterns——免...

2020-10-15 23:14:42

269浏览

0评论

解决flex布局space-between最后一行左对齐的方法

首先看代码和效果↓<style> .main { outline: 1px solid; display: flex; justify-content: space-between; flex...

2020-10-15 23:14:39

298浏览

0评论

flex布局实现无缝滚动的示例代码

本文主要介绍了flex布局实现无缝滚动的示例代码，分享给大家，具体如下：案例的演示flex布局所谓flex布局就是弹性盒布局,这种布局在移动端比较常用，但随着浏览器的版本更新，flex布...

2020-10-15 23:14:33

262浏览

0评论

CSS 伪类修改input选中样式的示例代码

注：该表引自W3School教程伪元素的分类及作用：下面通过代码看下CSS 伪类修改input选中样式的示例代码，代码如下所示：主要是用到了after伪类和字体符号。input{ -webkit-appear...

2020-10-15 23:13:49

热门文章