CSS实现垂直居中的几种方法小结
在前端布局过程中，我们实现水平居中比较简单，一般通过margin:0 auto;和父元素 text-align: center;就能实现。但要实现垂直居中就没有那么容易，下面向大家分享下我工作中实现垂...
2020-11-01
CSS -webkit-box-orient: vertical属性编译后丢失问题详解
一、起因需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;后来发现代码里...
2020-11-01
css和css3弹性盒模型实现元素宽度（高度）自适应
一、css实现左侧宽度固定右侧宽度自适应1、定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自适应</title> <style> *{...
2020-11-01
移动端布局之动态rem的实现
动态rem1. 首先我们先介绍当下的长度单位px 像素em 一个M的宽度 / 一个汉字的宽度 1em == 自身的 font-sizerem 全称 root em 是根元素（html)的 font-sizevh 全称 viewport h...
2020-11-01
CSS阴影效果的比较之drop-Shadow与box-Shadow
drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。...
2020-11-01
CSS scroll-snap滚动事件停止及元素位置检测实现
一、Scroll Snap是前端必备技能CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻...
2020-11-01
CSS3实现炫酷的切片式图片轮播效果
今天我们学习如何使用CSS创建一个炫酷的图片轮播组件。它的原理简单的说就是通过单击标签元素（label）来切换背景图像和动画效果。核心是使用与标签关联的单选按钮和使用通用兄...
2020-11-01
CSS 响应式布局系统的实例代码
响应式布局系统，在现在流行的 CSS 框架中已经非常常见了。它主要由容器类和约定一行列数的栅格系统组成，组成了一个框架的骨架。在流行的前端框架 Bootstrap 和 Bulma CSS 中，...
2020-11-01
css3实现六边形边框的实例代码
最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，...
2020-11-01
CSS3 分类菜单效果
CSS3 分类菜单效果如下所述：HTML<html><head> <title></title> <style type="text/css"> #bg { width: 1270px; height: 751px; margin: 0 auto; background: u...
2020-11-01
解决hover生成border造成的元素移动方法
前言我们有时候会遇到 hover 伪类给元素添加边框的时候，元素中的内容发生位移，虽然我们设置了 box-sizing: border-box 并且规定了元素的宽高，但是内容依然被边框挤开了。如下...
2020-11-01
详解网站footer沉底效果的三种解决方案
问题背景很多网站设计一般是两个部分，content + footer，content里面装的是网站主体内容，footer里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现下面两种情况：1.内...
2020-11-01
一个关于border-radius值设置的问题记录
问题记录今天本打算要完成一个类似于进度条的小组件， 原型是这样的(这里长200px, 高28px)我一看， 很简单嘛， 抛开那个数字1样式不谈， 整体父级样式就是一个左边半圆形， 右边带有...
2020-11-01
css实现网页栏目左侧固定当滚动到底部时自动调整位置
预览地址：https://ovsexia.gitee.io/leftfixed/html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...
2020-11-01
CSS 类名的问题详解
以下以数字开头的 CSS 类名不会生效：.1st{ color: red;}一个合法的 CSS 类名必需以下面其中之一作为开头：• 下划线 _
•短横线 -
•字母 a - z然后紧跟其他...
2020-11-01
纯CSS3制作页面切换效果的实例代码
此前写的那个太复杂了，来点简单的核心<html><head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } .Bl {...
2020-11-01
css等高布局常用几种方式
等高布局的方式指在同一个父容器中,子元素高度相等的布局.从等高布局实现方式来说,又分为两类伪等高子元素高度差依然存在,只是视觉上给人感觉就是等高.真等高子元素高度相...
2020-11-01
CSS Sticky Footer 几种实现方式
什么是 “Sticky Footer”所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口...
2020-11-01
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
如何反转CSS中的贝塞尔曲线的实现方法
首先来看一看我之前写的一个CSS轮播动画效果，为了让切换时动画的过渡更加的平滑我在animation-timing-function属性中并没有使用CSS提供的各种关键词，而使用了cubic-bezier（贝...
2020-11-01
css 权重值(层叠性)实例详解
•css中有很多选择器,那在多个选择器都作用于同一个元素的情况下会出现什么效果呢? 代码<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <titl...
2020-11-01
CSS使用placeholder-shown伪类实现输入框浮动文字效果
在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。 浮动的文字标签当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签...
2020-11-01
使用CSS实现黑暗模式和高亮模式的切换功能
在 Web技巧 的第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件 prefers-color-scheme 的值 dark 和 light 来进行切换，这是从最底...
2020-11-01
css3实现蒙版弹幕功能
最近在b站上看到一种弹幕效果叫做智能防挡弹幕，也就是传说中的蒙版弹幕， 打开之后效果大概是这样的再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦，是不是感觉很神奇。...
2020-11-01
三步用CSS写一个商城卡券
今天是618 ，各大商城都在搞促销活动，今天我们就来用css做一个商城卡卷，具体如下： 还在为上面这样格式各样的商城卡券的样式而发愁？CSS 不熟，canvas 太难，怎么办？用 CSS 写一个商城卡...
2020-11-01
CSS布局之如何实现居中布局
1. 父级容器设置成表格，子级设为行内元素。适合子级内容为文本展示。<!-- css --><style> #parent { height: 200px; width: 200px; border: 1px so...
2020-11-01
flex布局被子元素撑开如何保持内容不超出容器的方法
移动端里面，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，但是最近在做项目的时候发现一个问题：一个li里面设置了flex,flex: 0 0 33.333%,然后想让子元素里面的文字...
2020-11-01
20个让你效率更高的CSS代码技巧(整理)
在本文中，我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自...
2020-11-01
css实现文字竖排的方式(小结)
html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列.onecn{ width: 20px; margin: 0 auto; line-height: 24px; }.o...
2020-11-01
什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念： 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。我们先了解一个名词：BFC（block formatting cont...
2020-11-01
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
纯css实现更改图片颜色的技巧
css更改图片颜色的技巧 ，代码很简单，具体代码如下所示：tips： JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色.pic1 { background-image: url($img), linear-gr...
2020-11-01
解决margin 外边距合并问题
一、兄弟元素的外边距合并效果图如下：（二者之间的间距为100px，不是150px）二、嵌套元素的外边距合并对于两个嵌套关系的元素，如果父元素中没有内容或者内容在子元素的后面并且没有...
2020-11-01
几种常见的CSS布局(小结)
本文概要本文将介绍如下几种常见的布局：其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法一、单列布局常见的单列布局...
2020-11-01
详解css3中 text-fill-color属性
text-fill-color是什么意思呢？单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色，和color的效果很相似。如果同时设置text-fill-color...
2020-11-01
CSS 中重要的层叠概念详解
最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的...
2020-11-01
css 给div添加滚动并隐藏滚动条
css 给div添加滚动并隐藏滚动条 ，具体代码如下所示: 在html中<div class="box"> <div>下面内容会单独滚动</div> <div class="scroll"> <div class="content">...
2020-11-01
css列表滑动防止被底部遮住和适配屏幕长一点的机型处理
1、移动端处理列表滑动的时候，微信底下有自带的返回页面按钮，经常会被遮住，遇到屏幕长一点的，下面会短一大截，以下用此方法可以解决。
.container{ position:relative; backgr...
2020-11-01
css行内样式,内嵌样式,外部引用样式的三种使用方式
三中的使用方法的简单实例如下：行内样式：<!doctype html><html><head> <meta charset="UTF-8"> <title>css行内样式</title></head><body><div style="width:100px;height:100...
2020-11-01
使用CSS隐藏元素滚动条的示例代码
如何隐藏滚动条，同时仍然可以在任何元素上滚动？首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。想要完全隐藏滚动条只需设置overflow：hidden...
2020-11-01
Css实现清除浮动的方法汇总
网页布局中经常会用到float浮动，但是浮动的块级元素脱离了标准文档流，使得浮动元素的父元素没有高度，导致父级元素没有高度，所以需要清除浮动对父级元素的影响，本文介绍清除浮动...
2020-11-01
使用纯css实现开关效果
首先是构思我们使用<input type="checkbox">标签来实现这个效果。checkbox的选中、未选中的特性，刚好对应开关的打开、关闭on:打开 off:关闭<label for="ck2"> <input type=...
2020-11-01
css轻松实现固定比例的块级容器
给H5布局的时候一般都会碰到banner（横幅）比如要显示成2比1 当然后端返回的图片是2比1就好了 但事情往往不会那么如意 所以怎么办呢 ？写死宽高总觉得不妥当默认width: 100%;让he...
2020-11-01
如何只使用CSS创建折叠标题效果的示例代码
折叠标题是向用户显示重要信息的绝佳解决方案，例如特价优惠和密钥通知。许多开发人员在创建此类效果时依赖JavaScript，但是，使用纯CSS创建更简单的折叠头效果也是完全可能的。...
2020-11-01
使用CSS3实现input多选框自定义样式的方法示例
原理：首先把input元素隐藏掉，然后用CSS设置label元素（其他元素也可以）的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS效果预览html代码 <div class="radio"...
2020-11-01
使用css实现android系统的loading加载动画
web常用的loading图标有2种, 一种是ios的"菊花", 一种是android的"环". 今天我们用svg实现android的"环"动画, 下节课实现ios的"菊花".注意 : gif帧数少的原因, 实际动画效...
2020-11-01
flex-grow、flex-shrink、flex-basis和九宫格布局理解
一、flex-grow、flex-shrink、flex-basis属性flex-grow: 定义剩余空间的分成。默认为0，即如果存在剩余空间，也不放大。flex-shrink: 定义了项目的缩小比例。flex-shrink的默认...
2020-11-01
uni-app项目瀑布流布局的实现
github地址，喜欢的可以star下哦插件预览图使用教程1.插件代码拷贝下载后把components目录下waterfall.vue文件拷贝到自己项目目录下2.插件全局配置在项目里main.js中配置如下...
2020-11-01
你可能需要这样的大屏数字滚动效果
大屏数字滚动效果来源于最近工作中一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果，以下是最终实现的效果： 思路在实现此效果之前，我们先来捋一下思路，用思维导图来...
2020-11-01
CSS Houdini实现动态波浪纹效果
CSS Houdini 号称 CSS 领域最令人振奋的革新。CSS 本身长期欠缺语法特性，可拓展性几乎为零，并且新特性的支持效率太低，兼容性差。而 Houdini 直接将 CSS 的 API 暴露给开发者，以...
2020-11-01
