先看看只用了一个div加上css实现的效果：由于录制gif体积较大，所以只录了加载到一半的效果。先帖上完整代码，如果不好读后面有大致的思路说明：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&qu...
389
前言这真是一个屌炸天的新属性，可以发挥想像实现各种镂空效果。目前还没有被所有浏览器支持，Chrome需要添加-webkit-前辍。开胃小菜全文颜色渐变代码超简单：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-...
417
一、毛玻璃效果backdrop-filter 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。下例为一个毛玻璃效果：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &nbs...
382
前言 Markdown 是一种轻量级标记语言。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。 由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至...
426
很多提高体验的交互效果，CSS就够了。一、加载进度完整代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&quo...
406
一、什么是网格布局CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。二、基本概念2.1 网格容器我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个...
344
伪类
伪元素
:nth-child(an+b) 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：0n+3 或简单的 3 匹配第三个元素。1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。...
2094
去掉输入框黄色背景
autofill
chrome浏览器或其它webkit内核浏览器自动完成输入框的输入后，输入框会有淡黄色背景。我们一般不想要这个样式。发果使用默认的白色背景，黑色文字相对好解决一点。但是有更丰富的自义定样式，就不好处理了，比如输入框的字为白色，背景为黑色。通过查阅资料与不断尝试，最终有了比较完美的解决方案...
4067
HTTP请求过程
浏览器渲染过程
浏览器输入URL到看到页面，过程中发生了什么？ 《HTTP权威指南》的精要解释：(a) 浏览器从URL中解析出服务器的主机名;(b) 浏览器将服务器的主机名转换成服务器的IP地址;(c) 浏览器将端口号(如果有的话)从URL中解析出来;(d) 浏览器建立一条与Web服务器的TCP连接;(e) 浏览器向服务器发送一条HTTP请求报文;(f) 服务器向浏览器回慈禧太后一条HTTP响应报文; (g) 关闭连接浏览器显示文档二. 浏览器渲染页面的过程...
2205
伪类
伪元素
: 一个冒号是-伪类:: 两个冒号是-伪元素一句话解释：伪类：可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。伪元素：所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。详细的解释一下：伪类：伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特...
4708
