随笔分类 - CSS
摘要：如何清除图片下方出现几像素的空白间隙？ 方法1： img{display:block;} 方法2： img{vertical-align:top;} 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percen
阅读全文
posted @ 2020-07-19 00:07
前端一点红
摘要：随着浏览器功能越来越强大，在网页端实现各种小游戏已经是家常便饭。微信小游戏出现后，游戏（特别是小型游戏）的开发已经进入了一个相当火爆的时期。那么作为一个普通的前端开发者，如何取选择一个合适的游戏开发框架来学习和提高开发效率呢？ 我是一名前端开发人员，目前在一家新闻网站担任前端工作。我的公司不算大，技
阅读全文
posted @ 2020-07-18 23:58
前端一点红
摘要：Facebook的网站速度做为最关键的公司任务之一。在2009年，我们成功地实现了Facebook网站速度提升两倍 。而正是我们的工程师团队的几个关键的创新使它成为可能。在本文中，我将向大家介绍我们的秘密武器之一，我们称之为BigPipe的伟大底层技术。 BigPipe是一个重新设计的基础动态网页服
阅读全文
posted @ 2020-07-18 23:48
前端一点红
摘要：前两天看到阮大神的一篇在css中使用变量的文章，整理了一下。 这个重要的 css 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 css 从此变得异常强大。 一、变量的声明 声明变量的时候，变量名前面要加两根连词线（--）。 body { --foo: #7F583F; -
阅读全文
posted @ 2020-07-18 23:16
前端一点红
摘要：我们以往实现平滑滚动往往用的是jQuery, 如实现平滑回到顶部，就写如下代码： $(‘.js_go_to_top‘).click(function () { $(".js_scroll_area").animate({scrollTop: 0}, 600); }); 我们现在可能通过css实现这一
阅读全文
posted @ 2020-07-18 23:14
前端一点红
摘要：虽然现代浏览器支持css3，但是一些过往的版本或是目前有些css3属性的应用还是离不开前缀的。一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插件可以自动补全前缀。首先在页面任意地方（能生效的方）插入插件: <script src="prefi
阅读全文
posted @ 2020-07-18 23:09
前端一点红
摘要：前言，最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》，今天写的文章从“老生常谈”的页面重绘和重排入手，去探究这两个概念在页面性能提升上的作用。 一.重排 & 重绘 有经验的大佬对这个概念一定不会陌生，“浏览器输入URL发生了什么”。估计大家已经烂熟于心了，从计算机网络到j
阅读全文
posted @ 2020-07-18 22:42
前端一点红
摘要：1、js动态设置html的字体大小 var clientWidth = 0; if(document.documentElement.clientWidth >= 600){ clientWidth = 600; }else{ clientWidth = document.documentEleme
阅读全文
posted @ 2020-07-18 10:02
前端一点红
摘要：V8是google开发的JavaScriptV8是google开发的JavaScript引擎, 它是 开源的 ，而且是用C++编写的。它用于客户端（Google Chrome）和服务器端（node.js）JavaScript应用程序 V8最初旨在提高Web浏览器中JavaScript执行的性能。为了
阅读全文
posted @ 2020-07-18 09:48
前端一点红
摘要：当我们在网站中引入外部链接的时候往往使用的是 <a href="" target="_blank"></a> 大家都喜欢target="_blank", 因为新页面打开不影响原来的页面。但是这个存在安全问题, 由target="_blank"打开的页面, 可以通过window.opener访问原来的
阅读全文
posted @ 2020-07-18 09:46
前端一点红
摘要：在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯css实现渐变文字了。下面就介绍3中实现方式供大家参考！ 基础样式： .gradient-text{text-align: left;text-indent:30px;lin
阅读全文
posted @ 2020-07-18 09:44
前端一点红
摘要：1、在不同设备上采用相似的设计 用户可以通过不同类型的设备访问你的网站，这些设备包括：电脑、平板、手机、音乐播放器、甚至是智能手表等。无论用户使用什么设备访问你的网页，确保他们具有类似的体验，这是用户体验设计中的一条重要标准。 2、导航的设计要简单易用、清晰明了 导航设计是网页可用性的基石。记住，如
阅读全文
posted @ 2020-07-17 23:37
前端一点红
摘要：有时候，我们需要使页面内容不可选择。首先想到的是一个css属性：user-select。user-select有两个值： none：用户不能选择文本 text：用户可以选择文本 禁用选择代码实现 html: <p>你可以选择我。</p> <p class="noselect">你不能选择我！</p>
阅读全文
posted @ 2020-07-17 23:27
前端一点红
摘要：创建一个没有背景的圆，然后声明透明度为0.1的黑色边框(看起来是灰色)，修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画，并让该动画无限播放(infinite)即可。 使用的css3 特性: transform属性的 rotate，共一个
阅读全文
posted @ 2020-07-17 23:23
前端一点红
摘要：这篇文章主要为回答这个问题：“做响应式网页，如何让一个div的高和宽保持比例放大或是缩小？”，这里不介绍媒体查询的实现。 那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。 下面以高宽
阅读全文
posted @ 2020-07-17 22:10
前端一点红
摘要：最近在开发小程序中，需要用到音频播放功能。但在初始化时，使用InnerAudioContext.duration获取不到音频的时长。 Page({ /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // 创建一个audio this.innerAu
阅读全文
posted @ 2020-07-17 22:07
前端一点红
摘要：css已经越来越强大了 ，可以使用它来绘制各种简单的形状，用于代替图片显示，这次的分享主要用到画圆，扇形，三角形等知识点，由于IE9以上才支持圆角，暂时不考虑兼容问题 css实现圆形 <div class="circle"></div> <style> .circle { border-radius
阅读全文
posted @ 2020-07-17 22:04
前端一点红
摘要：css3里有个很强大的功能，就是计算器，使用它可以很方便对页面中的任意元素进行计数，实现类似于有序列表的功能。与有序列表相比，突出特性在于可以对任意元素计数，同时实现个性化计数。 简而言之，计数器就是采用css给html元素自动生成编号。其本质上是由css维护的变量，其值可以通过css规则递增以跟踪
阅读全文
posted @ 2020-07-17 21:50
前端一点红
摘要：一般默认的滚动条会比较丑，我们可以利用css或者js来实现实现自定义滚动条的功能； 下面就整理2种实现方式 1、css自定义滚动条 需要在WebKit平台上才支持，代码如下： ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track
阅读全文
posted @ 2020-07-17 21:48
前端一点红
摘要：文字选中效果，这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的，不过可以通过css进行设置。 代码如下： /*文字选中效果*/ *::selection { background-color: palevioletred; color: white; } *::-moz-selec
阅读全文
posted @ 2020-07-17 21:44
前端一点红
浙公网安备 33010602011771号