编程开发 - 教程之家

110浏览

0评论

纯css实现多级折叠菜单折叠树效果

1、运用checkbox的checked值来判断下级栏目是否展开，CSS3的选择器中提供了:checked 这个伪类，这个伪类提供我们，当元素拥有checked这个值的时候就执行你的CSS。当有子菜单时，菜...

2020-11-01 23:27:47

120浏览

0评论

CSS Grid 网格布局全解析

介绍CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。 Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。它还能使我们在不改变...

2020-11-01 23:27:45

67浏览

0评论

css flex 弹性布局详解

案例基础布局html <ul class="box"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li>...

2020-11-01 23:27:44

76浏览

0评论

CSS3 二级导航菜单的制作的示例

如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜单的动...

2020-11-01 23:27:42

78浏览

0评论

使用css禁用input、checkbox、select等html控件实现disable效果

用js的event可以用来阻止input,select,checkbox的默认事件，如event.preventDefault()event.stopPropagation()其实用纯CSS也能实现，如input { pointer-events: none;}然后...

2020-11-01 23:27:40

138浏览

0评论

CSS轮廓outline的具体使用

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
border:1px solid red;outline-style:d...

2020-11-01 23:27:39

89浏览

0评论

css样式改变及实际用法详解

css样式改变及实际用法，先给大家展示效果图，感觉不错请参考实现代码。效果图如下所示：<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" co...

2020-11-01 23:27:38

97浏览

0评论

纯CSS实现导航栏下划线跟随的示例代码

本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码，分享给大家，具体如下：效果：代码：html：<ul> <li>aaaa</li> <li>bbbbbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee...

2020-11-01 23:27:37

86浏览

0评论

CSS实现一个简单loading动画效果

曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静...

2020-11-01 23:27:35

285浏览

0评论

CSS模仿遥控器按钮

注：本demo在小程序环境中测试，其他h5，pc网页通用，只需将小程序单位和标签名改成通用的即可，并按照自己的需求做适配即可。大体思路：四个相同的正方形田字形布局，配合旋转属性即可。...

2020-11-01 23:27:33

77浏览

0评论

CSS3使用transition属性实现过渡效果

属性详解transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成： transition-property：设置应用过渡的CSS...

2020-11-01 23:27:32

92浏览

0评论

纯CSS实现radio和checkbox实现效果示例

radio-and-checkbox纯CSS实现radio和checkbox实现效果reset-radio在开发PC端的项目时，经常会用到radio和checkbox组件，可是因为原生的样式相对来说不符合设计师的设计风格，所以...

2020-11-01 23:27:31

164浏览

0评论

详解css counter相关属性学习

css counter属性被几乎所有浏览器（包括IE8）支持，但是却不常使用，这篇文章就带大家学习了解下这些属性COUNTER-RESET明译为计数器重置。形如： counter-reset: counter-name常见...

2020-11-01 23:27:30

110浏览

0评论

纯css3制作煽动翅膀的蝴蝶的示例

纯css3制作煽动翅膀的蝴蝶，先看效果怎么样，效果还不错吧上代码：html<div id="butterfly"> <div class="leftSide"></div> <div class="body"></div> <div class="righ...

2020-11-01 23:27:29

96浏览

0评论

纯CSS实现的大型下拉菜单的示例代码

这是一款纯CSS实现的大型下拉菜单。该大型菜单使用HTML和纯CSS代码制作，没有任何js代码，不依赖任意第三方插件。适合用于栏目分类较多的大型网站使用。查看演示地址：css_menu下...

2020-11-01 23:27:27

158浏览

0评论

CSS3实现多样的边框效果

半透明边框实现效果：实现代码：<div>你能看到半透明的边框吗？</div>div { /* 关键代码 */ border: 10px solid rgba(255,255,255,.5); background: white; backgrou...

2020-11-01 23:27:26

88浏览

0评论

css实现背景半透明文字不透明的效果示例

本文介绍了css实现背景半透明文字不透明的效果示例，分享给大家，具体如下：效果如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>...

2020-11-01 23:27:25

79浏览

0评论

CSS实现精灵图与字体图标

精灵图：在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。为了减少资源的访问次数，将多个常用的图片...

2020-11-01 23:27:23

69浏览

0评论

详解如何在css中引入自定义字体(font-face)

为啥要用这个，要从做海报说起，那是一个风雨交加的夜晚。。。好了不扯淡了，我们言归正传，为啥用他，因为浏览器没有字体呗。那为啥要你告诉呢？我自己不会去w3cschool去看去学啊。是...

2020-11-01 23:27:22

89浏览

0评论

CSS3实现可翻转的hover效果

CSS3实现可翻转的hover效果,具体代码如下所示：1.css/*基础样式*/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust...

2020-11-01 23:27:21

103浏览

0评论

CSS3之transition实现下划线的示例代码

本文章介绍了CSS3之transition实现下划线的示例代码，分享给大家，具体如下：在这里先看看我们的demo认识transition这是CSS3中新增的一个样式，可以实现动画的过度。通常使用在添加...

2020-11-01 23:27:19

129浏览

0评论

CSS3 清除浮动的方法示例

一、目的通过本文，让大家可以明白清除浮动的原理和几种方法，最后得出一种本文认为最好用的方法。二、内容简介1、引入，还原浮动本来的意义
2、说明，实际开发中常用浮动来做...

2020-11-01 23:27:15

73浏览

0评论

纯HTML和CSS实现JD轮播图效果

使用了纯HTML和CSS实现了JD的轮播图，没有加动态效果，主要是使用了定位的知识。　　　，如图为两个侧边箭头图片。<!DOCTYPE html><html lang="en"><head> <meta charset="UT...

2020-11-01 23:27:14

211浏览

0评论

使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果

有时侯页面很长，需要指示箭头告诉用户下面还有东西。可以用纯CSS的方法实现。HTML：添加一个链接，可修改锚点点击时滑动到指定位置，这里使用了Bootstrap 3.x版本的一个向下箭头作...

2020-11-01 23:27:12

87浏览

0评论

前端应该掌握的CSS实现多列等高布局技巧

1、引言我们在写页面的时候，有的时候会遇到多栏布局，每个栏目里面的内容有的时候可能不一样，这样就会导致每个栏目实际的高度也是不一样的，如果每个栏目有背景颜色的，就会导致每...

2020-11-01 23:27:11

102浏览

0评论

浅谈CSS浮动的特性

本文介绍了CSS浮动的特性，分享给大家，顺便给自己留个笔记浮动具有以下特性：盖不住的文本浮动元素后面不是块级元素，后面的元素将会和它并排（除非设置了元素的宽度，并且屏...

2020-11-01 23:27:09

60浏览

0评论

详解css display:box 新属性

一、display:box;　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。二、可在其子代设置如下属性　　前提：使用如下属性，必须在父代设置display:b...

2020-11-01 23:27:08

73浏览

0评论

浅谈CSS层叠机制

css中为什么要有层叠机制因为在css中可能会有多个样式同时影响同一个元素的某个属性，层叠机制可以解决作者（写代码的人），用户（浏览页面的人）和用户代理（一般指浏览器）的样式冲突。在...

2020-11-01 23:27:07

83浏览

0评论

分享CSS书写规范、顺序【推荐大家使用】

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color...

2020-11-01 23:27:06

79浏览

0评论

css多行文本溢出时出现省略号的示例

多行文本溢出时出现省略号本文推荐2种方法。1. csstip：只兼容chrome内核的浏览器。ff不支持。.box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow:...

2020-11-01 23:27:04

43浏览

0评论

CSS 图片动画特效的示例代码（相框）

本文介绍了CSS 图片动画特效的示例代码（相框），分享给大家，具体如下：下面是效果图HTML代码<div class="box">  <img src="images/pic.png" alt...

2020-11-01 23:27:03

105浏览

0评论

CSS 翘边阴影的实现代码

本文介绍了CSS 翘边阴影的实现代码，分享给大家。具体如下：仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。实现原理和【CSS】曲线阴影差不多，也是通过伪元素来实现...

2020-11-01 23:27:01

101浏览

0评论

css控制元素高度实现自底向上和自顶向下的方法

从一个常见问题开始讨论：如何用css将一个元素的高度设置为【浏览器内容窗口高度】。方案一：使元素高度占满屏幕在css中，vh是一个特殊的长度单位，100vh的值就是【浏览器内容窗口...

2020-11-01 23:26:59

232浏览

0评论

css input[type=file] 样式美化(input上传文件样式 )

效果：<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> /*样式1*/ .a-upload { padding...

2020-11-01 23:26:58

94浏览

0评论

css3 column实现卡片瀑布流布局的示例代码

本文介绍了css3 column实现卡片瀑布流布局的示例代码，分享给大家，具体如下：实现效果今天遇到了需要实现一个卡片的瀑布流布局的问题，卡片高度是不同的。最后使用css3中的column...

2020-11-01 23:26:57

58浏览

0评论

CSS3实现背景透明文字不透明的示例代码

最近遇到一个需求，要在图片上显示带有半透明背景的文字，效果如下图所示：需求.png看到这个需求之后，第一反应是使用CSS3中的opacity设置元素的透明度。<!DOCTYPE html><html lang...

2020-11-01 23:26:55

74浏览

0评论

浅谈CSS中的尺寸单位

浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。概览绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡...

2020-11-01 23:26:54

135浏览

0评论

CSS中有些属性的前面会加上“*”或“_”所代表的意思

CSS中有些属性的前面会加上“*”或“_”所代表的意思给不同的浏览器识别例如：color{ background-color: #CC00FF; /*所有浏览器都会显示为...

2020-11-01 23:26:52

108浏览

0评论

CSS 设置滚动条样式的实例代码

CSS 设置滚动条样式的实现代码如下所示：•::-webkit-scrollbar 滚动条整体部分
•::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决...

2020-11-01 23:26:51

102浏览

0评论

深入浅析CSS 选择器分组

选择器分组假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：h2, p {color:gray;}将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则...

2020-11-01 23:26:50

88浏览

0评论

css 评分效果的星星示例

纳尼？什么星星外衣？好，直接上图比较能说清楚：仔细看会发现规律：可以根据百分比/分值动态改变高亮星星的个数。分步骤图：这种效果，如果遇到一分一个星，没有半星（或者有也可以，直接加一...

2020-11-01 23:26:49

96浏览

0评论

CSS3实现文本垂直排列的方法

最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的...

2020-11-01 23:26:47

100浏览

0评论

利用CSS3实现文字折纸效果实例代码

前言本文主要跟大家分享了一个利用CSS3实现文字折纸效果的实例，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧效果图：示例代码：代码如下，复制即可使用：<!DOCTYPE...

2020-11-01 23:26:46

120浏览

0评论

通过css使用background-color为背景图添加遮罩效果的两种方法

一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法：...

2020-11-01 23:26:45

93浏览

0评论

css遮罩全屏居中对齐的实现方式

具体代码如下所示：<style>#toastLoaderFullScreen { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999;...

2020-11-01 23:26:43

74浏览

0评论

HTML+CSS实现下拉菜单的实现

1.下拉列表实例代码如下：<!doctype html><html><head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0; text-decoration:none; list-style:...

2020-11-01 23:26:42

90浏览

0评论

CSS中的导航栏和下拉菜单的实现

一、CSS导航栏（1）导航栏的作用熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。（2）垂直导航栏<1>代码如下<!doctyre html><html>...

2020-11-01 23:26:40

85浏览

0评论

CSS清除浮动方法大全(小结)

1、父级div定义伪类：after和zoom<style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:1...

2020-11-01 23:26:32

75浏览

0评论

css 借助autoflow 属性实现选座位效果

1.autoflow属性，如果元素内容的长宽超出元素本身的长宽则会出现滚动条<HTML> <HEAD> <TITLE>测试表格内的滚动条</TITLE> </HEAD> <BODY> <div id="wins" style="pos...

2020-11-01 23:26:31

93浏览

0评论

对常见的css属性进行浏览器兼容性总结(推荐)

为什么要对css属性进行浏览器兼容性总结呢？用的时候，直接去 Can I Use 里面检索浏览器对该属性的兼容性情况不就好了吗？css3.jpeg其实，在实际的开发过程中，我们对常见的css属性兼...

2020-11-01 23:26:30

热门文章