在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。
原生HTML实现带搜索框的select下拉框
原生HTML实现带搜索框的select下拉框
可以用 HTML <datalist> 标签实现
实例：
下面是一个 <input> 元素，<datalist> 中描述了其可能的值：
<form action="demo-form.php" method="get"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form>
<datalist> 标签规定了 <input> 元素可能的选项列表。
<datalist> 标签被用来在为 <input>
HTML rel属性值释义大全
一、HTML rel属性值索引
HTML中有一个名为rel的属性，是relationship这个单词的缩写，指明两个文档之间的关系，专门用来链接相关元素上，如<a>、<area>、<form>或<link>元素上，因此rel的属性值也是“链接类型”的代称。
rel支持非常多的属性值，包含的知识非常多，且有些属性值非常重要，完整细读至少需要30分钟时间。
二、33个rel属性值完全展示
1. rel=”alternate”
| 允许使用的链接元素 | 不允许使用的链接元素 |
|---|---|
| <a>、<area>、<link> | <form> |
单词alternate有交替、替换的意思。顾名思意就是链接有替换内容。主要有下面3大应用场景，有些场景还非常实用。
- 用在
<link>元素中，和stylesheet链接类型一起使用，配合title属性（必须），可以定义替换CSS，可以以一种体验更好的方式实现类似换肤这种功能。
兼容性非常好，IE，Chrome和Firefox均支持这种更原生的换肤效果实现。具体原理与实现可以参见这篇热门文章：“link rel=alternate网站换肤功能最佳实现”。 - 如果网站包含RSS订阅。可以使用该值进行指明，需要设置type属性值为
application/rss+xml或者
2019 前端框架对比及评测
Jacek Schae 原作，授权 LeanCloud 翻译。
我们将基于 RealWorld 示例应用对比前端框架。RealWorld 示例应用的特点：
- RealWorld 应用
比待办事项类应用更复杂。通常待办事项类应用不足以传达足够多的知识见解构建实际应用。
- 标准化
项目遵循特定规则。提供后端 API、静态标记语言、风格、API 规范。
- 专业人士编写、审阅
理想情况下，会是高一致性、高真实度的项目，由使用该技术的专业人士编写或审阅。
响应式图像教程
网页在不同尺寸的设备上，都有良好的显示效果，叫做"响应式设计"（responsive web design）。
响应式设计的网页图像，就是"响应式图像"（responsive image）。
响应式图像的解决方案有很多，JavaScript 和 CSS 都可以实现。本文介绍最简单的、语义性最好的 HTML 方法，浏览器原生支持。…
如何在不破坏事物的情况下创建黑暗主题
我的名字是弗拉基米尔，我为Yandex Mail开发移动前端。我们的应用程序暂时有一个黑暗的主题，但它不完整：只有界面和普通的电子邮件是黑暗的。具有自定义格式的消息仍然很轻，并且在黑暗的界面上脱颖而出，在晚上伤害了用户的眼睛。
今天我会告诉你我们是如何解决这个问题的。您将了解两种对我们不起作用的简单技术以及最终实现这一技巧的方法 - 自适应页面重新着色。我还将分享一些关于使图像适应黑暗主题的想法。公平地说，使用自定义CSS的页面变暗是一项相当特殊的任务，但我相信你们中的一些人可能会发现我们的经验很有帮助。…
解决Slick slider 用 animate.css动画时，第一个slider动画不起作用的问题。
Slick 是个网页轮播组件 https://github.com/kenwheeler/slick
Animate.css是一个css3动画库https://github.com/daneden/animate.css
两者常结合使用，能达到比较好的效果。
但是 Slick slider 用 animate.css动画时，第一个slider动画不起作用的问题，可以用以下方法解决！
html代码：
<div id="hero-slider">
<div class="hero-slide" style="background-image: url('http://lorempixel.com/1920/500/abstract/1');">
<div class="container">
<div class="row hero-content text-center">
<div class="col-sm-6">
<img src="//placehold.it/720x320" class="img-responsive slide-message" data-animation="fadeInLeftBig" data-delay="0.5s" />
<a href="#" class="btn btn-primary" data-animation="fadeInUpBig" data-delay="1s">LEARN … 原聊聊你不知道的网页无闪烁刷新效果
先看几个网站的效果：
现象研究：
仔细查看上面的4个视频，
上面演示的是用chrome浏览器打开以上网站的首页完成后，点击刷新按钮，页面呈现的刷新效果。
第1个是csdn的首页，刷新后可以看到的是整个页面都在闪。
第2个是QQ.com首页，刷新后，可以看到只有一少部分局部区域在闪。
第3个是GraphQL中文网,刷新后，可以看到也是一局部区域在闪（是一个动画效果）
第4个是phalcon中文网，刷新后，整个页完全不闪。
普及知识：
在现代浏览器比如：chrome,firefox等浏览器中，当一个页面完全加载完成后，会缓存到内存中，这时再去点刷新按钮或按Ctrl+R去刷新页面，页面通常来说是不会闪的。
如果发生了闪的现象，一般原因是，有些元素是动态js生成的，或在页面加载后期由css或js 改变了其位置或大小造成的。
但是当你按Ctrl+F5去强制刷新页面或清空浏览器缓存后再刷新页面，这时就会发生页面闪的现象。因为这是重新去服务器获取页面，而不是从浏览器缓存读取！
注：用IE浏览器刷新的话，一般总是会发生闪的现象的（未测试所有IE版本）
原创文章，转载请注明来自Lenix的博客，地址https://blog.p2hp.com/archives/6276
…
移动端字体自适应
完美适口：
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
为了使开发出来的应用或页面大小能适合各种高端手机使用，我们采用了h5的viewport来解决手机分辨率和屏幕大小的不同
<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,响应式网页设计–css设置网页字体大小自适应
响应式网页设计:rem、em设置网页字体大小自适应
「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？
IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem 了。
em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。
比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）
当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。
但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：
html{font-size:62.5%;
近期评论