编程开发 - 教程之家

编程开发

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

191浏览

0评论

浅析CSS3 中的 transition，transform，translate之间区别和作用

transform 和 translatetransform指变换、变形，是css3的一个属性，和其他width，height属性一样translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0...

2020-10-16 03:16:53

244浏览

0评论

解决CCS中的margin：top塌陷问题

HTML结构如下：CCS结构如下：页面效果图如下：现在我们可以看到在子元素中明明设置了向右50px和向下50px，可页面显示的效果却只有向右移动的没向下移动的。通常来说，margin是设置元...

2020-10-16 03:16:52

127浏览

0评论

css3 flex实现div内容水平垂直居中的几种方法

一、flex-direction: （元素排列方向）※ flex-direction:row （横向从左到右排列==左对齐）※ flex-direction:row-reverse （与row 相反） ※ flex-direction:column （从上往下排列==顶...

2020-10-16 03:16:50

184浏览

0评论

css3媒体查询中device-width和width的区别详解

1.device-width定义：定义输出设备的屏幕可见宽度。不管你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设备有关，如果是同一个设备，那么他的值就不会变。...

2020-10-16 03:16:48

192浏览

0评论

CSS样式不起作用(史上最全解决方法汇总)

在我们写页面时，有时会发现自己写的css样式无法生效，导致这种现象的原因有很多，下面列举一些常见的原因希望可以帮到你，欢迎评论区补充。浏览器缓存问题如果你反复检查认为代码...

2020-10-16 03:16:46

194浏览

0评论

纯CSS实现“文本溢出截断省略”的几种方法

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断...

2020-10-16 03:16:45

184浏览

0评论

svg+css 或者js制作打钩的动画效果

之前老板让做一个登陆后可以显示一个打钩的效果百度死活搜不到今天在B站看到的一个视频居然有根据需求改进了一下废话不多说先看效果！html代码<!DOCTYPE html><html lang...

2020-10-16 03:16:43

132浏览

0评论

CSS样式的分类介绍(基础知识)

css样式的分类1.内部样式----内联样式使用的是style标签<style type="text/css">/* 样式 */</style>多学一招：把页面的公共样式（不多的情况下）写在style标签中2.行内样式直接写...

2020-10-16 03:16:41

174浏览

0评论

使用css实现特殊标志或图形

1. 前言由于图片占的空间比较大，且图片越多，越不好管理，所以有些时候，我们可以使用一些简单的标签样式来实现简单的图形标志来替代图片。2. 实例展示：三角形示例示例代码：<style t...

2020-10-16 03:16:40

288浏览

0评论

CSS盒子居中的常用的几种方法(小结)

第一种：用css的position属性<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000;...

2020-10-16 03:16:39

259浏览

0评论

详解CSS标签中的显示模式

标签的显示模式（重点）div和span标签1.样式完全相同，标签不同，显示的结果完全不同2.每个div会独占一行，多个span会并列一排1.块元素特点：宽度默认是100%，高度默认是0，...

2020-10-16 03:16:37

181浏览

0评论

一文了解CSS 标签显示模式

标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。一、块级元素(block-level)　　每个块元素通常都会独自占据一整行或多整行，可以...

2020-10-16 03:16:36

192浏览

0评论

CSS适配iPhone全面屏的方法

一、media query方式/*iPhone X 适配*/@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .fixed-bottom{...

2020-10-16 03:16:35

279浏览

0评论

css样式引入方式及优缺点介绍

三种css的引入方式1.行内样式优点：书写方便，权重高缺点：没有做到结构样式相分离<div style="width: 100px" height:100px></div>2.内部样式优点：结构样式相分离缺点：分离不彻底...

2020-10-16 03:16:33

167浏览

0评论

css解决浮动导致父元素高度坍塌的几种方法

以前布局经常会用到float进行布局，但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌那我们一起来探究一下解决这个问题的方法！就先从文档流开始吧一.定位的分类...

2020-10-16 03:16:32

145浏览

0评论

浅析CSS中的4种引入方式及优先级

第一：CSS的4种引入方式CSS的4种引入方式是：行内样式、内嵌样式、链接样式、导入样式1.行内样式最直接最简单的一种，直接对HTML标签使用style=""，例如：<p style="color:#F00; "></...

2020-10-16 03:16:30

186浏览

0评论

详解关于浮动元素float使其父元素高度塌陷的原因及解决方法

浮动元素使其父元素高度塌陷我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有...

2020-10-16 03:16:28

268浏览

0评论

CSS实现动态图片的九宫格布局的实例代码

前提条件： content="width=750"<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">效果图如下：需求分析高宽：1...

2020-10-16 03:16:27

183浏览

0评论

深入理解CSS中的vertical-align属性和基线问题

vertical-align属性主要用于改变行内元素的对齐方式，对于行内布局影响很大，如果不了解的话，我们开发调整样式的时候很容易出错。网上关于这个属性的原理说得很是复杂，看一眼就让...

2020-10-16 03:16:25

194浏览

0评论

使用css属性屏蔽鼠标事件的方法(鼠标点击可穿透上层元素)

起源：前几天测试发来一个需求，内容要求看图：看到这个需求，我有点懵逼。现在的情况是只有点击日期内容框空白区域时，才会响应点击事件显示下拉日期菜单。而这个icon图标我是绝对定...

2020-10-16 03:16:24

210浏览

0评论

CSS前端页面渲染优化属性will-change的具体使用

前言当触发scroll、resize这类的滚动事件时，被触发的频率非常高，间隔也特别近。如果事件中涉及到大量的位置计算、DOM操作、元素重绘等工作，并且这些工作无法在下一个scroll事...

2020-10-16 03:16:22

162浏览

0评论

网站变灰色兼容代码包括图片支持所有浏览器

一般在全国哀悼日，大地震的日子，清明节，我们都会让自己的网站全站灰色，以表示对逝者的悼念。那么下面分享几种方法1、直接body中加入代码即可实现这种效果很简单，只需要一句css代...

2020-10-16 03:16:21

190浏览

0评论

网站变黑白灰色的4种代码详细讲解

2008.5.12四川汶川大地震，带走了很多生命，令人惋惜，为了表示对遇难同胞的深切哀悼，国务院决定2008年5月19日至21日为全国哀悼日。在此期间，许多网站将风格改为“黑、白、灰&...

2020-10-16 03:16:20

117浏览

0评论

修改CSS样式实现网页灰色(没有颜色只有浅色黑白)的几个方法整理

一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。那么今...

2020-10-16 03:16:19

182浏览

0评论

一段css让全站变灰的代码总结

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院今天发布公告，决定2020年4月4日（明天）举行全国性哀悼活动。在此期间，全国和驻外使馆下半旗致哀，全...

2020-10-16 03:16:18

187浏览

0评论

CSS3 中filter（滤镜）属性使用详解

最近在修改内网门户的时候，恰好遇到了需要使用滤镜的地方；刚开始用的是两张图片；鼠标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致鼠标滑过图标不能正常切换；于是就想到了...

2020-10-16 03:16:16

130浏览

0评论

css中引入指定字体@font-face兼容各浏览器的问题

网页制作中，如果想使用特定的字体可以通过 @font-face 引用，即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。注意：支持 @font-face 的浏览器有Internet...

2020-10-16 03:16:11

139浏览

0评论

CSS书写格式、一个手机页面的基本结构详解

一、CSS书写格式1.行内样式可以直接将CSS代码直接写到开始标签中<div style="color:red">我是div</div>2.内嵌样式可以在一对head标签中写上一堆style标签，然后再style标签中...

2020-10-16 03:16:10

174浏览

0评论

纯CSS实现网页内部锚点跳转时上下偏移的示例代码

最近在做我的“足球导航”网站的时候遇到一个网页内部锚点跳转后向下偏移一点，以避免被顶部固定导航栏遮住的需求。网上搜索了一些方法，大多数都是利用js在跳转时候...

2020-10-16 03:16:09

275浏览

0评论

css锚点定位被顶部固定导航栏遮住的解决方案

很多网站都有一个固定在上方的导航栏，方便用户搜索和跳转到其他页面。同时为了方便用户浏览长文档，都会加上目录，点击段落标题跳转到段落所在的位置，如图所示：如果使用锚点实现目...

2020-10-16 03:16:08

227浏览

0评论

详解filter与fixed冲突的原因及解决方案

问题描述当在 body 中使用了 filter 滤镜属性的时候，会导致 fixed 元素定位发生错误，即不再相对 viewport 进行定位，而是相对整个网页（ body 元素）进行定位。<html> <head> <...

2020-10-16 03:16:04

114浏览

0评论

CSS injection 知识总结

现代浏览器都已不允许在CSS中执行JavaScript了，以前的CSS注入可以利用JavaScript协议在 url() 、 expression() 中执行Javascript代码从而实现XSS。但是目前CSS注入在窃取数...

2020-10-16 03:16:03

141浏览

0评论

css 实现小尖角聊天对话框带尖角的说话泡泡效果

一、css 绘制实现小尖角聊天对话框，带尖角的说话泡泡，先给大家展示下效果图，感觉不错请参考实例代码。二、效果三、代码css;toolbar:false"><style>#talkbubble { width: 160p...

2020-10-16 03:16:01

144浏览

0评论

css实现气泡的小尖角效果

效果图（边框颜色太淡，放在{}里面）：{ }参考链接纯CSS气泡效果需要用到的知识点：当div的宽度和高度都是0时，整个边框是由四个三角形组成的，每一边为一个三角形，利用这点，来做小尖角，比...

2020-10-16 03:16:00

198浏览

0评论

HTML/CSS中的空格处理及如何保留页面中的空格

HTML中的空格的规则在html中内容中的多个空格一般会被视为一个，连续的多个空格符被自动合并了。同时内容前后的空格也会被清除，如下：<p> fly63 com </p>显示效果为：fly63 com...

2020-10-16 03:15:59

289浏览

0评论

CSS动画实现领积分效果的思路详解

最近项目中要做一个领积分的效果，根据老板的描述，这个效果类似于支付宝蚂蚁森林里的领取能量。整体效果是就是在树周围飘着几个积分元素，上下滑动，类似星星闪烁，点击领取后，沿着树...

2020-10-16 03:15:58

126浏览

0评论

css+svg实现b站充电效果的示例代码

难点svg图形的两块蒙版制作先上代码这是左边粉色框框的内容这个没啥好说的<div id="con"> <div id="TA-con"> <div id="text-con"> <div id="linght"></di...

2020-10-16 03:15:55

232浏览

0评论

详解盒模型大小取决于它的padding，margin，border数值

盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和外边距margin 的数值大小。边框内的空白是内边距padding，边框外的空白是外边距margin，如下所...

2020-10-16 03:15:53

208浏览

0评论

CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)

进入阿里巴巴矢量图标库阿里巴巴矢量图标库选择喜欢的图标的，点击添加到库选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录）然后在右侧中点击...

2020-10-16 03:15:52

199浏览

0评论

css 横向进度条和竖向进度条实现代码

有时候看一些不错的滚动条效果不错，这里给大家分享一下如果用css实现一、横向进度条<html><head><title>横向进度条</title><style type="text/css"> .loadbar {...

2020-10-16 03:15:51

255浏览

0评论

移动端前端适配方案(总结)

在网上搜了一下，很多面试都会被问到移动端适配方法的问题，最近看了一些文章，这里总结一下。首先，谈一下目前为止出现的一些关于移动端适配的技术方案：（1）通过媒体查询的方式即C...

2020-10-16 03:15:50

182浏览

0评论

解决type=file 文件修改表单名称不能正常回显的问题

easyui 框架下代码如下：css:.file_box{float: right;width: 1035px;border: 1px solid #999;height: 32px;line-height: 35px;padding-left: 10px;margin-right: 25px;}.f...

2020-10-16 03:15:48

157浏览

0评论

CSS实现底部tapbar栏功能

现在许多移动手机端都有底部tab栏切换的功能，最近恰巧也做到类似的功能，废话不多说，直接上代码。先看效果图css样式*{ margin: 0; padding: 0;...

2020-10-16 03:15:42

186浏览

0评论

解决css中的匹配问题

问题描述众所周知在写 css的时候，会根据html 中类的定义或者 id 的定义来写相应的 css代码。给不同的类定义不同的样式，当然为了能够少写一些代码，大家就会在css 中引用匹配。...

2020-10-16 03:15:40

107浏览

0评论

css3中less实现文字长阴影(long shadow)

本文主要介绍了css3中less实现文字长阴影，分享给大家，具体如下：问题实现如下图效果主要知识点css中的字体阴影 text-shadowless语法中的 loops 和 merge代码<div class="long-s...

2020-10-16 03:15:39

197浏览

0评论

css3 实现元素弧线运动的示例代码

如何使用CSS控制元素弧线运动我们都知道，CSS3的新属性transfrom过渡效果可以实现元素位移、旋转、缩放。结合animation属性，就可以实现元素的动画效果。但是如何通过css实现元...

2020-10-16 03:15:38

197浏览

0评论

CSS实现聊天气泡效果

一、效果图京东效果模拟的效果二、原理准备一个高度和宽度为0的盒子将这个盒子设置一个边框将边框不需要的地方用 transparent 来代替，需要显示的地方设置对应的颜色如果...

2020-10-16 03:15:36

221浏览

0评论

纯CSS3实现移动端展开和收起效果的示例代码

本文介绍了纯CSS3实现移动端展开和收起效果的示例代码，分享给大家，具体如下：展示效果：HTML代码<section class="block"> <input type="checkbox"> <div class="case-block...

2020-10-16 03:15:34

151浏览

0评论

CSS中层叠上下文的具体使用

前言在有些 CSS 相互影响作用下，对元素设置的 z-index 并不会按实际大小叠加，一直不明白其中的原理，最近特意查了一下相关资料，做一个小总结。层叠上下文与层叠顺序层叠上下文（st...

2020-10-16 03:15:33

143浏览

0评论

深入浅析CSS3中的Flex布局整理

Flexbox布局模块旨在提供一个更有效的方式，在一个容器里面去布局分配空间。即使容器的大小是未知的，或者动态变化的。Flex 布局背后的主要思想是让容器能够改变其项目的宽度 /...

2020-10-16 03:15:31

首页 «1100 110111021103 1104 »尾页

热门文章