CSS - 教程之家

186浏览

0评论

纯css如何实现自适应标题浮动效果？（代码示例）

源码展示：<!doctype html><html><head><meta charset="utf-8"><title>纯css实现自适应标题浮动效果</title> <style> body { background-color:#FAFAF...

2020-09-29

129浏览

0评论

浅谈css的布局模型和常见代码缩写与长度单位

知识点一：css布局模型：布局模型是建立在盒模型基础之上，在网页中，元素有三种布局模型：1.流动模型（Flow）2.浮动模型 (Float)3.层模型（Layer）。一、流动模型：默认的网页布局模式。也就是...

2020-09-29

141浏览

0评论

CSS怎么引入页面？三种引入方式与其优先级介绍

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如p{font-size:12px;color:red;font-weight:bold;}文字大小、...

2020-09-29

162浏览

0评论

浅谈css精灵图(图片合成技术)

css精灵图(雪碧图、图片合成技术)1、什么是css精灵图（sprite）？css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定...

2020-09-29

98浏览

0评论

CSS如何绘制放大缩小关闭按钮效果？(附代码)

如图所示：使用CSS 绘制上述三个按钮：<template> <div> <button>缩小</button> <button>放大</button> <button>关闭</button> </div></template><script>export de...

2020-09-29

146浏览

0评论

css如何实现流程导航效果？三种方法介绍

css实现流程导航效果，具体内容如下所示：::tip 使用纯css实现线上流程导航效果。本文统一采取 flex 布局 ,你也可以采用其他布局实现，核心原理不变 :::方法一：利用裁剪（该方法IE...

2020-09-29

203浏览

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="wav...

2020-09-29

182浏览

0评论

css如何实现信纸/同学录效果？（附代码）

实现思路：网格背景，由css3的线性渐变来实现。纸上的打孔，由圆和圆柱组成，多个打孔，可以由box-shadow的平铺来实现。实际代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"...

2020-09-29

266浏览

0评论

css3如何给背景图片加颜色遮罩？

在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<p class="wrap1"> <p class="inner"> </p>...

2020-09-29

135浏览

0评论

CSS如何实现半透明边框与多重边框效果？

场景一：实现半透明边框：由于CSS样式的默认行为，背景色的渲染范围是 content+padding+border。半透明边框被主调色影响, 实现的效果为解决方案：使用background-clip 属性规定背景...

2020-09-29

155浏览

0评论

css布局之实现垂直居中的方法介绍

css实现垂直居中的方法如下：1、利用line-height实现居中，这种方法适合纯文字类的；<style>.parents { height: 400px; line-height: 400px; width: 400px; bord...

2020-09-29

173浏览

0评论

CSS3如何实现图片抽屉式效果？（附代码）

首先，我们来看一下效果：这个效果实现原理很简单：只要你掌握css3动画和过渡相关知识就行，不用js代码；HTML代码：<div> <ul id="list"> <li > <a h...

2020-09-29

190浏览

0评论

负margin会产生什么影响？在web布局中的应用

今天整理些margin：负数会对哪些元素或者定位产生影响、margin为负值在web布局中的应用做下总结。（不能说最全，我已经尽力收集整理）一、margin为负值产生的影响对于自身的影响当...

2020-09-29

181浏览

0评论

浅谈margin负值的用法

1、为负margin“平反”我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了。在网页设计中，人们对负margin用法的态度大相径庭，有的人非常喜欢，而有...

2020-09-29

133浏览

0评论

浅谈CSS样式中的*、_符号、!important

CSS样式中的!important、*、_符号!important、*、_其实没什么用，皆是用来设置样式的优先级，但是样式的优先级你可以自行排好其先后位置来设置，然而你还是要看懂的。我们知道，CSS...

2020-09-29

118浏览

0评论

css如何实现文本两端对齐？两种方法介绍

css之文本两端对齐的两种解决方法说起文本对齐，大家都知道text-align，最常用的有left、right、center，今天我们说一下justify，也就是文本两端对齐。说起来简单，但是有些小坑大家...

2020-09-29

122浏览

0评论

为什么要清除浮动呢？清除浮动的几种方法介绍

标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒子...

2020-09-29

110浏览

0评论

纯CSS3如何打造自行车动画效果？（代码实例）

我们先来看看效果图吧，看了效果图之后你们就会有动力去打造属于你们自己的自行车啦代码如下，复制即可用<!DOCTYPE html><html><head><meta charset="UTF-8"><title>快来打造属...

2020-09-29

106浏览

0评论

CSS如何实现照片堆叠效果？（代码实例）

实现效果步骤1.初始index.html为了建立第一张照片，也就是最上面的那张。我们只需要添加一个p，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保p的class为sta...

2020-09-29

130浏览

0评论

浅谈css zoom属性的作用

这里介绍一下CSS中的Zoom属性，这个属性一般不为人知，甚至有些CSS手册中都查询不到。但经常会在一些CSS样式中看到它出现。Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持...

2020-09-29

168浏览

0评论

CSS3如何实现响应式的瀑布流？（代码实例）

前言：虽然瀑布流在现在不是很流行了，自己之前通过JavaScript和css3都实现过。这次做项目的时候又遇到了这个问题，就重新整理了一下，并把代码放出来分享一下<!DOCTYPE html><html...

2020-09-29

165浏览

0评论

CSS3如何实现各种动态表情效果？（代码示例）

CSS3实现各种动态表情效果效果图：代码如下，复制即可使用：<!DOCTYPE html><html><head><title></title><style type="text/css">body { text-align: center; margin: 80px auto...

2020-09-29

216浏览

0评论

CSS content属性有什么作用？可以怎么用？

认识 :before 和 :after 默认 display: inline；必须设置 content 属性，否则一切都是无用功， content 属性也只能应用在 :before 和 :after 伪元素上；默认user-select: none...

2020-09-29

139浏览

0评论

纯css如何实现开关效果？（代码示例）

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

2020-09-29

124浏览

0评论

浅谈静态、自适应、流式、响应式、弹性等布局的区别

静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的p...

2020-09-29

143浏览

0评论

使用CSS网格布局（grid）实现响应式设计

常用Grid布局属性介绍下面从一个简单Grid布局例子说起。CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网...

2020-09-29

155浏览

0评论

快速掌握网格布局（grid）常用属性

和flex布局不同的是，网格布局（grid）是一个二维的布局，可以创建任意行列的布局。首先来介绍几个概念;想象一个三行三列的布局，网格线就是构成网格所有的线条，三行三列的布局每行就...

2020-09-29

130浏览

0评论

了解一下CSS3弹性布局

一、CSS3弹性盒子弹性盒子是CSS3的一种新布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局...

2020-09-29

133浏览

0评论

css中URL路径相关介绍

项目中，为a标签添加背景，老是没效果（VS2013中相关文件的位置：CSS文件位于/Content中，图片位于/images中）为a标签添加背景的CSS代码为：background:url(images/sort.png) no-repeat...

2020-09-29

95浏览

0评论

值得收藏的 55 个提高CSS 开发效率的小技巧

这篇文章会记录我们平时常用到的 CSS 片段，使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的，墙裂建议点赞收藏再看，方便日后查找清除浮动浮动给我们的代码带来的麻烦，想...

2020-09-29

154浏览

0评论

css中 :not()选择器介绍

:not() 选择器用于一些特殊的功能的呈现上，我举一个我使用的例子：当你的鼠标hover到这些标签的时候，会想第二个标签一样改变颜色。而当你点击第一个的时候标签“Asset Sec...

2020-09-29

91浏览

0评论

优化css性能的方法

css匹配原理在优化css之前我们需要了解下css是怎么进行工作的，我们都知道css是由选择器，属性和属性值构成的。我们可能会这样写上一行代码//css.con .loulan1 p span{ display...

2020-09-29

150浏览

0评论

如何实现三栏布局（圣杯布局、双飞翼布局）？

圣杯布局、双飞翼布局,本质上都是三栏布局──中间自适应两边固定宽。圣杯布局圣杯HTML结构： <div class='main'> <div class="middle">中间的</div> <div cla...

2020-09-29

110浏览

0评论

浅谈CSS中z-index属性的用法

写css z-index的时候经常会出现很多莫名其妙的问题，下面对z-index属性做彻底的剖析，本文参考了《一个css中z-index的用法》，并做了很多demo，方便了解z-index的用法.一、z-index...

2020-09-29

303浏览

0评论

css3如何实现二维码扫描特效？（代码示例）

第一步，实现网格背景：background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27...

2020-09-29

120浏览

0评论

关于CSS中BFC的图文详解

这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFCBFC（Block Formatting Context）格式化上下...

2020-09-29

128浏览

0评论

CSS中!important的使用介绍

CSS中的!importan属性可以让浏览器优选执行这个语句，加上!importanrt可以覆盖父级的样式。本文就来为大家介绍一下CSS中!important的使用方法。CSS的原理：我们知道，CSS写在不同...

2020-09-29

162浏览

0评论

3种常见的CSS页面布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。本文就来为大家介绍3种常见的CSS页面布局，希望对大家有一定的帮助。一、左右两列布...

2020-09-29

154浏览

0评论

css中使用font控制字体变换

CSS字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）font-family控制字体，由于各个电脑系统安装的字体不尽相同，但是基本装有黑体、宋体与微软雅黑这...

2020-09-29

148浏览

0评论

css3一些新增属性介绍

css3和css有什么区别？简单来讲css3是css（层叠样式表）技术的升级版本，css3新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Fon...

2020-09-29

89浏览

0评论

CSS中元素的显示模式介绍

在CSS中，根据元素显示模式的不同元素标签被分为了两类:行内元素（inline-level）、块级元素（block-level）。本文就来为大家介绍一下CSS中元素的显示模式。首先介绍什么是行内元素，什...

2020-09-29

301浏览

0评论

css如何禁止元素的点击事件

在实际工作中，如果我们需要禁止某个元素的点击事件，可以将该元素的pointer-events属性设为none。如下：测试代码：.disabled { pointer-events: none; cursor: default;...

2020-09-29

128浏览

0评论

如何利用layui实现增删查改操作

首先认识layuilayui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，...

2020-09-29

94浏览

0评论

分享5个很常用的CSS3网页小效果

本篇文章分享几个很常用的CSS3网页小效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。第一种效果：由于录制gif图片会掉帧，所以看起来不流畅，很卡，但其实实...

2020-09-27

200浏览

0评论

七夕情人节快乐，送你一个css画的爱心！！

CSS是一个需要深度挖掘的东西，里面有很多样式属性，掌握几个常用的便可以实现很好看的效果，例如用CSS画爱心，七夕送给另一半，告白！前期预备知识：　明白正方形的画法。明白圆形的...

2020-09-27

101浏览

0评论

谈谈CSS代码的书写规范

可能不同团队都有各自的规范，又或者很多人在写 CSS 的时候还是想到什么就写什么，不存在太多的约束。我觉得 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就...

2020-09-27

181浏览

0评论

深入浅析 css 多种背景的使用技巧及好处

CSS background是最常用的CSS属性之一。然而，并不是所有开发人员都知道使用多种背景。这段时间都在关注使用多种背景场景。在本文中，会详细介绍background-image`属性，并结合图...

2020-09-27

208浏览

0评论

最强大的 CSS 布局 —— Grid 布局

Grid 布局是什么？Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局...

2020-09-27

133浏览

0评论

深入研究CSS :placeholder-shown伪类

一般我们常见placeholder伪类选择器用来修改默认样式及文案，忽然发现placeholder-shown伪类选择器，比较官方的解释是CSS伪类表示任何显示占位符文本的form元素。简单来说就是...

2020-09-27

223浏览

0评论

深入了解 CSS 中的 min()、max()、clamp()

2020年4月8日，Firefox浏览器支持了 CSS 比较函数（min()，max()，clamp()），这意味着现在所有主流浏览器都支持它们。这些CSS函数最大的作用就是可以为我们提供动态布局和更灵活设计...

2020-09-27

热门文章