编程开发 - 教程之家

214浏览

0评论

使用css写带纹理渐变背景图的示例代码

项目中页面长度大概在2000px以上，再加上背景图是带纹理和渐变的，所以加载起来会很大很耗费时间，所以就改用css实现了。这次我们主要用到的网站是Hero Patterns——免...

2020-10-15 23:14:42

223浏览

0评论

解决flex布局space-between最后一行左对齐的方法

首先看代码和效果↓<style> .main { outline: 1px solid; display: flex; justify-content: space-between; flex...

2020-10-15 23:14:39

246浏览

0评论

flex布局实现无缝滚动的示例代码

本文主要介绍了flex布局实现无缝滚动的示例代码，分享给大家，具体如下：案例的演示flex布局所谓flex布局就是弹性盒布局,这种布局在移动端比较常用，但随着浏览器的版本更新，flex布...

2020-10-15 23:14:33

207浏览

0评论

CSS 伪类修改input选中样式的示例代码

注：该表引自W3School教程伪元素的分类及作用：下面通过代码看下CSS 伪类修改input选中样式的示例代码，代码如下所示：主要是用到了after伪类和字体符号。input{ -webkit-appear...

2020-10-15 23:13:49

198浏览

0评论

CSS 控制动画播放与暂停的小技巧(非常实用)

今天要介绍一种很简单的使用 CSS 控制动画播放与暂停的小技巧。使用好了，可以在很多实际场景得以运用。我们先来看个例子，本例子是我在闲逛 Codepen 时看到了，很有意思：本例子，C...

2020-10-15 23:13:47

184浏览

0评论

flex布局换行空白间隙之align-content的使用

一、本文实现的效果图如下：布局右侧使用flex布局，超过3个则换行。父元素代码如下：.nav-right{ width: 75%; padding: 10px; display: flex; /* 默认是水平的 */ flex-dire...

2020-10-15 23:13:45

342浏览

0评论

flex布局实现上下固定中间滑动的布局方式

本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下:例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。简单介绍一下如何实现固定...

2020-10-15 23:13:43

174浏览

0评论

css3 flex布局实现平均分配元素的示例代码

本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下：例子一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex...

2020-10-15 23:13:41

234浏览

0评论

CSS字体、文本、列表属性详细介绍

1.字体属性　　color，规定文本的颜色，如 div{color:red;}　　font-style，规定文本显示方式，如 p.normal {font-style: normal;} ，有normal（正常显示）、italic（斜体显示，字体结构有一...

2020-10-15 23:13:39

370浏览

0评论

深入理解CSS background-blend-mode的作用机制

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、可能都知道的首先，讲两点大家可能都知道的知识点：1.background-blend-mode 本身就带有隔离...

2020-10-15 23:13:38

204浏览

0评论

CSS中的四种定位区别详解

我们都知道，前端开发里面的CSS中常用的定位方式有普通定位，相对定位，绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别，在使...

2020-10-15 23:13:36

102浏览

0评论

解决移动端1px边框最好的方法(推荐)

在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。1px 边框问题的由来苹果 iPhone4 首...

2020-10-15 23:13:35

168浏览

0评论

让CSS flex布局最后一行列表左对齐的N种方法(小结)

引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。问题描述//html<div class="container"> <div class="list"></div>...

2020-10-15 23:13:34

257浏览

0评论

CSS 列表模型之marker标记的使用

本文主要对::master伪元素、list-item下的list-style-image、list-style-type样式属性进行介绍，并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介...

2020-10-15 23:13:32

255浏览

0评论

css counter计数器与content总结

　　content属性早在css2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。content属性现在已经得到大部分浏览器的支持，关于content属性的支持情况可以在canius...

2020-10-15 23:13:31

162浏览

0评论

利用transform实现一个纯CSS弹出菜单的示例代码

前言在制作顶部菜单的时候，都会要求制作弹出的二级菜单，早先的做法是用jQuery的来控制二级菜单的显示和过渡动画，但利用CSS3中的transform属性后，这一切都变得异常简单先上效果...

2020-10-15 23:13:29

169浏览

0评论

详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式

CSS引入方式-行内式通过 style这个标签属性,将css键值对直接写入标签内<p style="width: 100px;height: 100px;background: red;"></p> <!--注释:这段代码描述的是一个宽高...

2020-10-15 23:13:25

188浏览

0评论

CSS 容器背景 10 种颜色渐变Demo（linear-gradient()）

语法background: linear-gradient(direction,color-stop1,color-stop2,...); direction：用角度值指定渐变的方向（或角度）。 color-stop1,color-stop2,...：用于指定渐变的...

2020-10-15 23:13:24

157浏览

0评论

纯CSS3+DIV实现小三角形边框效果的示例代码

具体代码如下所示：html代码是这样的<div class="arrow-up"> </div><div class="arrow-down"> </div><div class="arrow-left">...

2020-10-15 23:13:19

260浏览

0评论

Flex布局让子项保持自身高度的实现

在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。
这是因为Flex 布局会默认：把所有子项变成水平排列。默认不自动换行。让子项与其内容...

2020-10-15 23:13:18

181浏览

0评论

Flex布局实现div内部子元素垂直居中的示例

1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear...

2020-10-15 23:13:15

303浏览

0评论

详解flex布局与position:absolute/fixed的冲突问题

之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下：项目实战：我们现在想做一个头部的导...

2020-10-15 23:13:13

130浏览

0评论

CSS3 input框的实现代码类似Google登录的动画效果

用css3将input框写出类似Google登录页面的动画效果效果一代码如下CSSbody{ background-color:#acacac; } .form-container{ display: block; position: relativ...

2020-10-15 23:13:11

293浏览

0评论

详解flex布局下图片变形的解决方法

flex布局是现在常用的一个布局方式，但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像，右边文字的时候，发现固定图片的宽度时，图片宽度仍然发生了变化。下图...

2020-10-15 23:13:10

144浏览

0评论

使用Flex布局实现头部固定内容区域滚动的方法

页面头部固定布局以前用 position:fixed实现，如今可以用flex布局实现，快捷方便。Flex布局好处：1.不破坏html文档流 2.兼容性更好。display: flex 和 display: -webkit-box 仅是...

2020-10-15 23:13:08

176浏览

0评论

CSS中的两个特殊值用于控制层叠的inherit和initial的方法

在CSS中有两个特殊值可以赋给任意属性，用于控制层叠：inherit和initial。我们来看看这两个特殊值。使用inherit关键字有时，我们想用继承代替一个层叠值。这时候可以用 inherit...

2020-10-15 23:13:07

248浏览

0评论

CSS动态条形加载条效果的示例代码

运用了css变量的知识，直接上代码及其我加的注释<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>展示一个css动态条形加载条</title> <style> /...

2020-10-15 23:13:06

205浏览

0评论

CSS3实现线性渐变用法示例代码详解

前言演示下太老版本浏览器的渐变实现了[IE9-];
IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样;.testDiv { width:400px; height:400px; border:1px solid #f00; /...

2020-10-15 23:13:04

182浏览

0评论

H5中取消a标签在点击时的背景颜色的方法

1、取消a标签在移动端点击时的蓝色a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select:...

2020-10-15 23:13:02

204浏览

0评论

CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)

简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性，可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。...

2020-10-15 23:13:01

208浏览

0评论

CSS心形加载的动画源码的实现

废话不多说上代码，代码很简答，研究一下就明白了，有不明白的可以问我。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/cs...

2020-10-15 23:12:59

165浏览

0评论

使用CSS3实现字体颜色渐变的实现

在使用Animation.css的时候发现它的官网字体会渐变，看了一下他的css很有趣 .site__title { color: #f35626; background-image: -webkit-linear-gradient(92deg, #f35...

2020-10-15 23:12:57

232浏览

0评论

css动画效果之animation的常用样式

animation动画定义一个动画：/*设置一个关键帧，定义动画每一步执行的动作*/@keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: transla...

2020-10-15 23:12:56

129浏览

0评论

使用css的filter写鼠标滑过效果的实现示例

使用css的filter写鼠标滑过效果<div class="filter-div"> <img class="filter-img" src="../assets/images/01list.png"/></div><style> .filter-div { width: 67p...

2020-10-15 23:12:54

379浏览

0评论

详解css-vars-ponyfill 在ie环境下使用问题（nextjs 构建）

css-vars-ponyfill通过css变量来实现网页换肤的过程中，会出现兼容性问题。为了解决ie，qq，百度浏览器等兼容性问题，引入css-vars-ponyfill，但是在ie浏览器下，css-vars-ponyfill 的...

2020-10-15 23:12:53

157浏览

0评论

CSS中使用text-align、margin：0 auto居中的示例代码

CSS中使用text-align、margin：0 auto居中在使用text-align或者是margin：0 auto进行居中时，可能会出现无效的情况，下面用两个例子来讲解和解决问题示例1：让内联元素居中使用text-a...

2020-10-15 23:12:51

200浏览

0评论

CSS line-height的如何继承的问题

Line-height的如何继承？写具体数值，如30px,则继承该值（比较好理解）写比例，如2/1.5,则继承该比例（比较好理解）比如body中line-height设为2，则p标签继承line-height为2,则算出...

2020-10-15 23:12:49

134浏览

0评论

浅谈CSS到底会不会阻塞页面渲染

可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。原理解析那么为什么会出现上面的现象呢？我们从浏览器的渲...

2020-10-15 23:12:34

215浏览

0评论

CSS实现鼠标悬停改变其他标签样式的示例代码

前言：
据我了解目前CSS只能控制悬停时改变该标签下面的兄弟标签和子标签样式，如有大佬有好的方法请指教！
控制其他标签（根据控制标签与被控制标签之间的关系）可分为三种...

2020-10-15 23:12:29

282浏览

0评论

解决line-height=height元素高度但是文字并没有垂直居中的问题

先说下为什么line-height等于元素高度文字却没有垂直居中，其实line-height等于元素高度的时候文本并不是真的居中了，而是看着居中了，当元素高度和font-size差距较大的时候，这种...

2020-10-15 23:12:28

295浏览

0评论

深入浅析CSS 的多种背景及使用场景和技巧

本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料CSS background是最常用的CSS属性之一。然而，并不是所有开发人...

2020-10-15 23:12:26

264浏览

0评论

详解中文字体在CSS样式中font-family对应的英文名称

宋体：SimSun
黑体：SimHei
微软雅黑：Microsoft YaHei
微软正黑体：Microsoft JhengHei
新宋体：NSimSun
新细明体：PMingLiU
细明体：MingLiU
标楷体：DFKai-SB
仿宋：FangSong
楷体：KaiTi
仿...

2020-10-15 23:12:20

216浏览

0评论

纯CSS实现图片百叶窗展示效果示例

首先给大家看一下完成效果主要思路：其实这个百叶窗还是利用了一种障眼法，我们看上去是鼠标移动上去之后，图片展开了，其实这些图片在原地根本没有动，只不过是我们把这些图片放在了...

2020-10-15 23:12:19

149浏览

0评论

css 命名：BEM, scoped css, css modules 与 css-in-js详解

css 作用域是全局的，项目越来越大，人越来越多，命名慢慢成为问题，以下是几种解决命名问题的方案一. BEM以 .block__element--modifier 形式命名，命名有含义，block 可视为模块，有一定...

2020-10-15 23:12:15

199浏览

0评论

CSS八种让人眼前一亮的HOVER效果的示例代码

一.发送效果HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>CSS#send-btn{ display: flex; align-items: center; justify-cont...

2020-10-15 23:12:14

371浏览

0评论

css3实现动画的三种方式

这是一个考验面试者对css的基础知识。css 实现动画主要有3种方式第一种是： transition 实现渐变动画第二种是： transform 转变动画第三种是： animation 实现自定义动画下面具体...

2020-10-15 23:12:12

250浏览

0评论

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？一...

2020-10-15 23:12:10

278浏览

0评论

完美解决谷歌浏览器自动填充问题

在谷歌浏览器中，登陆成功后，谷歌浏览器会提示是否记住密码。如果选择记住密码，那么再次登录会出现诸如下边情况：如果产品需求是不希望浏览器自动填充账号密码，那么怎么去除呢？最先...

2020-10-15 23:12:06

218浏览

0评论

看完不迷糊的 CSS 盒子模型介绍

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物—&mdas...

2020-10-15 23:12:05

254浏览

0评论

flex是什么及flex布局语法教程详解

Flex布局Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，自由的操作容器中元素(项目)的排列方式任何一个容器都可以指定为 Flex 布局。.box{...

2020-10-15 23:12:03

热门文章