编程开发 - 教程之家

编程开发

分类导航：HTML/html5 CSS JavaScript PHP Python Java IOS .NET R语言 Rust Android Go语言鸿蒙OS C类语言综合编程正则表达式

95浏览

0评论

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

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

2020-11-01 23:24:14

144浏览

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

100浏览

0评论

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

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

2020-11-01 23:24:11

84浏览

0评论

css实现文字颜色渐变的三种方法

在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参...

2020-11-01 23:24:10

61浏览

0评论

纯css修改浏览器scrollbar滚动条样式示例

使用css修改浏览器滚动条样式::-webkit-scrollbar { width: .5rem; height: .5rem; background: hsla(0, 0%, 100%, 0.6);}::-webkit-scrollbar-track { border-radius:...

2020-11-01 23:24:08

63浏览

0评论

详解如何自定义CSS滚动条的样式

本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。0.需求有的时候我们不想使用浏览器默认的滚动条样式，因...

2020-11-01 23:24:07

78浏览

0评论

css实现一个元素高度固定宽度按比例显示效果

用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是对一个video视频的盒子div高度是固定的，宽度如何按比例展示？解决后效果如图：红框标注的即是我在上面高度比例...

2020-11-01 23:24:06

78浏览

0评论

css制作tips提示框，气泡框，制作三角形的实现

有时候我们的页面会需要这样的一些提示框或者叫气泡框，运用css，我们可以实现这样的效果。为了实现上面的效果，我们首先要理解如何制作三角形。当我们给一个DIV不同颜色的边框的...

2020-11-01 23:24:04

61浏览

0评论

html+css 实现简易导航栏功能

二话不说直接上代码（萌新：实在也没什么好说的）<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>导航栏<...

2020-11-01 23:24:03

74浏览

0评论

关于css中line-height(行高)设置无效的问题的解决方法

关于css中line-height(行高)设置无效的问题我们先写下这一串代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="te...

2020-11-01 23:24:02

74浏览

0评论

css实现两栏固定中间自适应的方法

1、利用绝对定位和margin此方法的原理说将左右两侧进行定位，让其脱离文档流。中心区域自然流动到它们下面，再为其设置margin值此方法页面元素结构可以顺序可以随意变动，注意to...

2020-11-01 23:24:00

48浏览

0评论

CSS Sticky Footer实现代码

本文介绍了CSS Sticky Footer实现代码，分享给大家，具体如下：上图所显示的效果就是sticky Footer，当页面主题内容不够长时，footer定位在窗口的底部，当页面主题内容超出窗口后，footer...

2020-11-01 23:23:59

77浏览

0评论

纯css实现元素下出现横线动画（background-image）

效果图：html：
<div class='site_bar'>首页</div>css:.site_bar{　　background-image : linear-gradient(red,red);　　background-position : center bottom;　　background...

2020-11-01 23:23:57

77浏览

0评论

使用css实现圆形波浪效果图

在移动端经常看到一些圆形波浪图来显示金额，刚开始我认为这种效果只能用canvas写的，后来发现用css也可以。原理：我们都知道让块元素的border-radius:50%会变成圆形，如果少于50%...

2020-11-01 23:23:56

95浏览

0评论

详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式

今天我们介绍几种，用css实现左上朝向三角形（Top-Left Triangle）的写法。示意图（以宽高各60px为例）：这种三角形，一般可以用来做“对话框”类型图形的左下小脚。第一种：#tri...

2020-11-01 23:23:55

72浏览

0评论

CSS 同级元素浮动分析小结

float:left/right/none;1.同级浮动（1）使块级元素在同一行显示（所有要在同一行显示的都要加浮动）<div class="box1">box1</div><div class="box2">box2</div><div class="box3">b...

2020-11-01 23:23:54

85浏览

0评论

css如何绘制特殊图形的方法示例

一、三角形border边框设置代码：width: 300px;height: 300px;background: red;border: 40px solid black;border-left-color: blue;border-bottom-color: yellow;border-right...

2020-11-01 23:23:52

93浏览

0评论

详解css BEM书写规范

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块，从而使开发复杂的UI界面变得更简单和快，且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier...

2020-11-01 23:23:51

62浏览

0评论

详解如何在css3打包后自动追加前缀插件：autoprefixer

用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了，自己不需要做什么改动就会自动加前缀：下面一起看看涉及到autoprefixer这个插件的一些配置：1，postcss配置写在.po...

2020-11-01 23:23:50

72浏览

0评论

css实现文字居中两边横线效果的示例代码

本文介绍了css实现文字居中两边横线效果的示例代码，分享给大家，具体笔记如下：效果：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...

2020-11-01 23:23:48

122浏览

0评论

10分钟理解CSS3 FlexBox弹性布局

基本介绍特点 flexbox是一种css display类型，提供一种更简单高效的布局方式； flexbox可以对元素相对于父元素、兄弟元素进行定位、控制尺寸、控制间距； flexbox对响应...

2020-11-01 23:23:46

85浏览

0评论

10分钟理解CSS3 Grid布局

基本介绍上一篇文章我们介绍了css3 flexbox，今天我们再来说说css3的另外一个强大的功能：Grid。Grid做前端的同学应该都很熟悉了，翻译成中文为“栅格”，用过bootstrap...

2020-11-01 23:23:43

98浏览

0评论

CSS实现镂空效果的示例代码

效果原理主要利用css渐变实现一些不需要切图的背景镂空优惠券样式.mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) { width: @width; height: @height;...

2020-11-01 23:23:42

154浏览

0评论

10分钟入门CSS3 Animation

简介Animation可以让你不用依赖javascript或jquery，用纯CSS在网页中轻松实现各种动画效果。兼容性animation在绝大部分主流浏览器都得到了很好的支持！还在兼容IE9的同学要谨慎...

2020-11-01 23:23:40

196浏览

0评论

浅谈CSS 高度塌陷问题

表现例如：HTML：<div class="first"> <div class="first-child1">first-child1</div> <div class="first-child2">first-child2</div></div><div class="second"> sec...

2020-11-01 23:23:34

110浏览

0评论

深入理解 line-height 和 vertical-align

几个概念 line box：包裹 inline box 的一个盒子，一个或多个 line box 堆叠撑起一个 HTML 元素。 inline(-level) box：可以是一个由行内元素包裹的盒子，也可以是一个纯文字...

2020-11-01 23:23:33

144浏览

0评论

纯CSS3实现漂亮的input输入框动画样式库(Text input love)

分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。演示地址：ht...

2020-11-01 23:23:31

72浏览

0评论

浅谈CSS3 动画卡顿解决方案

为什么会卡顿？有一个前提必须要提，前端开发者们都知道，浏览器是单线程运行的。但是我们要明确以下几个概念：单线程，主线程和合成线程。虽然说浏览器执行js是单线程执行（注意，是执行...

2020-11-01 23:23:30

169浏览

0评论

CSS3改变浏览器滚动条样式

注：该方法只适用于 -webkit- 内核浏览器浏览器滚动条太宽，太丑，影响日常开发怎么办，改TA滚动条外观由2部分组成：1.滚动条整体滑轨 2.滚动条滑轨内滑块在CSS中滚动条由3部分组成na...

2020-11-01 23:23:28

131浏览

0评论

用css完成根据子元素不同书写样式的方法

我们需要达到的效果：需要什么1张图片的， 2张图片的， 3张图片的样式各不相同。可以使用js完成子元素的判断，但是这里我使用css来完成核心知识点使用css选择器完成子元素的判断例...

2020-11-01 23:23:27

113浏览

0评论

详解八种方法实现CSS页面底部固定

当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部，方法一：foot...

2020-11-01 23:23:26

90浏览

0评论

css模块化方案

css的模块化方案可能和js的一样多，下面简单介绍几种主要的模块方案。oocss面对对象的规则，主要的原则是两种：分离结构和外观，分离容器和内容。名词解释分离结构和外观：增加可...

2020-11-01 23:23:25

121浏览

0评论

详解CSS动画属性关键帧keyframes全解析

大概有多久没有更新专栏文章了。半年？下半年忙到起飞，或者毫不夸张的说是发射？仅有的一点个人时间，上半年贡献给了Python，现在差不多已忘掉了七七八八（一首《凉凉》送给自己），下半年...

2020-11-01 23:23:23

146浏览

0评论

css多种方式实现等高布局的示例代码

本文讲的等高布局是在不手动设置元素高度的情况下，使用纯css实现各个元素高度都相当的效果。如图：
1、使用table-cell实现(兼容IE8)<style> body,div,ul,li{margin: 0;padd...

2020-11-01 23:23:21

103浏览

0评论

你真的需要了解一下CSS变量 var()的用法

当Web项目变得越来越大时，他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题，新的CSS变量很快就会出现在主流浏览器中，它让开发人员能够重用并轻松编辑...

2020-11-01 23:23:20

96浏览

0评论

css3实现元素环绕中心点布局的方法示例

本文介绍了css3实现元素环绕中心点布局的方法示例，分享给大家，具体如下：效果如图：
代码实现：<style> *{ margin: 0; padding: 0; box-sizing: border-b...

2020-11-01 23:23:19

59浏览

0评论

css3实现3D文本悬停改变效果的示例代码

本文介绍了css3实现3D文本悬停改变效果的示例代码，分享给大家，具体如下：html<h1 class="hover-text-3d" data-text="w3cbest.com">W3CBEST.COM</h1>css.hover-text-3d { fon...

2020-11-01 23:23:18

100浏览

0评论

简单几步用纯CSS3实现3D翻转效果

作为前端开发人员的必修课，CSS3能带我们完成许多基本动效，本期我们将用CSS3实现hover翻转效果~第一步非常简单，我们简单画1个演示方块，为其添加transition和transform属性：//...

2020-11-01 23:23:16

72浏览

0评论

用CSS3和table标签实现一个圆形轨迹的动画的示例代码

html：其实就是根据table标签把几个实心圆div进行等边六角形的排布，并放入一个div容器中，然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现，当然不要忘了把div容...

2020-11-01 23:23:15

76浏览

0评论

纯CSS实现表单验证的示例代码

在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。一般我们的实现思路都是JS监听input框的输入内容，判断用户输入内容，从而以此...

2020-11-01 23:23:14

139浏览

0评论

css多种方式实现等宽布局的示例代码

本文讲的等宽布局是在不手动设置元素宽度的情况下，使用纯css实现各个元素宽度都相当的效果。1、使用table-cell实现(兼容ie8)<style> body,div{ margin: 0;...

2020-11-01 23:23:12

113浏览

0评论

CSS3移动端vw+rem不依赖JS实现响应式布局的方法

1、前言（1）vw/vh介绍在使用之前，我们先简单了解一下什么是vw和rem以及它们的作用，vw是css3出现的一个新单位，它是“view width”缩写，定义为把当前屏幕分成一百份，1vw即...

2020-11-01 23:23:11

84浏览

0评论

css中间自适应布局的5种解法详解

前言在做页面时，我们往往会碰到页面布局相关的内容，面试时也经常会被问到，那么今天我就来总结一下关于页面布局的内容。问题：如何实现三栏布局（高度固定，左中右的结构）假设高度已知...

2020-11-01 23:23:10

113浏览

0评论

CSS3之2D与3D变换的实现方法

css3实现了对元素执行2D平面变换，以及视觉上的3D空间变换，2D变换平时可能用的较多，3D效果也能锦上添花；关于坐标轴初中数学的几何学里我们便开始接触坐标轴，最基本的是平面直角坐...

2020-11-01 23:23:09

88浏览

0评论

flex布局实现左侧文字溢出省略右侧文字自适应

想要实现一个左侧文字可以根据文字长短自动调整宽度，当一行显示不下时，不挤压右侧文字空间，左侧文字溢出省略。同理当右侧文字变长的时候，右侧文字全显示，左侧文字被挤压后溢出省...

2020-11-01 23:23:07

97浏览

0评论

css加载会造成阻塞吗

可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。为了完成本次测试，先来科...

2020-11-01 23:23:06

80浏览

0评论

css的content属性的具体使用

content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符，其实它还有很多值可供选择。1、插入纯字符<style>...

2020-11-01 23:23:04

106浏览

0评论

通过CSS变量修改样式的方法示例

问题
js怎么去修改css伪类样式呢？但是js并没有伪类选择器，那么该怎么办呢？网上有不少方法，比如通过切换元素的类、在style中动态插入新的样式等。那么这里再来一种方法，设置css变...

2020-11-01 23:23:03

141浏览

0评论

使用智能 CSS 基于用户滚动位置应用样式

通过将当前滚动偏移量添加到到 html 元素的属性上，我们可以根据当前滚动位置设置页面上的元素样式。我们可以使用它来构建一个浮动在页面顶部的导航组件。这是我们将使用的 H...

2020-11-01 23:23:01

首页 «1055 105610571058 1059 »尾页

热门文章