随笔分类 - html\css
摘要：当我们给img标签加上固定的宽和高时，img标签中的图片会默认被拉伸变形，如图： <body> <img src="./demo.jpg" alt=""> <style> img{ width: 300px; height: 150px; } </style> </body> 图1-给img元素加上
阅读全文
posted @ 2021-06-25 21:21
浅笑·
摘要：一、css实现轮播图 原文网址：https://www.jianshu.com/p/550c11f3b731 实现逻辑： 1）将所有的轮播图片放在一个容器里面，并排排列； 2）编写css动画事件：每隔一定时间向左偏移一定距离，距离为一个轮播图宽度；到最后一个轮播图后切换到第一个图片，实现无限循环 优
阅读全文
posted @ 2021-06-25 21:20
浅笑·
摘要：文本溢出我们经常用到的应该就是text-overflow:ellipsis了，相信大家也很熟悉，但是对于多行文本的溢出处理确接触的不是很多，最近在公司群里面有同事问到，并且自己也遇到过这个问题，所以专门研究过这个问题。 首先我们回顾一下以前实现单行缩略是可以通过下面的代码实现的（部分浏览器需要设置宽
阅读全文
posted @ 2021-06-25 21:19
浅笑·
摘要：静态web与动态web 在静态WEB程序中，客户端使用WEB浏览器（IE、FireFox等）经过网络(Network)连接到服务器上，使用HTTP协议发起一个请求（Request），告诉服务器我现在需要得到哪个页面，所有的请求交给WEB服务器，之后WEB服务器根据用户的需要，从文件系统（存放了所有静
阅读全文
posted @ 2021-06-25 21:17
浅笑·
摘要：隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在css也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 方法1：计算滚动条宽度并隐藏起来 在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以
阅读全文
posted @ 2021-06-25 20:08
浅笑·
摘要：DocumentFragment 是什么 ？ DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是 Docume
阅读全文
posted @ 2021-06-25 20:06
浅笑·
摘要：1.使用相对单位 通常我们在项目开发中，使用px作为尺寸的单位，而不是使用相对单位，如：rem、em等。在万物互联的时代，最好的方式是相对单位rem、vh、vw等现代 CSS 布局（如 flexbox 和 grid）方式，最大限度的支持各种终端设备。 绝对单位 px ：是一个绝对单位，主要是因为它是
阅读全文
posted @ 2021-06-24 18:39
浅笑·
摘要：minxin 让组件复用灵活化 vue 提供了 minxin 这种在组件内插入组件属性的方法，个人建议这货能少用就少用，但是有个场景则非常建议使用 minxin：当某段代码重复出现在多个组件中，并且这个重复的代码块很大的时候，将其作为一个 minxin 常常能给后期的维护带来很大的方便。 这是项目中
阅读全文
posted @ 2021-06-24 18:38
浅笑·
摘要：背景 复杂的网站都会有大量的css代码，通常也会有许多重复的值。 举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换，效率不高且容易出错。 自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，--main-t
阅读全文
posted @ 2021-06-24 18:36
浅笑·
摘要：最近在开发小程序遇到这样一个问题， 在用户点击授权后去解密手机号时会出现第一次失败，第二次成功的情况。研究了一段时间，终于找到比较合理的解决方案，在此记录并总结一下，希望可以帮助到大家。 需求描述 在用户点击获取电话按钮后， 将用户在微信内设置的电话解密显示在联系电话输入框内 具体代码 <view
阅读全文
posted @ 2021-06-24 18:34
浅笑·
摘要：网页使用到的色彩标示方法中，从古早时期大家都在用的16进位码（#000000）、RGB色值标示、HSL色彩标示，其中网页设计师最常使用的16进位色码标示法，而16进位码又是如何计算色彩的呢？有没有办法直接脑袋就把色彩算出来？HSL色彩该如何运用与记忆？有没有什么秘诀或小技巧？一连串的问题就跟着继续看
阅读全文
posted @ 2020-12-09 21:56
浅笑·
摘要：响应式布局的概念 响应式布局，即 Responsive design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 但需要注意的是，响应式布局的关键不仅仅在于布局，更多的是细节需要去考虑，譬如表单的响应式设计、图片的响应式设计。
阅读全文
posted @ 2020-12-09 21:53
浅笑·
摘要：先看看Demo: CODEPEN 示例页面 讲到选项卡（Tabs）功能时，大多会想到用JavaScript去做，像知名的前端框架：Bootstrap所提供的Tab元件，就是用jQuery实现的（其实网络上有很多用jQuery开发的Tab）；但其实不用jQuery或JavaScript技术，就能实现高
阅读全文
posted @ 2020-12-09 21:52
浅笑·
摘要：我在做面试官的时候，曾经问过很多朋友这个问题： Cookie 和 Session 有什么区别呢？大部分的面试者应该都可以说上一两句，比如：什么是 Cookie？什么是 Session？两者的区别等。 但如果再往深入探讨的话，就慢慢有一些朋友不太了解了，谈起原理时就很少有朋友全部回答准确。今天和大家一
阅读全文
posted @ 2020-12-09 21:42
浅笑·
摘要：css3 中有很多表示元素序号的选择器，有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-las
阅读全文
posted @ 2020-12-09 21:41
浅笑·
摘要：作为一个前端，给元素添加事件是一件司空见惯的事情。可是在Canvas中，其所画的任何东西都是无法获取的，更别说添加事件，那么我们对其就束手无策了吗？当然不是的！我们在平时项目中肯定都用过许多Canvas的框架，我们发现事件在这些框架中已经使用的十分成熟了，而且并没有出现特别严重的问题。那么我们可以肯
阅读全文
posted @ 2020-12-09 21:38
浅笑·
摘要：我在工作中使用css Grid已经有几个月了，我非常喜欢它在页面布局时给我的灵活性。这么长时间以来，我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在，我真的无法想象没有Grid的css！ 最近我还注意到的一件事就是CSS自定义属性。CSS自定义属性的工作方
阅读全文
posted @ 2020-12-09 21:35
浅笑·
摘要：一、css变量非全局 最近做项目，发现css变量一个有意思的特性，那就是变量作用域非全局。 举个例子，如下html和CSS： <div> <div>测试a</div> <div>测试b</div> <div>测试c</div> </div> .box { --color: red; color: v
阅读全文
posted @ 2020-12-09 21:34
浅笑·
摘要：一、Scroll Snap是前端必备技能 css Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何js代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯css实现。 而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使
阅读全文
posted @ 2020-12-09 21:32
浅笑·
摘要：ES2017+，你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具，可以脑海中永远划掉。100行代码，你将透视构建工具的本质。 100行代码，你将拥有一个现代化、规范、测试驱动、高延展性的前端构建工具。 在阅读前，
阅读全文
posted @ 2020-12-09 21:30
浅笑·
浙公网安备 33010602011771号