CSS - 教程之家

75浏览

0评论

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

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

2020-10-16

94浏览

0评论

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

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

2020-10-16

93浏览

0评论

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

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

2020-10-16

169浏览

0评论

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

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

2020-10-16

127浏览

0评论

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

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

2020-10-16

72浏览

0评论

CSS injection 知识总结

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

2020-10-16

88浏览

0评论

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

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

2020-10-16

97浏览

0评论

css实现气泡的小尖角效果

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

2020-10-16

98浏览

0评论

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

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

2020-10-16

163浏览

0评论

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

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

2020-10-16

80浏览

0评论

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

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

2020-10-16

108浏览

0评论

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

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

2020-10-16

110浏览

0评论

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

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

2020-10-16

102浏览

0评论

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

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

2020-10-16

128浏览

0评论

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

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

2020-10-16

75浏览

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

74浏览

0评论

CSS实现底部tapbar栏功能

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

2020-10-16

88浏览

0评论

解决css中的匹配问题

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

2020-10-16

63浏览

0评论

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

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

2020-10-16

88浏览

0评论

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

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

2020-10-16

94浏览

0评论

CSS实现聊天气泡效果

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

2020-10-16

108浏览

0评论

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

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

2020-10-16

65浏览

0评论

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

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

2020-10-16

57浏览

0评论

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

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

2020-10-16

168浏览

0评论

CSS3实现div从下往上滑入滑出效果示例

1，首先需要用的是 CSS3的 target 选择器，配合a标签指定id选择器切换目标元素，用于选取当前活动的目标元素。
2，CSS3 的 transition 动画，这里不做详细介绍看一下效果图：点击滑出...

2020-10-16

57浏览

0评论

基于CSS 判断鼠标进入的方向

在之前某一个前端技术群里，有一个群友说他面试的时候遇到了一个问题，就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。给出的初始结构如下：<style...

2020-10-16

122浏览

0评论

基于ccs3的timeline时间线实现方法

在web项目中我们经常要使用时间轴（timeline）控件。本文提供一种基于CSS3的可逐项展开的timeline，在各展开项中可以嵌入文本、图片、视频等元素。运行效果如下：实现该控件的实现...

2020-10-16

75浏览

0评论

通过css3的filter滤镜改变png图片的颜色的示例代码

本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影，然后将原始图片隐藏起来，从而达到改变图片颜色的目的
先看效果图接下来是代码<p><s...

2020-10-16

61浏览

0评论

CSS3实现渐变背景兼容问题

我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 "图像"。它是css3中的语法，最低兼容IE10background-image: linear-gradient(to right,...

2020-10-16

61浏览

0评论

如何利用定位使元素居中(web端页面布局小技巧)

元素在浏览器窗口居中的方法这里先给出代码块，如果有同学已经看出来点眉目可以先自己尝试一下。 position:fixed; /*给想要居中的元素设置*/ left:50%; /*或者right:50%*/ t...

2020-10-16

62浏览

0评论

flex弹性盒布局最后一行左对齐的实现思路

使用flex布局，如果是九宫格的话正好可以平分，如图如果是我们只需要八块，如图但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图<div class="box"> <ul> ...

2020-10-16

124浏览

0评论

借助CSS mask遮罩显著优化PNG图片的尺寸(推荐)

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、无法进一步压缩的PNG图片例如有如下所示的PNG图片（尺寸1/2显示了），使用顶级的PNG工具压缩后...

2020-10-16

78浏览

0评论

CSS 继承 inherit属性的方法

给定一张有如下背景图的 div：制作如下的倒影效果：方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化， div 大小怎么变化，我们都不用去改我们的代码。法一：-we...

2020-10-16

63浏览

0评论

CSS中如何解决外边距塌陷问题

首先我们先看出现外边距塌陷的三种情况：1.当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较...

2020-10-16

57浏览

0评论

css3的focus-within选择器的使用

伪元素和伪类说到这个，我们先回顾一下，伪类选择器和伪元素选择器，老版的浏览器没有严格区分下面 2 种写法。a:after{}a::after{}在新的标准中，单冒号(:)用于 CSS3 伪类，双冒号(::...

2020-10-16

99浏览

0评论

纯CSS实现取字符串的第一个字符实现文字图标功能

如何通过CSS实现文字图标/*图标样式*/.nav-icon-normal { width: 32px; height: 32px; line-height: 33px; display: inline-block; border-radius: 6px;...

2020-10-16

82浏览

0评论

html+css制作div标签增加右上角删除图标的示例代码

一、需求描述在Div标签的右上角显示删除图标二、实现方式html、CSS三、参考代码<style>.container{ width:60px; height:60px; border: 1px dotted re...

2020-10-16

54浏览

0评论

css3遮罩层镂空效果的多种实现方法

本文介绍了的4种实现遮罩层镂空的方法，分享给大家，也给自己留个笔记，具体如下：先看看效果【方法一：截图模拟实现】原理：先截一张相同位置的图片，创建一个遮罩层，然后把图片定位在...

2020-10-16

50浏览

0评论

CSS背景图片设置的6个有趣的技巧

背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的，但是。。。。。。1.如何将背景图像完美地适合视口b...

2020-10-16

63浏览

0评论

一文掌握CSS 属性display:flow-root声明

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9404本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、Safari浏览器支持了di...

2020-10-16

76浏览

0评论

CSS将img图片填满父容器div自适应容器大小的实现方法

当一个页面中引入多张图片时候，会碰到图片尺寸不一致，单要求显示成一致的大小，我们直接设置图片尺寸会导致图片变形，这就是我们遇到的问题，看下解决方法<div> <img src="...

2020-10-16

78浏览

0评论

CSS设置div背景图的实现代码

给组件添加背景图控制只需要两步：<View className="gifts" style={{ background: `url(${baseUrl}starMove/exclusiveEntrance/card.png...

2020-10-16

106浏览

0评论

css使用@media响应式适配各种屏幕的方法示例

定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有...

2020-10-16

106浏览

0评论

CSS实现波动水球效果的示例代码

今天学习到了一个新的css特效，波动水球效果，也是非常的好看HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width...

2020-10-16

98浏览

0评论

css中转换为行内样式的解决方案(css-inline)

聊聊场景发送邮件在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信、今日头条等自媒体在以上场景使用行内样式的兼容性要高很多，也可以保持原样式...

2020-10-16

47浏览

0评论

CSS盒子隐藏/显示后再最上层的实现代码

.imgbox{ width: 1200px; height: 612px; margin-right: auto; margin-left: auto; margin-top: 60px; }.m1{ border: solid; border-width: 1px; height: 300p...

2020-10-16

177浏览

0评论

css3实现背景模糊的三种方式(小结)

一、普通背景模糊代码：<Style> html, body { width: 100%; height: 100%; } * { margin: 0; pad...

2020-10-16

72浏览

0评论

详解flex布局中保持内容不超出容器的解决办法

在移动端，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，用起来很方便，已经越来越离不开它，但是最近在做项目的时候发现一个问题。就是在一个设置了 flex:1 的容器中，...

2020-10-16

175浏览

0评论

Flex布局做出自适应页面(语法和案例)

Flex布局简介Flex英文为flexiable box，翻译为弹性盒子，Flex布局即弹性布局。Flex布局为盒子模型提供了很大的灵活性，任何一个容器都可以指定为Flex布局，设置方法为：.box{ disp...

2020-10-16

59浏览

0评论

css+html实现Skeleton Screen 加载占位图动画效果（带动画）

效果自上而下渐隐渐现源码html，用的angular语法，只要做简单的修改就可以成为你需要的语法<div *ngFor="let item of [1,1,1],index as index" class="skeletonItem anim-opaci...

2020-10-16

热门文章