编程开发 - 教程之家

88浏览

0评论

CSS 类名的问题详解

以下以数字开头的 CSS 类名不会生效：.1st{ color: red;}一个合法的 CSS 类名必需以下面其中之一作为开头：• 下划线 _
•短横线 -
•字母 a - z然后紧跟其他...

2020-11-01 23:21:29

77浏览

0评论

纯CSS3制作页面切换效果的实例代码

此前写的那个太复杂了，来点简单的核心<html><head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } .Bl {...

2020-11-01 23:21:28

76浏览

0评论

css等高布局常用几种方式

等高布局的方式指在同一个父容器中,子元素高度相等的布局.从等高布局实现方式来说,又分为两类伪等高子元素高度差依然存在,只是视觉上给人感觉就是等高.真等高子元素高度相...

2020-11-01 23:21:27

69浏览

0评论

CSS Sticky Footer 几种实现方式

什么是 “Sticky Footer”所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口...

2020-11-01 23:21:25

77浏览

0评论

CSS3中媒体查询结合rem布局适配手机屏幕

css3语法: （750px设计图的1rem = 100px）@media only screen and (min-width: 320px) and (max-width: 479px){ html { font-size: 42.67px !important; }}@media...

2020-11-01 23:21:23

86浏览

0评论

如何反转CSS中的贝塞尔曲线的实现方法

首先来看一看我之前写的一个CSS轮播动画效果，为了让切换时动画的过渡更加的平滑我在animation-timing-function属性中并没有使用CSS提供的各种关键词，而使用了cubic-bezier（贝...

2020-11-01 23:21:21

48浏览

0评论

css 权重值(层叠性)实例详解

•css中有很多选择器,那在多个选择器都作用于同一个元素的情况下会出现什么效果呢? 代码<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <titl...

2020-11-01 23:21:18

42浏览

0评论

CSS使用placeholder-shown伪类实现输入框浮动文字效果

在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。浮动的文字标签当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签...

2020-11-01 23:21:16

70浏览

0评论

使用CSS实现黑暗模式和高亮模式的切换功能

在 Web技巧的第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件 prefers-color-scheme 的值 dark 和 light 来进行切换，这是从最底...

2020-11-01 23:21:15

44浏览

0评论

css3实现蒙版弹幕功能

最近在b站上看到一种弹幕效果叫做智能防挡弹幕，也就是传说中的蒙版弹幕，打开之后效果大概是这样的再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦，是不是感觉很神奇。...

2020-11-01 23:21:13

104浏览

0评论

三步用CSS写一个商城卡券

今天是618 ，各大商城都在搞促销活动，今天我们就来用css做一个商城卡卷，具体如下：还在为上面这样格式各样的商城卡券的样式而发愁？CSS 不熟，canvas 太难，怎么办？用 CSS 写一个商城卡...

2020-11-01 23:21:11

86浏览

0评论

CSS布局之如何实现居中布局

1. 父级容器设置成表格，子级设为行内元素。适合子级内容为文本展示。<style> #parent { height: 200px; width: 200px; border: 1px so...

2020-11-01 23:21:09

100浏览

0评论

flex布局被子元素撑开如何保持内容不超出容器的方法

移动端里面，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，但是最近在做项目的时候发现一个问题：一个li里面设置了flex,flex: 0 0 33.333%,然后想让子元素里面的文字...

2020-11-01 23:21:07

77浏览

0评论

20个让你效率更高的CSS代码技巧(整理)

在本文中，我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自...

2020-11-01 23:21:06

134浏览

0评论

css实现文字竖排的方式(小结)

html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列.onecn{ width: 20px; margin: 0 auto; line-height: 24px; }.o...

2020-11-01 23:21:05

66浏览

0评论

什么是BFC？ CSS 使用伪元素清除浮动的方法

BFC概念：　　块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。我们先了解一个名词：BFC（block formatting cont...

2020-11-01 23:21:04

132浏览

0评论

svg+css3做一个动感的波浪效果实现

一根矢量的波浪<svg viewBox="0 0 560 20" class="wave-animation__water-wave wave-animation__water-wave--front"> <use xlink:href="#wave"></use></svg><svg id="wa...

2020-11-01 23:21:03

122浏览

0评论

纯css实现更改图片颜色的技巧

css更改图片颜色的技巧，代码很简单，具体代码如下所示：tips： JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色.pic1 { background-image: url($img), linear-gr...

2020-11-01 23:21:01

59浏览

0评论

解决margin 外边距合并问题

一、兄弟元素的外边距合并效果图如下：（二者之间的间距为100px，不是150px）二、嵌套元素的外边距合并对于两个嵌套关系的元素，如果父元素中没有内容或者内容在子元素的后面并且没有...

2020-11-01 23:21:00

134浏览

0评论

几种常见的CSS布局(小结)

本文概要本文将介绍如下几种常见的布局：其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法一、单列布局常见的单列布局...

2020-11-01 23:20:59

78浏览

0评论

详解css3中 text-fill-color属性

text-fill-color是什么意思呢？单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似。如果同时设置text-fill-color...

2020-11-01 23:20:58

107浏览

0评论

CSS 中重要的层叠概念详解

最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的...

2020-11-01 23:20:56

78浏览

0评论

css 给div添加滚动并隐藏滚动条

css 给div添加滚动并隐藏滚动条，具体代码如下所示: 在html中<div class="box"> <div>下面内容会单独滚动</div> <div class="scroll"> <div class="content">...

2020-11-01 23:20:55

75浏览

0评论

css列表滑动防止被底部遮住和适配屏幕长一点的机型处理

1、移动端处理列表滑动的时候，微信底下有自带的返回页面按钮，经常会被遮住，遇到屏幕长一点的，下面会短一大截，以下用此方法可以解决。
.container{ position:relative; backgr...

2020-11-01 23:20:54

122浏览

0评论

css行内样式,内嵌样式,外部引用样式的三种使用方式

三中的使用方法的简单实例如下：行内样式：<!doctype html><html><head> <meta charset="UTF-8"> <title>css行内样式</title></head><body><div style="width:100px;height:100...

2020-11-01 23:20:53

283浏览

0评论

使用CSS隐藏元素滚动条的示例代码

如何隐藏滚动条，同时仍然可以在任何元素上滚动？首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。想要完全隐藏滚动条只需设置overflow：hidden...

2020-11-01 23:20:52

89浏览

0评论

Css实现清除浮动的方法汇总

网页布局中经常会用到float浮动，但是浮动的块级元素脱离了标准文档流，使得浮动元素的父元素没有高度，导致父级元素没有高度，所以需要清除浮动对父级元素的影响，本文介绍清除浮动...

2020-11-01 23:20:50

170浏览

0评论

使用纯css实现开关效果

首先是构思我们使用<input type="checkbox">标签来实现这个效果。checkbox的选中、未选中的特性，刚好对应开关的打开、关闭on:打开 off:关闭<label for="ck2"> <input type=...

2020-11-01 23:20:49

82浏览

0评论

css轻松实现固定比例的块级容器

给H5布局的时候一般都会碰到banner（横幅）比如要显示成2比1 当然后端返回的图片是2比1就好了但事情往往不会那么如意所以怎么办呢？写死宽高总觉得不妥当默认width: 100%;让he...

2020-11-01 23:20:48

47浏览

0评论

如何只使用CSS创建折叠标题效果的示例代码

折叠标题是向用户显示重要信息的绝佳解决方案，例如特价优惠和密钥通知。许多开发人员在创建此类效果时依赖JavaScript，但是，使用纯CSS创建更简单的折叠头效果也是完全可能的。...

2020-11-01 23:20:26

73浏览

0评论

使用CSS3实现input多选框自定义样式的方法示例

原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS效果预览html代码 <div class="radio"...

2020-11-01 23:20:23

93浏览

0评论

使用css实现android系统的loading加载动画

web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环". 今天我们用svg实现android的"环"动画, 下节课实现ios的"菊花".注意 : gif帧数少的原因, 实际动画效...

2020-11-01 23:20:21

50浏览

0评论

flex-grow、flex-shrink、flex-basis和九宫格布局理解

一、flex-grow、flex-shrink、flex-basis属性flex-grow: 定义剩余空间的分成。默认为0，即如果存在剩余空间，也不放大。flex-shrink: 定义了项目的缩小比例。flex-shrink的默认...

2020-11-01 23:20:19

97浏览

0评论

uni-app项目瀑布流布局的实现

github地址，喜欢的可以star下哦插件预览图使用教程1.插件代码拷贝下载后把components目录下waterfall.vue文件拷贝到自己项目目录下2.插件全局配置在项目里main.js中配置如下...

2020-11-01 23:20:18

158浏览

0评论

你可能需要这样的大屏数字滚动效果

大屏数字滚动效果来源于最近工作中一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果，以下是最终实现的效果：思路在实现此效果之前，我们先来捋一下思路，用思维导图来...

2020-11-01 23:20:17

119浏览

0评论

CSS Houdini实现动态波浪纹效果

CSS Houdini 号称 CSS 领域最令人振奋的革新。CSS 本身长期欠缺语法特性，可拓展性几乎为零，并且新特性的支持效率太低，兼容性差。而 Houdini 直接将 CSS 的 API 暴露给开发者，以...

2020-11-01 23:20:14

120浏览

0评论

详解css position 5种不同的值的用法

position属性position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。有五种不同的值：
•static
•relative
•fixed
•absolute
•sticky...

2020-11-01 23:20:12

87浏览

0评论

css实现5种滚动吸顶实现方式的比较(性能升级版)

修改版预览这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。修改内容如下：添加了...

2020-11-01 23:20:11

79浏览

0评论

纯CSS流星雨背景的示例代码

github地址，喜欢的可以star下哦插件预览图使用教程代码展示vue页面使用<template> <view class="space"> <view class="planet"> <view class="planet_...

2020-11-01 23:20:08

142浏览

0评论

CSS画心形的三种方法

下面，介绍三种CSS画心形的方法。实现过程都非常简单，保证你一看就会。1.一颗div一颗心用一个div画出一个心，核心的方法就是使用伪元素。首先，我们在页面上先写出一个div：<div></d...

2020-11-01 23:20:05

150浏览

0评论

css position属性为absolute时其百分值的计算

当position为absolue时候，其相关属性的百分比是相对它参考的元素（包含块）来进行计算并进行位置渲染的。首先我们必须知道：1、[百分比的参照][1]：根据包含块计算百分值（1）元素的mar...

2020-11-01 23:20:03

125浏览

0评论

css 媒体查询 aspect-ratio less 使用方法

css媒体查询有一个宽高比很方便，aspect-ratio ，可以直接使用宽/高来进行页面适配使用样例如下：
// 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内适配 320*50 设计图...

2020-11-01 23:20:01

172浏览

0评论

详解用backgroundImage解决图片轮播切换

单dom节点实现轮播利用backgroundImage可以添加多张图片，以及位置偏移实现轮播效果创建一个div；并用backgroundImage给div附图片利用backgroundPosition调节位置...

2020-11-01 23:20:00

145浏览

0评论

css骚操作表单验证功能的实现代码

效果图原理表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证..）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验...

2020-11-01 23:19:59

105浏览

0评论

前端项目修改默认滚动条样式(小结)

写过挺多项目都需要改变滚动条的默认样式并不想单独下载和引入插件因此纯css修改默认滚动条的样式这次算统一整理下方法，直接上代码。 &::-webkit-scrollbar {...

2020-11-01 23:19:57

132浏览

0评论

CSS实现宽高等比自适应容器的方法

在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。于是我们就需要实现一个宽度自适应，高度为宽度一半的容器。这里先以...

2020-11-01 23:19:56

143浏览

0评论

CSS 样式的使用方式、选择器

在html中使用css的三种方式：1、行内样式：同过元素的style属性来设置<p style="font-size:20px; color:red">hello</p>属性之间分号隔开。2、内部样式：在<head>的<style>元素中...

2020-11-01 23:19:55

219浏览

0评论

css中的计算函数calc在网站布局中一个示例

calc在css 中是一个函数，用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是加号和减号前后需要...

2020-11-01 23:19:54

145浏览

0评论

控制Flex子元素在主轴上的比例的方法

背景flex布局更有效的实现对齐，空间分配。最近又学习下flex子元素的尺寸计算规则，主要是flex-grow, flex-shrink的计算规则的学习。一、基本概念1.1 主轴(Main axis)定义了fle...

2020-11-01 23:19:52

116浏览

0评论

CSS 外边距(margin)重叠及防止方法

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减...

2020-11-01 23:19:51

热门文章