随笔分类 - html/css
摘要：了解html html（HyperText Marked Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言。我们在浏览网页时看到的一些丰富的影像、文字、图片等内容都是通过HTML表现出来的。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，一直被用作W
阅读全文
posted @ 2020-10-18 14:25
酷儿q
摘要：任务 我们最近在SeatGeek更新了我们的“跟踪"图标，以匹配我们的新iPhone应用程序。 首席设计师在PSD中创建了具有不同状态的心脏图标，并在下面创建了动画： 什么是css3动画？ 在css中，动画是一种让元素逐渐改变样式的效果。 您可以使用@keyframes关键字创建动画，后跟动画的名称
阅读全文
posted @ 2020-10-18 14:24
酷儿q
摘要：<progress> 标签表示任务的进度（进程），例：可定义完成多少工作，还有多少工作可以下载等等。该标签可与JavaScript结合使用，来显示任务的进度，创建动态的进度条。 注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <met
阅读全文
posted @ 2020-10-18 14:23
酷儿q
摘要：介绍 在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。而在css3当中，新增加了弹性盒子模型，弹性盒子模型是一种新增加的强大的、灵活的布局方案。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布
阅读全文
posted @ 2020-10-18 14:22
酷儿q
摘要：什么是 BOM? BOM（Browser Object Model）即浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象。由于 BOM 主要用于管理窗口与窗口之间的通讯，因此其核心对象是 window。 相关方法(属性) 弹出框 window.alert() URL 的属性 // 当前 ht
阅读全文
posted @ 2020-10-18 14:21
酷儿q
摘要：1. 问题描述 app内打开H5页面，页面包含input输入框，点击input调起软键盘，输入完成点击下方提交按钮弹出toast时，会出现t toast 跳动的现象，其中：toast采用 position: fixed 进行固定定位 2. 分析原因 关于 position: fixed 首先来看，M
阅读全文
posted @ 2020-10-18 14:19
酷儿q
摘要：文字带上渐变色，或者说让文字透出图片。这些效果 css 属性也可以完成。 方法一、利用css3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode
阅读全文
posted @ 2020-10-18 14:18
酷儿q
摘要：浮动的介绍 不知道大家是否和我有同样的一个感觉，每当拿起一篇杂志文章，总能发现左边或右边有图片，文字流畅地围着图片，这就是打印世界中看到的浮动： 在Web的世界中，css的 float 设计初衷也是用来处理文本围绕图片排版的，就像在杂志布局中一样。碍于当时Web布局可用方案的局限性，聪明的csser
阅读全文
posted @ 2020-10-18 14:15
酷儿q
摘要：css怎么设置边框阴影？很多人遇到这类问题都不知道怎么处理，其实利用css加阴影边框是很简单的。在CSS中可以使用box-shadow属性或filter属性的drop-shadow()来添加阴影边框。 方法1：使用box-shadow属性 box-shadow属性可以向框添加一个或多个阴影。 语法：
阅读全文
posted @ 2020-10-18 14:13
酷儿q
摘要：常见应用场景 现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在"功能导航"页面无边框, 常用在首页分类 设计目标 在scss环境下, 通过mixin实现n宫格, 并且可以支持"有无边框"和"每个格是否正方形": @include grid(3, 3,
阅读全文
posted @ 2020-10-18 14:12
酷儿q
摘要：权重这个概念，相信对许多进行过前端开发的小伙伴来说肯定并不陌生，有时候一个样式添加不上，我们就会一个 !important 怼上去，一切就好像迎刃而解了。但还有的时候，!important也并不能解决我们的问题，下面请跟随我来详细了解一下css的权重吧！ 探索权重 指某一因素或指标相对于某一事物的重
阅读全文
posted @ 2020-10-18 14:09
酷儿q
摘要：1.html5表单新特性之——新的input type <input type=" "> html5之前已有的input type: text、password、radio、checkbox、file、submit、reset、button、image、hidden HTML5新增的input ty
阅读全文
posted @ 2020-10-18 14:08
酷儿q
摘要：同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色。 1.在css中有一个叫做background-position：属性，就是专门用来控制背景图片的位置 2.格式：background-position:值1 值2； 值1的取值范围：left center rig
阅读全文
posted @ 2020-10-18 14:07
酷儿q
摘要：一、站在用户的角度看问题 一个用户，访问一个web页面的真实场景是怎样的呢？下面是某用户访问某站点的一个场景： 1. 小明打开了自己的电脑，访问了鑫空间-鑫生活； 2. 小明体内洪荒之力无法控制，疯狂拖动浏览器改变其宽度感受页面布局变化； 3. 卧槽，发现页面居然是响应式的，不由得感叹：实现的够骚气
阅读全文
posted @ 2020-10-18 14:06
酷儿q
摘要：1. Safari 3D变换会忽略z-index的层级 在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/sc
阅读全文
posted @ 2020-10-18 14:05
酷儿q
摘要：Web 模板就在那里 模板引擎负责组装数据，以另外一种形式或外观展现数据。浏览器中的页面是 Web 模板引擎最终的展现。 无论你是否直接使用模板引擎，Web 模板一直都在，不在前端就在后端，它的出现甚至可以追溯到超文本标记语言 html 标准正式确立之前。 服务器端的模板引擎 我所知道最早的 Web
阅读全文
posted @ 2020-10-18 14:03
酷儿q
摘要：说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它
阅读全文
posted @ 2020-10-14 20:03
酷儿q
摘要：前言 自从前端三大框架react、vue、Angular面世以来，前端开发逐渐趋向规范化、统一化，大多数时候新建前端项目，首先想到使用的技术一定是三大框架之一，框架给前端开发带来了极大的便利和规范，但是由于这三大框架都是js驱动，在js没有解析加载完成之前页面无法展示，会处于长时间的白屏，带来了一定
阅读全文
posted @ 2020-10-14 20:01
酷儿q
摘要：在软件开发中，研发效率永远是开发人员不断追求的主题之一。于公司而言，在竞争激烈的互联网行业中，产出得快和慢也许就决定着公司的生死存亡；于个人而言，效率高了就可以少加班，多出时间去提升自己、发展爱好、陪伴家人，工作、生活两不误。 提升效率的途径，无外乎就是「方法」和「工具」。以一个开发者的思维来想，就
阅读全文
posted @ 2020-10-14 19:48
酷儿q
摘要：效果 效果图如下 实现思路 使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌套的div容器就可以了，父容器来控制图标显示的位置，子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素
阅读全文
posted @ 2020-10-14 19:34
酷儿q
浙公网安备 33010602011771号