常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。 这几个布局都是自适应的，自动适配桌面设备和移动设备。代码实现很简单，核心代码只有一行，有很大的学习价值，内容也很实用。 我会用到 CSS 的 Flex 语法和 Grid 语法，不过只用到一点点，不熟悉的朋友可以先看看教程链接，熟悉一下基本概念。每一个布局都带有 CodePen 示例，也可以到这个网页统一查看。 本文是跟极客大学合作的前端学习讲座的一部分，详见文末说明。 一、空间居中布局 空间居中布局指的是，不管容器…
这里记录每周值得分享的科技内容，周五发布。 本杂志开源（GitHub: ruanyf/weekly），欢迎提交 issue，投稿或推荐科技内容。 周刊讨论区的帖子《谁在招人？》，提供大量就业信息，欢迎访问或发布工作/实习岗位。 封面图 7月28日，泰国曼谷的苹果商店开幕。它的形状很奇特，有一个树冠屋顶，下面是一个全玻璃的建筑。（出处） 本周话题：降雨量和保险博弈 前几天，我看到了一个很新奇的保险：上下班降雨险。 只要上下班遇到大雨，保险公司就会赔偿。 根据地点和季节而不同，赔偿标准都不一样，下图是上海的赔付标准。 …
本文给大家带来JS中判断某个字符串是否包含另一个字符串的五种方法，有string对象的方法，match() 方法，RegExp对象的方法，test() 方法，exec() 方法，具体内容详情大家参考下本文 String对象的方法 方法一: indexOf() (推荐) var str = "123" console.log(str.indexOf("2") != -1); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字…
这里记录每周值得分享的科技内容，周五发布。 本杂志开源（GitHub: ruanyf/weekly），欢迎提交 issue，投稿或推荐科技内容。 周刊讨论区的帖子《谁在招人？》，提供大量就业信息，欢迎访问或发布工作/实习岗位。 封面图 元上都遗址位于内蒙古草原，是元朝定都北京之前的首都，距今约750年的历史。马可波罗就在这里，第一次见到了元世祖忽必烈。（来源：Instagram） 本周话题：高考志愿怎么填 前不久，亲戚朋友咨询我，高考志愿的填写建议。 我建议选择理工科，不一定是电子技术和计算机，科技类的专业都可以。…
这里记录每周值得分享的科技内容，周五发布。 本杂志开源（GitHub: ruanyf/weekly），欢迎提交 issue，投稿或推荐科技内容。 周刊讨论区的帖子《谁在招人？》，提供大量就业信息，欢迎访问或发布工作/实习岗位。 封面图 7月10日，华为公司为喀麦隆国营电信公司 CAMTEL 建造的机房启用，造价为1700万美元，存储容量为 2,000 TB，是非洲中部最大的机房。（出处） 本周话题：我不想让你记住我的脸 上海电视台最近报道：“本市徐汇区漕河泾街道的薛家宅小区，正在推行门禁系统的人脸识别。小区居民必须…
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景。 语法 最基本，使用 mask 的方式是借助图片，类似这样： { mask: url(mask.png); mask: url(masks.svg#star); } 当然，使…
定义一个random()函数，原理是 随机数和最大值减最小值的差相乘 最后再加上最小值。 function random(min, max) { return Math.floor(Math.random() * (max - min)) + min; } random(0, 100) // 生成 1-100 的随机整数
作者：web秀 http://www.javanx.cn/20190321/css-skill/ 本文涵盖了20个css技巧，可以解决许多工作中常见的问题。 1、使用CSS重置（reset） css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。 大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。 *{ box-sizing:border…
