随笔分类 - html\css
摘要：写在前面 在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。 而在我们学习之初的外部样式表都是用link引入的，但是当后来我们学习的逐渐深入，发现@import也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下link和@import的区
阅读全文
posted @ 2020-10-14 17:37
浅笑·
摘要：作为前端，在工作中难免会遇到关于排版的问题，以下是我整理的一些关于css的技巧，希望对你能有帮助。 1、每个单词的首字母大写 一般我们会用js实现，其实css就可以实现。js代码： var str = 'hello world'; str.replace(/( |^)[a-z]/g,(L)=>L.t
阅读全文
posted @ 2020-10-14 17:30
浅笑·
摘要：定义及用法 ⑴<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 ⑵<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 ⑶元数据（metadata）是关于数据的信息。元数据总
阅读全文
posted @ 2020-10-14 17:27
浅笑·
摘要：webp 是目前 Web 比较流行的解决方案，相对于 Jpeg/png, 基于 VP8 的压缩，有着非常不错的压缩率。 <pliga' 1,="" 'onum'="" 'kern'="" 1;="" color:="" rgb(58,="" 65,="" 69);="" font-family:="
阅读全文
posted @ 2020-10-14 17:26
浅笑·
摘要：一、什么是URL/URN/URI URI=URL+URNURI：统一资源标识符URL：统一资源定位符URN：统一资源名称 二、传输协议 用来传输客户端和服务器端交互的信息的（类似于快递小哥）HTTP（顺丰）：超文本传输协议（除了传递普通的文本，还可以传递文件流或者进制编码等信息），是目前最常用的WE
阅读全文
posted @ 2020-10-14 17:25
浅笑·
摘要：块（Block） /* 常规写法和BEM写法相同 */ .list 元素(Element) 块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。如上面的例子，li.item 是列表的一个子元素 /* 常规写法 */ .li
阅读全文
posted @ 2020-10-14 17:24
浅笑·
摘要：一、心形 使用transform-origin属性实现设置不同的点为原点 1、改变元素基点transform-origin（transform-origin是变形原点，原点就是元素绕着旋转或变形的点） 注意：该属性只有在设置了transform属性的时候才起作用； 如果在不设置的情况下，元素的基点默
阅读全文
posted @ 2020-10-14 17:21
浅笑·
摘要：对于首屏的定义，浏览器没有给出标准的指标，因为不同网站对于首屏的要求也是不尽相同的。我们从谷歌的第一次有效时间（first meaningfull paint）得到了一些启发，例如，一个新闻网站文字跟字体对于它来说是更重要的，而图片是次要的。新闻网站可以认为所有文字或字体加载出来即为首屏。但是对于电
阅读全文
posted @ 2020-10-14 17:20
浅笑·
摘要：Web的发展日新月异，这也使得Web开发者不得不加快脚步，学习新的技术和编程语言。尤其是对于那些大量流量入口的网站来说，跟上技术发展趋势更是尤为重要。为了使得Web开发人员能够更加专注于业务层面的开发，市场上涌现了各种各样的Web开发工具，灵活运用这些工具就能使得你的开发效率大幅提升，实现事半功倍。
阅读全文
posted @ 2020-10-13 15:34
浅笑·
摘要：JavaScript 可以说是交互之王，它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集，更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API，还有一组不太为人所知的 css API。 由于jsX和无数js框架的出现，使通过JS
阅读全文
posted @ 2020-10-13 15:32
浅笑·
摘要：现在做的项目是公司内部全部组要用的 viewer 库. Viewer 需要的功能非常的多，其中的一个就是需要提供一些常用的绘图API功能， 比如用户鼠标移动画箭头，画圈圈，高光选中文本等等。 挑战 目前遇到的挑战就是在 canvas, svg, dom + css 之间如何选择的问题，canvas
阅读全文
posted @ 2020-10-13 15:30
浅笑·
摘要：早期的项目中晓衡遇到游戏终于要完成了，辛苦了一阵满以为可以稍微放松一下了，但策划、运营要求，增加一个他们认为非常“简单”且重要的功能： 新手引导 。 回想起当年，接到这个任务时的感觉是手脚冒汗、天晕地暗、日月无光，游戏代码本来就千疮面孔，逻辑错综复杂，根本不知道该怎么下手？更困难的是，游戏本身功能和
阅读全文
posted @ 2020-10-13 15:29
浅笑·
摘要：提起 css 很多童鞋都很不屑，尤其是看到 RedMonk 2019 Programming Language Rankings 的时候，css 竟然排到了第七位。 我们先来看看这张排行榜： 从上面可以看出，CSS 的地位已经今非昔比了。 本节我们就来说说 CSS 渲染以及优化 相关的内容，主要围绕
阅读全文
posted @ 2020-10-13 15:28
浅笑·
摘要：前言 相信tab切换对于大家来说都不算陌生，后台管理系统中多会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。 1.如何切换 使用动态组件,相信大家都能看懂（部分代码省略） //通过点击就可以实现两个组件来回切换 <button @click="changeView">切换
阅读全文
posted @ 2020-10-13 15:26
浅笑·
摘要：1.css sprite是什么,有什么优缺点 将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。 减少 HTTP 请求数，极大地提高页面加载速度增加图片信息重复度，提高压缩比，减少图片大小 2 display: none; 与 visibi
阅读全文
posted @ 2020-10-13 15:25
浅笑·
摘要：解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。 图片的二进制数据可以从 <canvas> ， <img> ，Object URLs，Image URLs， Blob 对象上获取到。参见浏览器图像转换手册。 ImageData 是一个包括了像素数据、图片宽高数据
阅读全文
posted @ 2020-10-13 15:23
浅笑·
摘要：1.Cross Site Script（XSS，跨站脚本攻击） XSS 就是攻击者在 Web 页面中插入恶意脚本，当用户浏览页面时，促使脚本执行，从而达到攻击目的。XSS 的特点就是想尽一切办法在目标网站上执行第三方脚本。 举个例子。原有的网站有个将数据库中的数据显示到页面的上功能，document
阅读全文
posted @ 2020-10-13 15:21
浅笑·
摘要：什么是<!DOCTYPE html>？ 在html文档初，往往会有这么一句话<!DOCTYPE html>，那么它的意义是什么呢？它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，
阅读全文
posted @ 2020-10-13 15:18
浅笑·
摘要：前言 原本只是想简单的聊一下代码格式化的问题，无奈本文拖沓了很久，在此期间，我又思考了很多，我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字，可能叫“代码美化”更贴切一点，但是本文的深度远没有标题那么宏大。 在我看来，代码质量不仅体现在逻辑上，也要体现在形式上。尤其前端代码，在日渐复杂的单页面
阅读全文
posted @ 2020-10-13 15:17
浅笑·
摘要：实现样式： 1、鼠标移入后，鼠标样式图标变为“锤子”。 2、用户砸金蛋，锤子简单的扬起效果。 3、砸碎金蛋，显示内容。 分析实现步骤： 1、在html中插入一颗金蛋 找一张静态图片或带一点效果的动态图，直接放入img标签即可。 2、鼠标移入，改变鼠标样式图标 系统自带的鼠标样式就那几种，可以通过cs
阅读全文
posted @ 2020-10-13 15:16
浅笑·
浙公网安备 33010602011771号