随笔分类 - 页面布局
摘要：一、概述 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可
阅读全文
摘要：px介绍： px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的
阅读全文
摘要：卡片就是交互信息的承载体，通常以矩形的方式呈现。就像信用卡或者棒球卡，网页卡片以一个浓缩的形式提供了快速并且相关的信息。所有的卡片特点就是交互性。不仅仅是他们提供了信息，而且他们用另外一种委婉的方式去要求一次互动。卡片通常包括按钮或者发布到社交媒体的方法。卡片是简洁小巧的信息盒子。在界面设计中，要平
阅读全文
摘要：一、静态布局(Static Layout) 1. 布局概念 最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。 2. 优点 采用的是css2之前的写法,不存在浏览器兼容性。布局简单
阅读全文
摘要：CSS简介 CSS 指层叠样式表 (Cascading Style Sheets)，样式定义 如何显示 HTML 元素。 样式通常存储在样式表中，当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明： 1.
阅读全文
摘要：一、流体布局 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值。流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。 复制代码 <!DOCTYPE html> <html l
阅读全文
