05 2019 档案
摘要:表单 在现代Web应用中占据着重要地位。 表单可以很简单,也可以非常复杂,要横跨几个页面。 除了从用户哪里获得数据,Web应用还需要以容易看懂的方式展示数据。 表格 是展示复杂数据的最佳方式。 1.设计数据表 1.1 表格专有元素 HTML 中的表格是通过 元素来创建的,表格由 (table row
阅读全文
摘要:4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力,始于 媒体类型 。 媒体类型用于针对特定的环境应用样式,包括屏幕显示、打印和电视等。 通过给 元素添加 属性,可以指定在哪些设备上应用相关样式。 在CSS文件中指定媒体类型: 4.2 媒体查询 在 元素中, 媒体查询 可以这样写
阅读全文
摘要:1.一个例子 响应式Web设计最核心的一点,就是可以适配不同视口大小的流式布局。 1.1 简单上手 把列设置为浮动和100%宽度,以保证行可以包含浮动的子元素。 1.2 媒体查询 如果视口更宽一些,那就有可能在一屏之内显示更多内容。 如果媒体类型屏幕的可视窗口宽度大于等于35em,就使用相应的样式。
阅读全文
摘要:3.二维布局:CSS Grid Layout CSS Grid Layout模块为了能在二维空间里控制元素的顺序、位置和大小而定义了一组CSS属性。 被设值为 的元素叫 网格容器 (grid container)。 容器进一步被网格线划分为不同的区域,叫 网格单元 (grid cell)。 网格线之
阅读全文
摘要:1.布局规划 1.1 网格 网格系统 是设计师在切分布局时作为参照的一组行和列。 1.2 布局辅助类 类名用于为布局添加样式。为了让样式可以重用,让类名表达其意图。 另一种做法: 命名规范 是高质量代码的重要组成部分。 如果设计很复杂,那么最好选择一个现成的 CSS布局框架 。 到底是该选择现成的框
阅读全文
摘要:网页是由不同内容块构成的:标题、段落、链接、列表、图片、视频,等等。 1.定位 定位并不适合总体布局,因为它会把元素拉出页面的正常流。 元素的初始定位方式为静态定位( ),即 块级元素垂直堆叠 。 把元素设置为相对定位( ),然后可以相对于其原始位置控制该元素的偏移量,同时又不影响其周围的元素。 绝
阅读全文
摘要:4.多重背景 CSS支持一个元素设置多个背景图片。 每个背景属性有相应的多值语法,多个值由逗号分隔。 如果随后的背景属性值少于背景图片的个数,那么相应的值会循环使用。 5.边框与圆角 可以分别为盒子的各边设置边框,也可以一次性为四边设置边框 除非明确指定 属性,否则边框宽度会影响盒子的尺寸 设置边框
阅读全文
摘要:HTML文档中的所有元素都是由矩形盒子构成的——不管是包含页面结构的容器元素,还是段落中的每行文本,归根结底都是盒子。 1.背景颜色 设置页面背景颜色。 简写属性: 通过 可以一次性地设置与背景相关的多个属性。 十六进制表示法: 一个 后面加上6位十六进制数字构成的字符串。 这个字符串由3组数字(每
阅读全文
摘要:自印刷出版物诞生以来,排版就一直是平面设计的基础。 同样,排版在网页设计中也扮演着重要角色。 1.CSS的基本排版技术 1.1 文本颜色 对应网页而言,文本颜色也许是最基本的样式之一。 默认情况下,浏览器把绝大部分文本渲染为黑色。 1.2 字体族 字体族 (font family)属性的值是一个备选
阅读全文
摘要:1.盒模型 1.1 盒子大小 盒模型 描述了元素如何显示,以及如何相互作用、相互影响。 页面中的所有元素都被看作一个矩形盒子,这个盒子包含 元素的内容 、 内边距 、 边框 和 外边距 。 给元素应用的背景会作用于元素内部和内边距。 外边距用于在页面中控制元素之间的距离。 对元素盒子而言,内边距、边
阅读全文
摘要:3.层叠 稍微复杂的样式表中都可能存在两条甚至多条规则同时选择一个元素的情况。 CSS 通过一种叫作 层叠 (cascade)的机制来处理这种冲突。 层叠机制的原理是为规则赋予不同的重要程度。最重要的是 作者样式表 ,即由网站开发者所写的样式。其次是 用户样式表 ,用户可以通过浏览器的设置选项,为网
阅读全文
摘要:1.创建结构化、语义丰富HTML 语义化标记是优秀HTML文档的基础。 语义化标记意味着在正确的地方使用正确的元素,从而得到有意义的文档。 有意义的文档可以确保尽可能多的人都能够使用。 1.1 ID和class属性 为元素添加ID和class属性不一定能给文档增加含义或结构。这两个属性只是一种让其他
阅读全文