随笔分类 - HTML/CSS
摘要：PWA（Progressive Web App – 渐进式网页应用）是一种理念，由 Google Chrome 在 2015 年提出。PWA 它不是特指某一项技术，而是应用多项技术来改善用户体验的 Web App，其核心技术包括 Web App Manifest、Service Worker、Web Push 等，用户体验才是 PWA 的核心。
阅读全文
摘要：单页面结构简单、布局清晰，常常用来做手机 App 或者某个产品的下载介绍页面。现在，展示型网页整体趋向于单页网站设计，这样一次性把核心信息展现出来，对于用户来说更加直观和简单，能够快速了解一个产品。
阅读全文
摘要：一、介绍 社交媒体网站盛行，人们常常会使用评论表达自己的观点，评论功能已然成为网站的一部分。 二、知识点 2.1 媒体对象 官方解释：这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。 2.1.1 基础媒体对象 一个基
阅读全文
摘要：注册和登录在社交和商业网站中是必不可少的一个部分。
阅读全文
摘要：响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。
阅读全文
摘要：一、背景：页面为何会卡？ 1.1 等待时间长（性能） 项目本身包/第三方脚本比较大。 JavaScript 执行阻塞页面加载。 图片体积大且多。 特别是对于首屏资源加载中的白屏时间，用户等待的时间就越长，用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出，“人类将
阅读全文
摘要：讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有
阅读全文
摘要：## jQuery 链接： - v1.9.1：https://i.mazey.net/lib/jquery/1.9.1/jquery.min.js - v2.1.1：https://i.mazey.net/lib/jquery/2.1.1/jquery.min.js - v3.1.1：https:/
阅读全文
摘要：一、作用 离线浏览 根据文件规则把资源缓存在本地，脱机依然能够访问资源，联网会直接使用缓存在本地的文件。优化加载速度，节约服务器资源。 二、适用场景 正如 manifest 英译的名字： 离线应用程序缓存 ，这项功能是设计给会有离线场景的应用来使用，例如：需要离线使用的手机APP/H5，亦或是PC端
阅读全文
摘要：定义 只读的 localStorage 允许你访问一个 Document 的远端（origin）对象 Storage；数据存储为跨浏览器会话。localStorage 类似于 sessionStorage，区别在于，数据存储在 localStorage 是无期限的，而数据存储在 sessionSto
阅读全文
摘要：一、问题 1. 多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。 2. 若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。 3. 若浮动元素前面还有同级元素没有浮动则会影响页面结构。 二、解决办法 1.clear:both 在最后一个浮动元素后面添加属性为 的元素。 给父元素添
阅读全文
摘要：最近一个项目有页面全屏的的需求，搜索了下有HTML5的全屏API可用，不过各浏览器的支持不一样。 MDN Fullscreen API: The Fullscreen API provides an easy way for web content to be presented using the
阅读全文
摘要：一、order属性 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 二、flex-grow属性 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的fle
阅读全文
摘要：一、flex-direction属性 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 二、flex-wrap属性 nowrap（默认）：不换行
阅读全文
摘要：一、说明 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 IE7及更早浏览器只支持a元素的:active，从IE8开始支持其它元素的:active。 另：如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的
阅读全文
摘要：一、说明 1.1 定义和用法 transition 属性是一个简写属性，用于设置四个过渡属性： transition-property:规定设置过渡效果的CSS属性的名称。 transition-duration:规定完成过渡效果需要多少秒或毫秒。 transition-timing-functio
阅读全文
摘要：一、官方解释 设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数。 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(b
阅读全文
摘要：一、:nth-child 1.1 说明 :nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。 注意：如果第N个子元素与选择的元素类型不同则样式无效！ 1.2 示例 二、:nth-of-type 2.1 说明 :nth-of-type(n)选择器
阅读全文
摘要：一、问题 使用CSS3的column-width: auto | <length>属性时，出现排列的内容被截断，出现错位的现象。 二、原因 需要为图片容器设置高度，不然会崩掉。 三、解决方法 给需要分列的容器加上height:100%;overflow: auto;。 解决CSS3多列样式colum
阅读全文
摘要：table中用JavaScript插入隐藏（即display="none";）的tr时，别用display="block";换成display=""; 解决table插入tr错位
阅读全文