CSS卡片旋转

html{ perspective: 800px; } body{ display:flex; flex-wrap: wrap; } .card{ transform-style: preserve-3d; position:relative; height:500px; width:300px; ... »

CSS3全览_动画+滤镜

CSS3全览_动画+滤镜 作者: https://www.cnblogs.com/xiaxiangx/ 1. 列表和生成的内容 列表 列表的列线, list-style-type, 如果不想显示记号, 使用 none, none的作用是禁止在本该显示记号的位置上出现任何内容, 不过却不阻断有序列表的 ... »

竖版文字排列实现《金刚般若波罗蜜心经》

在网上找到一篇竖版金刚般若波罗蜜经,尝试通过CSS实现接近书籍图片原文的排版效果。 网络中找到的截图: 采用CSS模拟实现的效果截图: 实现难点: 1.竖版文字的排列; 2.等距离竖格线的实现:竖格线要在容器中上下满屏分布,恰好满足与文字的距离。 莲花图片在百度图片中找到近似图片。 <div cla ... »

纯CSS绘制三角形

三角形属于常见的几何图形,在网页设计中应用较为广泛。在网页编程中除了采用图片来实现前端展现外,纯CSS也可以实现三角形绘制。 1、基于border-width方案 基于border-width绘制三角形是“一门传统手艺”,由于该属性浏览器的支持性非常好,几乎没有兼容性问题,主流的三角形绘制方案都是采 ... »

div 内元素的垂直居中

小主今天偷点懒利用上班时间整理一下 div 内元素的居中(不论垂直还是水平通用)问题的解决方法: 本文的中心是利用 css 中的 display属性;通常的方便的是使用 Flex/Grid 属性,今天就在介绍一种更方便的方法通过使用 display:table-cell; vertical-alig ... »

CSS三大特性及权重叠加

层叠性: 1.样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式 2.样式不冲突,不会层叠 继承性: 子标签会继承父标签的某些样式,如文本颜色和字号 优先级: 当同一个元素指定多个选择器,就会有优先级的产生。 选择器相同,则执行层叠性 选择器不同,则根据选择器权重执行 选择器权重如下表 ... »

如何优雅阻止view UI 的 Switch 切换?

一、官方文档提供的方法 个人觉得官方提供的方法有时候不能够满足现实需求,第二点是view UI版本必须是4.0.0版本及以上才能使用这个开关组件。 二、自定义方法解决 ①将开关禁用掉 加一个 disabled 属性,不用框架的默认行为。 ②将开关禁用状态下的手势样式去除。 .ivu-switch-d ... »

彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应

rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。那么如何动态设置呢,看到很多文章都讲的是使用js获取设备屏幕尺寸来操作,而我在工 ... »

Ace editor中文文档

Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime,Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。 ... »

css自定义字体----使用外部字体文件

css外部自定义字体 给大家分享一个使用的css小技巧!记得收藏呀!相信大家在浏览各种网站会见到各种奇形怪状花里胡哨的文字,还有就是一些浏览器兼容性问题,不会支持一些特殊的字体!给大家分享一个极其简单的css引入外部字体的方法:@font-face我们可以通过这个方法来实现个性化的字体样式啦! @f ... »

vue任意关系组件通信与跨组件监听状态 vue-communication

大家好!我是木瓜太香! 众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好维护 provider 不可控 这个时候就该今天的主角 vue-communication 登场了! ... »

CSS精灵图与字体图标

CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的 ... »

轻轻松松学CSS:Grid布局

网页布局总的来说经历了以下四个阶段: 1、古老的table表格布局,现在基本已被淘汰。 2、float浮动布局(或者position定位布局),借助float、position 等属性等进行布局,这种方法很成熟,兼容性非常好,现在使用的比较多,但比较繁琐。 3、flex弹性布局,革命性的突破,解决传 ... »

css浮动属性

1、为什么需要浮动 HTML中的标签元素大致分为三类:块状元素、内联元素、内联块元素。 每种元素都有其各自的特点,其中块状元素会独占一行,而内联元素和内联块元素则会在一行内显示。如果我们想让两个甚至多个块状元素在同一行显示,这就需要用到css的浮动属性。 2、什么是浮动(float) 浮动(floa ... »

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

关于本教程 通过一个PC端和一个移动端网上书城案例,穿插讲解CSS3中重要的知识点。 每个页面子模块均采用手把手一步一步的方式进行代码编写。 本教程不覆盖所有的CSS知识点,对于知识点的讲解秉承宁缺毋滥的原则。 大家都知道有一个二八原则,即平时工作中80%最常用的知识点占全部知识点总量的20%。笔者... ... »

CSS之选择器权重等级(不一样的权重操作)

众所周知我们的css选择器权重最高为!important往下依次为:!important,行内样式,ID选择器,类,属性选择器和伪类选择器元素和伪元素 那么我这里讲一点不一样的东西。 在某些修改某些组件样式的时候也都有头痛过权重等级。(只要不是放在行内或用!imprtant 你的选择器怎么放都无法盖 ... »

CSS基础面试题,快来查漏补缺

本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经。 我对问题进行了分类整理,并给了自己的回答。大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺。虽作为一个面试资料,但感觉也能帮助前端新手梳理CSS的知识点。 开胃餐-两道常见考题 盒子模型 样式与选 ... »

HTML&CSS面试高频考点(三)

11. CSS隐藏元素的方式 /*占据空间,无法点击*/ visibility: hidden; position: relative; top: -999em; /* 不占据空间,无法点击 */ position: absolute; top: -999em; display: none; pos ... »

HTML&CSS面试高频考点(二)

HTML&CSS面试高频考点(一) ♥ 6. W3C盒模型与怪异盒模型 标准盒模型(W3C标准) 怪异盒模型(IE标准) 怪异盒模型下盒子的大小=width(content + border + padding) + margin,即真实大小。 *参考标准模式与兼容模式的区别,兼容模式下为怪异盒模型 ... »