css实现网页右下角点赞小卡片效果（实例代码）
效果实现HTML先准备一个干净的 html 页面，写好节点：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
2020-10-15
CSS 选择所有子元素添加样式的方法
方法：以实际项目中less为例：.lk-toolbar { .el-input { width: 169px; margin-right: 10px; } > * { margin-bottom: 20px; }}上面代码成功...
2020-10-15
CSS子元素跟父元素的高度一致的实现方法
绝对定位方法：（1）将父元素设置为相对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent { /*关键代码*/ position: relative; /*其他样式*/ width: 800px; colo...
2020-10-15
css子元素相对父元素进行定位的实现
解决方案在父元素中加入position:relative;
子元素中加入position:absolute; right:20px;代码html结构<div id="div1"> <div id="div2"></div></div>css#div1{ width:500px;...
2020-10-15
纯CSS让子元素突破父元素的宽度限制
在写样式中，我们可以经常看到这样的情况 代码如下<div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;"> 父元素 <div style="border: 1px so...
2020-10-15
CSS实现子元素div水平垂直居中的示例
div基本布局<div class="main"> <div class="center"></div> </div>css样式1. 配合定位与margin：auto父元素加相对定位，子元素加绝对定位 .main{ width: 300px; heig...
2020-10-15
详解CSS 子元素相对于父元素固定定位解决方案
基本概念绝对定位(absolute)：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的...
2020-10-15
CSS 使用规则总结
一.缩写规则
关于边距 margin（4边）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px （省略的左等于右）
1px 2px (省略的上等于下)
1px （四边都相同）
简化所有：
*/ body{margi...
2020-10-15
css内联样式可以改么？
css内联样式可以改。下面本篇文章给大家介绍一下修改内联样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。以前写html有个不好的习惯，就是把样式...
2020-10-14
xml文件用什么指令来使用css？
把内容与表示分离是 XML 的一个主要目标，XML 完美地实现了这一目标。一个文档并不限于只使用一个样式表，可以针对不同读者和环境提供多个样式表。本文将说明如何在 XML 文档...
2020-10-14
css如何让padding不占宽度？
在css中可以使用box-sizing属性，通过给元素设置“box-sizing:border-box;”样式来让padding不占宽度。以前，如果指定 div 的宽度为div { width: 100px;...
2020-10-14
分享3种网页中引用阿里iconfont字体图标方式
本篇文章给大家分享在网页中引用阿里iconfont字体图标的三种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。首先，你需要在阿里巴巴图标矢量库中创建账...
2020-10-14
16 个CSS开发中需要了解的DevTools技巧
大多数开发者基本都使用浏览器的开发者工具调试前端，但即使用了好几年 Chrome 的开发者工具，我仍然会遇到从未见过的技巧和功能。在本文中，我写了许多在开发者工具中与 CSS 相...
2020-10-14
css实现文字描边以及倒影效果
描边： 主流浏览器都支持-webkit-text-stroke:<length> <color>;-webkit-text-stroke:4px pink;/*描边宽度4px，字体颜色粉红*/倒影：谷歌、safari、opera支持，火狐不支持-webkit-b...
2020-10-14
深入浅析CSS 布局和 BFC
CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道...
2020-10-12
css实现禁止页面文字被选中功能
通过css实现页面文字不能被选中.cannotselect { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;...
2020-09-30
你需要知道的关于CSS margin的一些知识
CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性，以及一次设置所有四个属性的简写 margin。margin看起来是一个相当简单的事情，但是，在本文中，咱们将看...
2020-09-29
为何要使用css预处理器？
背景CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如...
2020-09-29
CSS盒模型详解（含操作题）
盒子模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己...
2020-09-29
CSS3如何创建简单动画？(案例介绍)
CSS3如何创建简单动画？下面本篇文章通过案例来介绍使用CSS3创建简单动画的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1.简易加载中 @keyframes my...
2020-09-29
使用SASS怎么创建可重用CSS
Sass 是一个CSS预处理程序，至今使用广泛，它之所以流行，是因为它修复了几个CSS缺陷：Sass 也是 Bootstrap 4 运行的基础。这意味着为了理解如何操作引导代码而学习Sass是非常有帮...
2020-09-29
CSS学习之浅谈尺寸样式属性（height和width属性）
尺寸样式属性介绍# 属性 值 含义 height auto：自动，浏览器会自动计算高度length：使用px定义高度%：基于包含它的块级对象的百分比高度 设置元素高度 ...
2020-09-29
css设置毛玻璃效果方法介绍
比如我们需要将下图中页面中间的文字区域变成毛玻璃效果，首先想到的是给其设置一个透明度，并添加模糊滤镜：.content { background-color: rgba(0,0,0,0.3); -webkit-filt...
2020-09-29
CSS中的Media媒体查询深入理解
媒介类型在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在media属性用于为不同的媒介类型规定不同的样式screen 计算机屏幕（默认值）tty 电传打字机以及使用等宽...
2020-09-29
深入学习border-sizing属性
box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘...
2020-09-29
CSS学习之了解”标准文档流”
标准文档流介绍 我们在制作HTML网页的时候，都必须遵循一个流的规则如：从左至右、从上至下规则。 让我们进入HTML网页的标准文档流基本原理实践。 代码块<!DOCTYPE html><ht...
2020-09-29
使用CSS制作导航菜单的方法
下面我们来通过几个实例来介绍一些使用css制作导航菜单的方法，希望大家可以更加直观的了解如何使用css制作导航菜单。方式一：直接编写代码实现代码如下：<html> <head> <t...
2020-09-29
css中关于尖角处理的细节
在各种网站里面，我们会经常看到类似于这样的尖角：它实现的方式有多种，哪种才是最简单的？哪种才是最优秀的？首先我声明一下，我还不清楚这个东西具体叫什么名字（哪位知道还望告知），暂且...
2020-09-29
网页中如何设置默认图片？方式介绍
现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在谷歌浏览器中就会显示这样<img src="logo.jpg" alt="logo">这里的alt属性是为了当图片加载失败时告诉用户...
2020-09-29
CSS中z-index属性的使用方法和示例介绍
z-index属性介绍 只有设置了定位我们才会使用到该z-index属性，如：固定定位、相对定位、绝对定位。 定位元素默认的z-index属性值是0。 如果2个定位的元素都没有设置z-index...
2020-09-29
浅谈CSS3中新增的结构伪类和伪元素
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 ...
2020-09-29
css设置文本两端对齐的方法
text-align直接设为justify就行了，text-justify的情况就复杂了，可能有人对它还不熟悉。IE的取值如下： auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增...
2020-09-29
CSS如何设置文本和元素阴影效果？（代码示例）
文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。 text-shadow属性值说明，在文本阴影实践中...
2020-09-29
纯css如何实现按钮的水滴动画效果？
前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已...
2020-09-29
CSS怎么用来管理js事件？
CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。原...
2020-09-29
CSS如何实现粒子按钮动画效果?
在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。所以用最简单通俗的代码...
2020-09-29
一些容易被忽略CSS特性
大小写不敏感虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的.test{ background-COLOR:#a00; width:100px; height: 100px;}虽然把background-co...
2020-09-29
常用CSS书写技巧介绍
我们需要针对不同的浏览器去写不同的CSS，让它能够兼容不同的浏览器，在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,...
2020-09-29
怎么使用纯css来实现一个加号效果？（附代码）
实现下图的加号效果：若想实现这个效果， 只需一个div元素即可搞定。需要用到css的为了before和after， 以及border特性。先设置一个div便签<div class="add"></div>再设置一个边...
2020-09-29
CSS实例之如何实现滚动图片栏效果？（代码示例）
网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。主要原理是通过动画向左移动。首先给出两组一样的图片（同一行上），让整体图片向左移动...
2020-09-29
纯CSS是怎么实现图片左右翻转的？
CSS 翻转图片主要用到的技术除了3D翻转和定位 ，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。效果图如下：具体的步骤如下：1、...
2020-09-29
CSS Hack详解
CSS Hack主要分为属性标记法和选择器前缀法两种：属性标记法【IE6-】对于IE6-浏览器主要使用下划线_和中划线-这两种字符_color:blue;
-color:blue;【IE7-】对于IE7-浏览器可...
2020-09-29
借助CSS Grid Generator快速上手Grid布局
CSS Grid Generator
CSS Grid Generator是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具，允许咱们创建一个基本的 grid 布局，然后就可以使用生成对应的代码，帮助...
2020-09-29
css模块命名规范（推荐）
css命名规范： 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginb...
2020-09-29
CSS代码规范(推荐)
一、语法1.1 注意（1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。（2）为选择器分组时，将单独的选择器单独放在一行。（3）为了代码的易读性，在每个声...
2020-09-29
less常用语法介绍
变量@变量插值@mySelector: banner;.@{mySelector} { font-weight: bold;}延迟加载变量是延迟加载的，在使用前不一定要先申明.brass { @var: 2; three: @var; //...
2020-09-29
