编程开发 - 教程之家

编程开发

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

248浏览

0评论

css实现悬浮客服效果

<div class="sideBar"> <div> <div class="tips">在线客服</div> <ul class="list"> <li>QQ:1846492969</li> <li>QQ:1846492969</...

2020-10-16 06:50:57

142浏览

0评论

通过CSS边框实现三角形和箭头的实例代码

一、CSS盒子模型盒子包括：margin、border、padding、content
边框交界处呈现平滑的斜线，利用此特点，通过设置各边框宽度和颜色可以得到小三角等。
div元素是块级元素，显示为块框...

2020-10-16 05:03:10

122浏览

0评论

css3一个简易的 LED 数字时钟实现方法

这个应该是已经有很多人做过的东西，我应该只是算手痒，想写一下，所以，花了点时间折腾了这个，顺便把 Dark Mode 的处理也加上了。首先可以很明确的一点，这个真没技术含量存在，只是需...

2020-10-16 05:03:08

233浏览

0评论

2分钟教你实现环形/扇形菜单(基础版)

前言
项目需要用到环形菜单，初略在网上找了一下，没有找到合适的，于是自己写了一个很简单的，后续再优化。这个组件是基于react,但是原理都一样。展开效果如下：
实现
css(less)@c...

2020-10-16 05:03:06

199浏览

0评论

CSS教程:css属性之媒体（Media）类型

样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效（屏幕）。声...

2020-10-16 05:03:05

220浏览

0评论

移动端自适应样式之@media的使用方法

通用手机端样式：@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}指定手机端高度样式：@media screen and (max...

2020-10-16 05:03:04

168浏览

0评论

CSS中使用文本阴影与元素阴影效果

文本阴影介绍在CSS中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。 text-shadow属性值说明，在文本阴影...

2020-10-16 05:03:02

115浏览

0评论

CSS3实现网站商品展示效果图

本文介绍了CSS3实现网站商品展示效果图，分享给大家，具体如下：html代码<div class="product"> <ul> <li> <div class="pro-img"> <a href="#"> <img src="images...

2020-10-16 05:03:01

137浏览

0评论

深入理解CSS中的数学表达式calc()

数学表达式calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。本文将介绍calc()的相关内容定义数学表达式calc()是calculate计算的缩写...

2020-10-16 05:02:58

269浏览

0评论

css复杂选择器及css字体样式、颜色属性详解

之前学习了css的一些基础选择器，然而今天要介绍css的复杂选择器，复杂选择器一共有三种1.父子（派生）选择器<div class="wrapper"> <strong class="box"> <em>2...

2020-10-16 05:02:57

166浏览

0评论

CSS实现放大缩小关闭按钮(实例代码)

这种效果最常见是在我们的浏览器页面上，先给大家展示效果图：如上图所示，使用CSS 绘制上述三个按钮：<template> <div class="windowAction"> <button class="min">缩小</butt...

2020-10-16 05:02:56

287浏览

0评论

如何用border-image实现文字气泡边框的示例代码

开发活动中，遇到了一个很简单的文字气泡效果，大概就是这样的。emmmm，看起来很简单。实现思路如下主体是个div，加上渐变和边框还有圆角即可。左侧元宝切图，用::before定位...

2020-10-16 05:02:55

243浏览

0评论

CSS3动画特效在活动页中的应用

背景在不知不觉中，忙碌的一年将要结束，又到了一年一度的活动期了，为了展现喜庆的节日气氛，活动页面动态效果必不可少。先上效果图：一、整体分析从图中可以看到主要的动态效果有...

2020-10-16 05:02:53

166浏览

0评论

通过css3背景控制属性+使用颜色过渡实现渐变效果

css3背景图像相关兼容性：IE9+background-clip 背景图片绘制区域background-clip:border-box; 内容区<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta...

2020-10-16 05:02:47

285浏览

0评论

CSS3中新增的对文本和字体的设置

文字阴影text-shadow: 水平偏移垂直偏移模糊颜色兼容性：IE10+<!DOCTYPE html><html lang="en" manifest="index.manifest"><head><meta charset="UTF-8"><title>Document<...

2020-10-16 05:02:44

108浏览

0评论

Css和JS实现下划线动效的方法示例

本文主要讲述两种下划线动效效果，第一种悬停时 X轴由内向外展开实现动画效果，第二种为左右自动展示，由左向右，或由右向左！！实现的主要效果是利用伪类标签，以及hover,利用transfromm...

2020-10-16 05:02:42

102浏览

0评论

css3使用animation属性实现炫酷效果(推荐)

animation-name 动画名称，可以有多个值，用逗号隔开，表示绑定了多个动画animation-name属性为动画指定一个名称animation-name兼容主流的浏览器，不过还是需要加前缀去兼容animati...

2020-10-16 05:02:41

252浏览

0评论

css实现不同浏览器下兼容文本两端对齐

在 form 表单的前端布局中，我们经常需要将文本框的提示文本两端对齐，例如：比较粗暴的做法是在需要隔离边距的文本中加标签，然后分别控制每个文字的边距，这种方法比直接加空格或者...

2020-10-16 05:02:39

191浏览

0评论

CSS中display flex整理（布局利器）

关于display：flex布局，有人了解颇深，我也是看着别人的东西学习的。display：flex的布局是什么、基本概念之类的我根本就不了解，只会用。每次看到概念之类的东西，我都是扫一眼就过去...

2020-10-16 05:02:38

284浏览

0评论

CSS实现多层嵌套结构最外层旋转其它层不旋转效果

有这样一个场景：一个圆形容器，最外层容器的背景为圆弧，现在要将最外层的圆弧进行旋转，保证里面的容器里面的内容不进行旋转，接下来将跟大家分享一种解决方案，先看下最终实现的效果...

2020-10-16 05:02:36

161浏览

0评论

CSS优先级的两种理解方式

方式一：值相加
我们先去MDN看看官方的解释：优先级是如何计算的？优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。而当优先级...

2020-10-16 05:02:25

195浏览

0评论

css实现3d立体魔方的示例代码

今天来做一个简单的3d魔方先看效果图吧！把这个看会了，一些网上的3d的相册你就都会了一、我们先准备好们的html代码<!DOCTYPE html><html lang="zh-CN"> <head> <tit...

2020-10-16 05:02:24

218浏览

0评论

css3翻牌翻数字的示例代码

今天接到公司一任务，效果图如下：没有具体说做什么效果，但是想着纯数字转换太简单了，然后就顺手做了一个翻牌的效果。效果预览，新窗口打开：https://codepen.io/andy-js/pen/ExaGxaL...

2020-10-16 03:19:07

191浏览

0评论

纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）

移动端移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { disp...

2020-10-16 03:19:04

168浏览

0评论

CSS 实现鼠标放在上面时整行变色效果

摘要:下文讲述css中实现鼠标放在指定行上面时，整行变色的方法分享，如下所示:实现思路:使用:hover伪类，实现当鼠标指向时，其背景色发生相应的变化，如下例所示:例：下文中的div，当鼠标...

2020-10-16 03:19:02

230浏览

0评论

css中overflow:hidden失效问题的解决方法

失效原因今天在写轮播图的时候发现，overflow;hidden;竟然能失效，发现原因如下：父元素想要隐藏溢出的绝对定位的子元素，需要给父元素加一个定位;因为绝对定位的子元素会从内向外...

2020-10-16 03:19:01

224浏览

0评论

css定位position引发的层级关系问题详解

position定位里的absolute，relative和fixed absolue：绝对定位，用top,bottom,left和right根据有定位的父级元素进行定位，如果无则相对body元素即整个页面文档进行定位。 re...

2020-10-16 03:19:00

203浏览

0评论

css3实现圆锥渐变conic-gradient效果

语法：background-image: conic-gradient(from angle at position, start-color, ..., last-color )第一个参数：from angle ：起始的角度，可选，默认为从上到下position ：圆锥锥点的...

2020-10-16 03:18:58

168浏览

0评论

border-radius IE8兼容处理的方法

根据canisue（http://caniuse.com/#search=border-radius），border-radius兼容性如下图所示：测试代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <me...

2020-10-16 03:18:56

187浏览

0评论

css3针对移动端卡顿问题的解决(动画性能优化)

一、使用css，jquery，canvas制作动画1.Canvas优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存为 .png 或者 .jpg的图形；缺点：依赖于HTML，只能通过脚本绘...

2020-10-16 03:18:54

295浏览

0评论

在Firefox浏览器中利用CSS窃取数据

0x00 前言几个月之前，我在Firefox中找到了一个漏洞（ CVE-2019-17016 ）。在研究过程中，我发现了在Firefox浏览器中利用CSS的一种数据窃取技术，可以通过单个注入点窃取数据，这里我想...

2020-10-16 03:18:52

179浏览

0评论

纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白必看)

效果如下：实例1实例2以实例1【婚礼策划】为例HTML：<div class="itemInWorks" > 婚礼策划 <div class="mask"> 状态：待完成<br> 执行者：张三<br> 截止日期...

2020-10-16 03:18:51

151浏览

0评论

css中有序无序列表项list样式设置方法

在无序列表ul>li中，无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中，前面默认带有数字，如何修改列表前面的项目符号，只需要通过list-style调整就好，常见的符号有（/*内...

2020-10-16 03:18:49

120浏览

0评论

CSS网页响应式布局实现自动适配Pc/Pad/Phone设备

前言现在的设备很多，有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好...

2020-10-16 03:18:48

220浏览

0评论

通过CSS向JS传参的方法

一、需要通过CSS传参的背景CSS中有很多媒体查询的用法，例如设备尺寸判别，是否支持鼠标行为，是否是黑暗模式，是否是省电模式等。比方说最近经常提到的黑暗模式，深色主题：@media (pr...

2020-10-16 03:18:46

142浏览

0评论

css实现透明渐变特效的示例代码

知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知：这张图其实可以分成两部分，右边控制图形和渐变，左边就是一...

2020-10-16 03:18:45

242浏览

0评论

css实现div内凹角样式的示例代码

平常的开发中我们一般使用到圆角都是外凸的，即border-radius属性。而如果有内凹角的情况，我们一般的考虑实现方法有2种。一种是直接使用背景图片，一种是使用css。用到的属性则...

2020-10-16 03:18:43

112浏览

0评论

css常用样式font设置字体的多种变换(实例详解)

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

2020-10-16 03:18:42

250浏览

0评论

CSS3关于z-index不生效问题的解决

最近写CSS3和js结合，遇到了很多次z-index不生效的情况：1.在用z-index的时候，该元素没有定位（static定位除外）2.在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后...

2020-10-16 03:18:41

232浏览

0评论

常见的浏览器兼容性问题(小结)

浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。样式兼容性（css）方面（1）因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平...

2020-10-16 03:18:39

256浏览

0评论

CSS完美解决前端图片变形问题的方法

在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下：一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中：<style type="text/css">div{...

2020-10-16 03:18:37

239浏览

0评论

CSS控制网页背景颜色的代码

我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧，这个我想也是有的，因为这些图片不是太大就是太小，或者太乱，那么有没有办法让图片能合自己的主页的胃口呢？答案是肯定...

2020-10-16 03:18:36

195浏览

0评论

CSS 实现侧滑显示留言面板的网页组件功能

大家好，不知道你们是否和我一样存在这样的困惑呢，虽然css入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又很犯难了，看到漂亮的效果还是无从下手，这...

2020-10-16 03:18:35

174浏览

0评论

CSS实现ul和li横向排列的两种方法

因为li是块级元素，默认占一行的，要想实现横向排列，一般通过以下两个方法：float:left
这样设置有一个问题，li浮动以后则脱离了文本流，即不占位置，如果它的父级元素有具体的样式且没...

2020-10-16 03:18:32

240浏览

0评论

css浮动 float属性详解

一、什么是浮动？浮动，顾名思义，就是漂浮的意思。指的是一个元素脱离文档流，悬浮在父元素之上的现象。二、如何产生浮动？给元素本身添加float属性float值：...

2020-10-16 03:18:31

221浏览

0评论

CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现

例子：<html><head><style type="text/css">ul.none{list-style-type:none}ul.circle {list-style-type:circle}ul.square {list-style-type:square}ol.upper-roman {list-sty...

2020-10-16 03:18:30

168浏览

0评论

面试官提问之CSS如何实现固定宽高比

对于这个问题，你可能还没有过相关需求，或者还没有在面试的时候被问到过，但是歪马相信你终将有需要。这个问题说起来也是老生常谈，歪马今天再次提起也是希望有朝一日当你被问到的...

2020-10-16 03:18:28

180浏览

0评论

CSS3标注引用的出处和来源的方法

疫情呆家里都快发霉了，打开电脑动动大脑，今天给大家分享一篇关于CSS3标注引用的出处和来源的方法。新技术的出现往往意味着新的生产力的提高。随着HTML5和CSS3的流行和普及，越...

2020-10-16 03:18:23

90浏览

0评论

CSS中元素的显示模式

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

2020-10-16 03:18:22

177浏览

0评论

快速解决css使用@keyframes加载图片首次循环时出现白色间隙问题(闪屏)

问题解说:在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题问题演示 //html <div class="contain...

2020-10-16 03:18:20

首页 «1098 109911001101 1102 »尾页

热门文章