中学网站管理系统下载电子商务网站设计的认识

当前位置： 首页 > news >正文

中学网站管理系统下载,电子商务网站设计的认识,网站建站售后服务,可以访问电脑网页的浏览器当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 ✔️ 12.2 Web 字体12.3 谷歌字体 文章目… 当前内容所在位置可进入专栏查看其他译好的章节内容 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考12.1.3 行内元素的间距设置 ✔️ 12.2 Web 字体12.3 谷歌字体 文章目录 12.1.3 行内元素的间距设置 Spacing inline elements 《CSS in Depth》新版封面 译者按 都说细节决定成败这一点在 CSS 的页面实现中体现得淋漓尽致。见过太多的前端开发明明用简单的 CSS 就能实现的效果却剑走偏锋写了一堆 JavaScript 脚本。这种感觉就像医生看病一样医术的高低不在于用了多少名贵药材而在于能否对症下药。缝缝补补给自己挖坑也就算了关键还害苦了后面接手的兄弟。好的 CSS 设计一定是用心迭代的结果而细节处理的好坏又决定了迭代的次数与每次迭代的质量。 12.1.3 行内元素的间距设置 Spacing inline elements 设计稿中还有最后一处细节样式需要微调即中间的内容栏展示的操作系统列表区域。示例应用 Ink 可以在这些操作系统中使用如图 12.6 所示。之前将每个列表项放到了一个无序列表元素ul中现在需要根据设计稿的要求将它们排成一行。 【图 12.6 列表项需要微调样式并在一行内展示】 这种微型布局的设计在一些标签类的内容展示上十分常见例如博客文章的标签列表或商品类别等。本例之所以采用这样的设计方案旨在带您了解几个您应该比较熟悉且感兴趣的小问题quirks。 这种布局有多种实现方案Flexbox 弹性盒布局和行内元素是两种比较容易想到的。本书之前的章节已经介绍了不少有关 Flexbox 布局的知识因此这里就重点考察一下采用行内元素时需要考虑哪些问题。 如果采用行内元素来实现上述效果应该很容易想到一些样式。例如每个元素项都需要声明 display: inline各元素还需要设置一些内边距、背景色、圆角边框等等。一开始可能感觉只要有这些样式就够了可一旦内容中出现换行的情况问题便接踵而至当视口宽度为某个固定值或者后续列表项发生了变化就可能会发生如图 12.7 所示的情况 【图 12.7 多个列表项在换行时出现了重叠的情况】 每一行列表项的灰色背景会和另一行的列表项重叠原因就在于行高。前面讲过文本行的高度是由 字号 乘以 行高 决定的。如果为行内元素添加内边距元素本身虽然也会变高但不会增加文本行的高度。文本行的高度完全由行高决定。 要解决这个问题就需要增加每个列表项的行高。代码清单 12.5 给出了标签列表模块对应的 CSS 代码。将它们同步更新到 modules 模块图层对应的样式表中。也可以尝试不同的行高看看会产生什么样的效果。 译注 为方便对照这里直接给出正文栏中间那栏的 HTML 标记 div classtileh4Take it with you/h4pInk is available on a wide array of devices, so you can work fromanywhere:/pul classtag-listliWeb/liliiOS/liliAndroid/liliWindows Phone/li/ula href/supported-devices classbuttonRead more/a /div代码清单 12.5 为标签添加样式 layer modules {.tag-list {/* 覆盖用户代理默认的列表样式 /list-style: none;padding-inline-start: unset;}.tag-list li {display: inline;padding: 0.3rem 0.5rem;font-size: 0.8rem;border-radius: 0.2rem;background-color: var(–light-gray);line-height: 2.6; / 设置一个较大的行高以便在换行时有足够的垂直空间 */} }值得一提的是只有行内元素才具有这样的行为模式。如果一个元素是弹性子元素或 inline-block即行内块级元素为了容纳它其所在的行也会随之增高。当然页面仍需设置水平和垂直外边距来增加子元素间的间隔。借助行内元素的相关特性就能通过元素间的天然空白来产生想要的间距。 注意 请注意页面中 “Windows Phone” 字样的子元素它是可以换行的。如果换成弹性盒子或者行内块inline block中则不允许像这样换行整个元素都将换到下一行显示。如果不允许出现这样的情况则需要根据实际情况选择最适合您的方式来解决这个问题。 这样我们就根据上一章给出的设计稿完成了整个页面的实现。本地页面的最终效果应该和图 12.8 中展示的视觉稿效果完全一致。 【图 12.8 完成页面设计后的效果】 我们花了很多时间来分析这些样式细节。很多开发者在实现页面设计时往往不太在意这些细节但对于那些关注了细节的开发者来说做到就相当于赚到。往往也正是这些细节道出了普通与优秀之间的本质差别。 在开发 CSS 样式时建议大家多花些时间来完善设计细节。即便您做得没有设计师那么专业也要相信自己的眼光。试着在这里多预留些空间或者在那里少留一点看看哪种效果更好。要舍得花时间来调试但千万别滥用页面颜色而是有选择地将颜色放在最需要吸引用户注意的位置。要创建一致的模式然后打破这些规律的模式这样才能将用户的注意力吸引到页面最重要的内容上。 译注 间距的微调就暂告一个段落了。下一节将介绍排版相关的知识看看 CSS 近年来在字体方面都有哪些最新进展。 关于《CSS in Depth》中译本书名《深入解析 CSS》 第 1 版第 2 版读者评分原版4.7亚马逊中文版9.3豆瓣原版5.0亚马逊中文版暂无待出版出版时间原版2018 年 3 月中文版2020 年 4 月原版2024 年 7 月中文版暂无待出版原价原版\(44.99中文版139.00原版\)59.99中文版暂无待出版现价原版\(36.49中文版52.54 起步原版\)52.09中文版暂无待出版原版国内预订起步价 461.00起步价 750.00 本专栏为该书第 2 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待 目前已完结的章节可进入本专栏查看详情连载期间完全免费 第一章 层叠、优先级与继承已完结 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位已完结 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型已完结 3.1 常规文档流3.2 盒模型3.3 元素的高度3.4 负的外边距3.5 外边距折叠3.6 容器内的元素间距问题3.7 本章小结 第四章 Flexbox 布局已完结 4.1 Flexbox 布局原理4.2 弹性子元素的大小4.3 弹性布局的方向4.4 对齐、间距等细节处4.5 本章小结 第五章 网格布局已完结 5.1 构建基础网格5.2 网格结构剖析 上 5.2.1 网格线的编号下5.2.2 网格与 Flexbox 配合下 5.3 两种替代语法 5.3.1 命名网格线5.3.2 命名网格区域 5.4 显式网格与隐式网格上 5.4.1 添加变化 中5.4.2 让网格元素填满网格轨道下 5.5 子网格全新增补内容5.6 对齐相关的属性5.7 本章小结 第六章 定位与堆叠上下文已完结 6.1 固定定位 6.1.1 创建一个固定定位的模态对话框6.1.2 在模态对话框打开时防止屏幕滚动6.1.3 控制定位元素的大小 6.2 绝对定位 6.2.1 关闭按钮的绝对定位6.2.2 伪元素的定位问题 6.3 相对定位 6.3.1 创建下拉菜单上6.3.2 创建 CSS 三角形下 6.4 堆叠上下文与 z-index 6.4.1 理解渲染过程与堆叠顺序上6.4.2 用 z-index 控制堆叠顺序上6.4.3 深入理解堆叠上下文下 6.5 粘性定位6.6 本章小结 第七章 响应式设计已完结 7.1 移动端优先设计原则上篇 7.1.1 创建移动端菜单下篇7.1.2 给视口添加 meta 标签下篇 7.2 媒体查询上篇 7.2.1 深入理解媒体查询的类型上篇7.2.2 页面断点的添加中篇7.2.3 响应式列的添加下篇 7.3 流式布局7.4 响应式图片7.5 本章小结 第八章 层叠图层及其嵌套 8.1 用 layer 图层来操控层叠规则上篇 8.1.1 图层的定义上篇8.1.2 图层的顺序与优先级下篇8.1.3 revert-layer 关键字下篇 8.2 层叠图层的推荐组织方案8.3 伪类 :is() 和 :where() 的用法8.4 CSS 嵌套的使用 8.4.1 嵌套选择器的使用8.4.2 深入理解嵌套选择器8.4.3 媒体查询及其他 规则 的嵌套 8.5 本章小结 第九章 CSS 的模块化与作用域 9.1 模块的定义 9.1.1 模块和全局样式9.1.2 一个简单的 CSS 模块9.1.3 模块的变体9.1.4 多元素模块 9.2 将模块组合为更大的结构 9.2.1 模块中多个职责的拆分9.2.2 模块的命名 9.3 CSS 的作用域 9.3.1 CSS 作用域的就近原则9.3.2 划定作用域的边界9.3.3 CSS 中的隐式作用域9.3.4 关于 CSS 作用域与层叠图层 9.4 CSS 模式库9.5 本章小结 第十章 CSS 容器查询 10.1 容器查询的一个简单示例 10.1.1 容器尺寸查询的用法 10.2 深入理解容器 10.2.1 容器的类型10.2.2 容器的名称10.2.3 容器与模块化 CSS 10.3 与容器相关的单位10.4 容器样式查询的用法 10.4.1 将模块与所在容器解耦10.4.2 减少重复代码 10.5 本章小结 第 11 章 颜色与对比 11.1 通过对比进行交流 11.1.1 模式的建立11.1.2 还原设计稿 11.2 颜色的定义 11.2.1 色域与色彩空间11.2.2 CSS 颜色表示法RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH 11.3 利用 OKLCH 处理颜色上篇 11.3.4 从页面其他颜色衍生出新颜色下篇 11.4 思考字体颜色的对比效果11.5 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介