编程开发 - 教程之家

200浏览

0评论

纯css3实现宠物小鸡实例代码

最近看了很多关于css3的知识和文章，觉得css3用起来很方便，使用css3的话，在页面布局上可以省去很多不必要的代码。所以最近用css3仿写了我每天都照顾的宠物小鸡的模样，第一次写，有...

2020-11-01 23:25:19

67浏览

0评论

box-shadow和drop-shadow实现不规则投影实例代码

当我们想给一个矩形或其他能用 border-radius 生成的形状（在“自适应的椭圆”一节中可以看到一些示例）加投影时，box-shadow 的表现都堪称完美。但是，当元素添加了一些...

2020-11-01 23:25:18

69浏览

0评论

calc()实现满屏背景定宽内容

在过去的几年间，有一种网页设计手法逐渐流行起来，我将它称作背景宽度满屏，内容宽度固定。这个设计的一些典型特征如下。页面中包含多个大区块，每个区块都占据了整个视口的宽度，区...

2020-11-01 23:25:17

172浏览

0评论

使用CSS content的attr实现鼠标悬浮提示（tooltip）效果

为什么实现这种效果呢，其实这效果也是根据title的提示说明衍生出来的，只是因为原生的比较丑陋，像这种衍生出的插件后很多种，如jquery-ui的tooltip，Bootstrap的tooltips等等，有很多...

2020-11-01 23:25:16

74浏览

0评论

CSS实现footer“吸底”效果

我们经常会遇到这样的问题：如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文有两种理解：一是无论内容的多少，我们都希望使按钮，固定...

2020-11-01 23:25:14

125浏览

0评论

让 Chrome 崩溃的一行 CSS 代码

一般的 CSS 代码只会出现 UI 版式或者兼容性方面的小问题。但这里我们要分享一行有趣的 CSS，它可以直接让你的 Chrome 页面挂掉 :)复现在 Chrome 里打开一个稍复杂的页面...

2020-11-01 23:25:13

91浏览

0评论

CSS :visited伪类选择器隐秘往事回忆录

昨天想使用 a:visited 改变右侧“猜你喜欢”已访问过的文字颜色，发现改来改去效果都一般，想到还有其他几个CSS可以设置，与颜色相关的，结果，太久没使用这个伪类选择器，具...

2020-11-01 23:25:12

85浏览

0评论

基于 CSS 动画的 SVG 按钮实例代码

具体代码如下所示：<a href="#"> <svg> <rect></rect> </svg>Button</a>body { margin: 0; padding: 0; background: #000;}a { position: absolute...

2020-11-01 23:25:10

105浏览

0评论

CSS中filter属性的使用详解

filter 属性定义了元素的可视效果blur 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。如果没有设定值，则...

2020-11-01 23:25:09

154浏览

0评论

CSS中clip-path属性的使用详解

clip-path的使用polygon 值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。左上角为原点，右下角是(100%,100%)的点。</p>body { background-color: #000;}.fa...

2020-11-01 23:25:07

104浏览

0评论

css实现左侧固定右侧自适应的布局方式

一.浮动布局1.先让固定宽度的div浮动！使其脱离文档流。
2.margin-left的值等于固定div的宽度相等。 .aside{ float: left; width: 200px; backgroun...

2020-11-01 23:25:06

244浏览

0评论

css 两边固定中间自适应布局的实现

解析四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。浮动<style type="text/css"> .wrap {background: #eee; padding: 20px; } p {margin: 0; } .left {wi...

2020-11-01 23:25:05

135浏览

0评论

了解CSS3的all属性的使用

一、兼容性如下图：兼容性还行，除了IE不支持，其他浏览器基本上都绿油油，目前自娱自乐，内网项目什么的都是可以用用的。二、all是干嘛用的all属性实际上是所有CSS属性的缩写，表示，所...

2020-11-01 23:25:03

97浏览

0评论

CSS实现元素居中原理解析

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的，在实践中，它往往难住了很多人。让元素水平居中相对比较简单：如...

2020-11-01 23:25:02

108浏览

0评论

值得收藏的CSS命名规范(规则)常用的CSS命名规则

CSS命名规范(规则)常用的CSS命名规则头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left righ...

2020-11-01 23:25:00

79浏览

0评论

css flex几种多列布局

基本的等分三列布局.container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; } .mi...

2020-11-01 23:24:59

154浏览

0评论

css实现“加号”效果的实例代码

实现下图的加号效果：若想实现这个效果，只需一个div元素即可搞定。需要用到css的为了before和after，以及border特性。先设置一个div便签 <div class="add"></div>再设置一个边...

2020-11-01 23:24:58

109浏览

0评论

CSS设置背景模糊的实现方法

在做一些页面的时候，为了让页面更好看，我们常常需要设置一些背景图片，但是，当背景图片太过花哨的时候，又会影响我们的主体内容，所以我们就需要用到 filter 属性来设置他的模糊值。...

2020-11-01 23:24:57

79浏览

0评论

css实现中间文字两边横线效果

1. vertical-align属性实现效果：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。...

2020-11-01 23:24:55

139浏览

0评论

使用css实现物流进度的样式的实例代码

效果：css样式：<style type="text/css"> ul li { list-style: none; } .package-status { padding: 18px 0 0 0 }...

2020-11-01 23:24:54

97浏览

0评论

详解flex多列布局遇到的问题和解决方案

flex布局无疑是简单、易用的，他让我我们的布局更加简单和快速，但是在使用flex进行多列布局的时候，我相信很多人会遇到下面的情况：这种情况是因为我们使用了justify-content: spa...

2020-11-01 23:24:53

98浏览

0评论

Flexbox 布局的最简单表单的实现

弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了。三年前，我写过 Flexbox 的介绍（上，下），但是有些地方写得不清楚。今天，我看到一篇教程，才意识到一个最简...

2020-11-01 23:24:51

58浏览

0评论

纯css实现Material Design中的水滴动画按钮

前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已...

2020-11-01 23:24:50

84浏览

0评论

css中grid属性的使用详解

grid布局加在父元素上的属性grid-template-columns/grid-template-rows 定义元素的行或列的宽高如果父元素被等分成了9等分，则，不管有多少个子元素，都显示9等分 grid...

2020-11-01 23:24:48

142浏览

0评论

css3实现椭圆轨迹旋转的示例代码

最近需要实现如下效果最开始用css3D旋转写，只能实现如下效果没办法把所有的圆转向正面，不知道是我的操作不对，还是3d旋转无法实现，有知道的大佬还请赐教啊没法用3d实现只能转向2...

2020-11-01 23:24:46

86浏览

0评论

CSS3 创建网页动画实现弹跳球动效果

基础准备对于这个实现，我们需要一个简单的 div ，并且样式类名为 ball ：HTML 代码:<div class="ball"></div>我们将使用 Flexbox 布局，把球放到页面中间，尺寸为 100px * 100px，背景...

2020-11-01 23:24:44

67浏览

0评论

详解css外边距折叠（margin collapsing）

前文这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。从一个简单例子说起先看一个简单示例：<style> .slide1 div { margin:10px 0; } </style>...

2020-11-01 23:24:43

81浏览

0评论

CSS去除移动端点击时元素产生的背景色（推荐）

在点击产生背景色的元素的css样式上加上以下代码：　　　
-webkit-tap-highlight-color: transparent;ps：下面看下css取消a标签在移动端点击时的背景颜色一、取消a标签在移动...

2020-11-01 23:24:42

90浏览

0评论

详解CSS Sprite雪碧图的应用

CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。雪碧图...

2020-11-01 23:24:41

85浏览

0评论

css和html的四种结合方式

（1）在每个HTML标签上面都有一个属性 style，把css和HTML结合在一起　　<div style="background-color:red;color:blue;">我是一只小小鸟</div>　　（2）使用HTML的一个标签实现，<sty...

2020-11-01 23:24:39

157浏览

0评论

CSS3 Flex 弹性布局实例代码详解

一、基本概念 //任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后...

2020-11-01 23:24:38

54浏览

0评论

纯css3实现思维导图样式示例

思维导图又称之为脑图他大概是这个样子滴：网上大部分实现有用d3.js实现，有手动用svg实现，最近工作需要，本人很懒，在琢磨看看用css3能不能实现呢？答案是肯定的下面上代码html代码<...

2020-11-01 23:24:37

84浏览

0评论

使用CSS属性选择器来拼接HTML的DNA的方法

CSS属性选择器非常神奇，它们可以帮你避免添加数不胜数的类名，从另一方面来指出你代码里的一些问题。但是大家不用慌，虽然属性选择器复杂且强大，但是很易于学习和使用。在这篇文...

2020-11-01 23:24:35

88浏览

0评论

css文本两端对齐的实现代码

在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名，手机号码，出生地。这样我们就要用到 text-align， text-justify样式了。text-align直接设为justify就行了，text-just...

2020-11-01 23:24:34

91浏览

0评论

CSS多级菜单的实现代码

这是一个相当炫的功能，让网页看起来像桌面程序，如window的开始菜单。实现原理基本和纯CSS相册差不多，但要注意的事项比较多，让我们一步步来吧。先来一个非常简单的一级菜单与悬...

2020-11-01 23:24:33

79浏览

0评论

CSS未知高度垂直居中的实现

本文主要介绍了CSS未知高度垂直居中的实现，分享给大家，具体如下：<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=8" http-...

2020-11-01 23:24:31

67浏览

0评论

CSS 、JS实现浪漫流星雨动画

1，效果图2，源码HTML< body > < div class = “container” > < div id = “mask” > </ div > < div id = “sky” >...

2020-11-01 23:24:30

103浏览

0评论

纯CSS表头固定的实现代码

纯CSS实现表头固定之所以难，主要在两点。一是占有最大市场份额的IE6不支持position:fixed。另一个，是人们想破头都想在一起表格中实现这种效果。不过外国真的人用纯CSS实现了...

2020-11-01 23:24:27

71浏览

0评论

使用CSS改变图片颜色的100种方法(值得收藏)

前言“说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是ho...

2020-11-01 23:24:26

131浏览

0评论

css 如何清除浮动的示例代码

本文概述本文的框架图如下：一、浮动到底是什么？W3school中给出的浮动定义为浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文...

2020-11-01 23:24:24

106浏览

0评论

详解Html/CSS中的符号学

本文从索绪尔语言哲学等理论高度认为不需要CSS中的class属性。CSS的好处是：HTML元素可以在不依赖class属性的情况下实现各种风格的样式化，文章试图证明class属性是过时的，不适...

2020-11-01 23:24:22

118浏览

0评论

详解CSS 去掉inline-block元素间隙的几种方法

最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于in...

2020-11-01 23:24:21

59浏览

0评论

初步认识css自定义属性

今天，CSS预处理器是Web开发的标准。预处理器的一个主要优点是它们使您能够使用变量，这有助于您避免复制和粘贴代码，并简化了开发和重构。在本文中，您将了解到如何将CSS变量集...

2020-11-01 23:24:19

83浏览

0评论

DIV或者DIV里面的图片水平与垂直居中的方法

<div class=“box”>　　<img /></div>水平居中的常用方式：　　text-align:center ——这可以实现子元素字体，图片的水平居中。　　margin:0 auto &mdas...

2020-11-01 23:24:18

72浏览

0评论

详解DIV+CSS的命名规矩才能有利于SEO优化的实现方法

一、CSS文件命名规范建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样...

2020-11-01 23:24:17

73浏览

0评论

CSS前景背景自动配色技术简介(demo)

一、颜色匹配效果预览如下GIF示意，当我们按钮背景色逐渐变淡的时候，文字颜色也从原来的白色变成黑色了，同时边框也显示出来了，其中的配色转换是纯CSS实现的。您可以狠狠地点击这...

2020-11-01 23:24:16

95浏览

0评论

css 获取从第n个开始之后的所有元素

具体代码如下所示：<div id="box"> <div></div> <div>等待获取</div> <div>等待获取</div> <div>等待获取</div></div>现要获取box中，除了第一个之外的其他的div ：...

2020-11-01 23:24:14

142浏览

0评论

css选择器设置标签样式的实例代码

css选择器在html标签上设置style可以给标签设置属性：<div style="background-color: #2459a2;height: 48px;">啊啊啊</div>我们还可以通过<head>标签里设置选择器，这样每种样...

2020-11-01 23:24:13

78浏览

0评论

CSS导航条菜单之带小三角形的实现代码

很多网页的导航条都会有小三角形，其实实现这个功能也挺简单。拿菜鸟教程首页导航做个例子首先写一个大的div_nav，而“首页”“菜鸟笔记”“菜鸟工具...

2020-11-01 23:24:12

99浏览

0评论

CSS3田字格列表的样式编写方法

在很多项目中，需要实现分格展示的功能，中间有灰色分割线，两侧没有。如图：按照一般的思路，设置好li的宽度，通过nth-of-type(n){}的方式给li标签添加样式。设置每个li 33.33%的宽度，...

2020-11-01 23:24:11

热门文章