详解css position 5种不同的值的用法
position属性position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值：
•static
•relative
•fixed
•absolute
•sticky...
2020-11-01
css实现5种滚动吸顶实现方式的比较(性能升级版)
修改版预览这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。修改内容如下： 添加了...
2020-11-01
纯CSS流星雨背景的示例代码
github地址，喜欢的可以star下哦插件预览图使用教程代码展示vue页面使用<template> <view class="space"> <view class="planet"> <view class="planet_...
2020-11-01
CSS画心形的三种方法
下面，介绍三种CSS画心形的方法。实现过程都非常简单，保证你一看就会。1.一颗div一颗心用一个div画出一个心，核心的方法就是使用伪元素。首先，我们在页面上先写出一个div：<div></d...
2020-11-01
css position属性为absolute时其百分值的计算
当position为absolue时候，其相关属性的百分比是相对它参考的元素（包含块）来进行计算并进行位置渲染的 。首先我们必须知道：1、[百分比的参照][1]：根据包含块计算百分值（1）元素的mar...
2020-11-01
css 媒体查询 aspect-ratio less 使用方法
css媒体查询有一个 宽高比很方便，aspect-ratio ，可以直接使用宽/高 来进行页面适配 使用样例如下：
// 宽高比在(（320/50）+(728/90))/2 两个尺寸中间值以内 适配 320*50 设计图...
2020-11-01
详解用backgroundImage解决图片轮播切换
单dom节点实现轮播利用backgroundImage可以添加多张图片，以及位置偏移实现轮播效果 创建一个div；并用backgroundImage给div附图片 利用backgroundPosition调节位置...
2020-11-01
css骚操作表单验证功能的实现代码
效果图原理表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证..）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验...
2020-11-01
前端项目修改默认滚动条样式(小结)
写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法，直接上代码。 &::-webkit-scrollbar {...
2020-11-01
CSS实现宽高等比自适应容器的方法
在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。于是我们就需要实现一个 宽度自适应，高度为宽度一半的容器 。这里先以...
2020-11-01
CSS 样式的使用方式、选择器
在html中使用css的三种方式：1、行内样式：同过元素的style属性来设置<p style="font-size:20px; color:red">hello</p>属性之间分号隔开。2、内部样式：在<head>的<style>元素中...
2020-11-01
css中的计算函数calc在网站布局中一个示例
calc在css 中是一个函数，用来做数值的计算。可以进行长度、角度、时间等的计算。支持 + 、 - 、 * 、 / 和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要...
2020-11-01
控制Flex子元素在主轴上的比例的方法
背景flex布局更有效的实现对齐，空间分配。最近又学习下flex子元素的尺寸计算规则，主要是flex-grow, flex-shrink的计算规则的学习。一、基本概念1.1 主轴(Main axis)定义了fle...
2020-11-01
CSS 外边距(margin)重叠及防止方法
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减...
2020-11-01
CSS3 毛玻璃效果
毛玻璃效果做的好能使页面显得非常生动立体。直接上图body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); fon...
2020-11-01
六大布局之FrameLayout的使用
前言上一期我们给大家讲解了LinearLayout，这一期我们为大家讲解一下FrameLayout（帧布局）的使用，相较于其他布局，FrameLayout可以说的上是最简单的一个，并且其使用范围相对来说也相...
2020-11-01
CSS实现照片堆叠效果的实例代码
实现效果 步骤1.初始index.html为了建立第一张照片，也就是最上面的那张。我们只需要添加一个div，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保div的class...
2020-11-01
CSS Reset 样式重置的实现示例
前言：所有浏览器都有附带的默认样式，这些样式应用在每一个页面，叫做“用户代理样式表”。（如下需要梯子）Chromium UA stylesheet -Google Chrome & OperaMozilla UA st...
2020-11-01
移动端适配 使px自动转换rem
先安装postcss-pxtorem： npm install postcss-pxtorem --save-dev 进行安装 通过屏幕的变化，设置动态根元素 font-size ： 我写在vue的html中function setRem () { le...
2020-11-01
详解flex和position兼容采坑笔记
今天有空写了一个自己主页的网站，浏览器兼容（主要ie 9以上和chrome），有一个以前的问题也是很常见的问题，既然遇见了，索性就记录下来。直接看问题吧<!DOCTYPE html><html><head><me...
2020-11-01
详解css粘性定位position：sticky问题采坑
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达...
2020-11-01
css设置Overflow实现隐藏滚动条的同时又可以滚动
css设置Overflow实现隐藏滚动条的同时又可以滚动，具体代码如下所示：.scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto;...
2020-11-01
css画一个棒棒糖的实例代码
背景:每天进步一点点,多积累一点点.就会越来越棒代码:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>棒棒糖</title> <h3>用css画一个棒棒糖</h3>...
2020-11-01
css如何实现n宫格布局的方法示例
常见应用场景
现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 常用在"功能导航"页面无边框, 常用在首页分类设计目标在scss环境下, 通过mi...
2020-11-01
CSS3 animation – steps 函数详解
这几天在看一些 css3 动画的源码实现时，发现 css 代码的 animation 当中有一个比较陌生的单词 steps ，在源码中是这么写的：animation: thunder 2s steps(1, end) infinite;查阅...
2020-11-01
纯css实现输入框placeholder动效及输入校验
更多精彩内容请关注 https://github.com/abc-club/free-resources背景话不多说，我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown :valid :invalid伪类...
2020-11-01
CSS自适应布局实现子元素项目整体居中，内部项目左对齐
日常工作时，我们可能遇到这样一个布局：一个父元素框框（随着浏览器大小自适应宽度）里面有许多按钮，然后这些按钮（宽度固定）的整体需要在父元素内居中对齐，而按钮整体的内容又是从左往...
2020-11-01
你必须要知道关于响应式布局的几件事
一、前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍一些响...
2020-11-01
使用CSS混合模式和SVG来动态更改产品图片的颜色
前两天在Codepen看到了@Kyle Wetton写的一个示例， 使用CSS混合模式和SVG来改变沙发的颜色 。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用，比如说一些美妆...
2020-11-01
css新手教程之背景图充满整个屏幕
想让整个界面有一个背景图片，自然想到的是在body上加background，代码如下：body { width：100%； height: 100%; /* 加载背景图 */ background: url("../static/image...
2020-11-01
用CSS防Lightbox实现点击小图无刷新显示大图代码
用CSS防Lightbox实现点击小图无刷新显示大图代码代码简介：CSS的“Lightbox”是一个人见人爱的图片显示技术，她可以实现点击小图无刷新显示大图的功能。Discuz论坛就...
2020-11-01
CSS loading效果之 吃豆人的实现
emmm 名字瞎想的2333前言这是一个用来练习的css demo，如果有哪里写的不好，还请各位指正，一定虚心接受。嘻嘻HTML布局 <div class="container"> <div class="loading">...
2020-11-01
html/css中float浮动的用法实例详解
一、float基础用法示例1、我们先建两个div盒子，设置高度、宽度和背景颜色；最开始两个盒子在网页上的位置如下： 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了...
2020-11-01
css3进阶之less实现星空动画的示例代码
本文介绍了css3进阶之less实现星空动画的示例代码，分享给大家，具体如下：效果动图如下： 预览链接和代码在我的codepen： https://codepen.io/lio-mengxiang/pen/YzKrEde 知识点预览...
2020-11-01
css3 伪类选择器快速复习小结
前言如果说 css 作为前端开发的基本功, 那么 "选择器" 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计.本篇文章会直接...
2020-11-01
CSS3 @media的基本用法总结
//语法：@media mediatype and | not | only (media feature) { css-code; }//也可以针对不同的媒体使用不同的stylesheets: <link rel="stylesheet" media="mediatype and|no...
2020-11-01
纯css实现乌云密布的天气图标效果
效果效果如下​实现思路 使用box-shadow属性画几个灰色的圆，将这些圆错落的组合在一起，形成乌云图案 after伪元素写乌云下的投影 增加动画dom结构用两个嵌套的d...
2020-11-01
css简单动画之transition属性详解
一、对transition属性的认识1、transition 属性是一个简写属性，可用于设置四个过渡属性：
transition-property 过渡效果的 CSS 属性的名称（height、width、opacity等）。
tr...
2020-11-01
css 不定宽高的元素居中布局解决方案
1. 水平居中公共代码:html:<div class="parent"> parent <br> <div class="child"> child </div></div>css:html, body { margin: 0; width: 100%...
2020-11-01
纯css写一个大太阳的天气图标的方法示例
效果效果图如下实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形，和已有的转变90° after伪元素画个圆实现太阳样式dom结构用两个嵌套的div...
2020-11-01
使用CSS实现图片帧动画与曲线运动
所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是'动'的了。本文主要来说一说第4点和第5点。图片帧动画当我们要实现的动画效果比较复杂，而且...
2020-11-01
css 多列布局解决方案
一. 定宽 + 自适应期望效果: 左侧宽度固定, 右侧宽度自适应
公共代码:
html:<div class="parent"> <div class="left"> <p>left menu</p> </div> <div cla...
2020-11-01
运用CSS methodologies去实现模块化的方法示例
一、什么是 CSS methodologiesCSS methodologies，可以理解成 设计模式，也可以理解成 css 规范，市面使用情况如下图：上图来源：https://2019.stateofcss.com/technologies/你可能在...
2020-11-01
CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。<div class='window'></div>.window { posit...
2020-11-01
css实现旋转翻牌动画效果
css动画之旋转翻牌效果，具体内容如下所示：1、我们先设置两个盒子大小，颜色等等，然后定位重叠在一起，最后再进行动画设置例子如下：<style> .box { height: 300px...
2020-11-01
基于html css实现带搜索图标的搜索框功能
前言给大家分享一下前端用处很多的带小图标的搜索框的制作方法。效果展示
基本思路1、搜索图像用绝对定位放到搜索框的上方2、input框设置文本缩进，大小为搜索图像大小加上图...
2020-11-01
浅谈css position absolute相对于父元素的设置方式
大家知道css的position absolute默认是根据document来设置的，比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。有时候我们需要在父元素的容器内设...
2020-11-01
CSS 设置滚动条样式的实现
webkit滚动条样式重置1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。
2、scrollbar c...
2020-11-01
scss使用mixin不生效(浏览器无法编译出来)的解决方法
mixin方法：浏览器无法编译：以前旧版sass是支持上面写法，现在新版后不支持，传入变量必须加#{}编译浏览器编译：以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持...
2020-11-01
css link与@import区别详解
如何在html中添加css？在html中设置css共有三种方式，分别是： 行内式 内嵌式 导入式-link 导入式-@import1.行内式。即在html标签中的style属性中设置css，值得注意的...
2020-11-01
