- 综合排序
- 最热优先
- 最新优先
- 来自专栏歪码行空
《精通CSS》第4章 网页排版
或许大家会觉得排版都是设计师的工作，前端开发按照已经排版好的设计稿复原就行。当然，这样理解也没有太大问题，但是过于依赖于设计师往往会限制我们的脚步。 作为前端开发，对于排版我们要有自己的认知，而且更好地理解 CSS 中关于网页排版的技术，我们也能更得心应手地还原设计稿。 本章原书用了近 40 页的篇幅来介绍排版，歪马会尽量精简地将其中的核心内容传达给大家。 同原书，借助维基百科中一篇关于月亮的文档来给大家介绍排版。 、连字符的使用、Web 字体的使用以及 OpenType 新排版特性。 3px 0 #3568A8, -4px 5px 0 #233956, -5px 4px 0 #3568A8,
2.2K20发布于 2020-04-07 HTML4基础知识与排版技巧全面指南
HTML4网页的 基本结构 如下：<html> <head> <title>网页标题</title> </head> <body> ...... DOCTYPE html>作用：告诉浏览器当前网页的版本注意：文档声明，必须写在网页的第一行，且在html标签的外侧排版标签：标签名标签含义单/双标签h1~h6标题双p段落双div没有任何含义，用于整体布局双注意 -- 跳转本地网页 --> 去看排版标签跳转到文件<! /resource/小电影.mp4" download="电影片段.mp4">下载电影注意：1. 若浏览器无法打开文件，则会引导用户下载。2. 4.
93400编辑于 2025-07-18- 来自专栏合集
排版建议
最近有关注诸多大佬的博客亦或微信公众号，也时常阅读一些好的文章，它们的排版风格亦是各不相同。大概是大佬都专注于叠代码的缘故，对于文章的排版好坏可能抱着得过且过的态度，有部分的文章排版实在不堪入目。 文章无过，希望大佬们能够听一下我的排版建议。 对于我们而言，考虑到每个人的审美标准不同，所以一个好的排版其实也是因人而异。但总的来说，一篇技术博文的排版落落大方，那么它看起来也将是赏心悦目的。 对于段落来说，4行以上的段落能够分割的尽量分割为多段落，之后段与段之间则添加上一定的留白，可以是空行，也可以是分割线。 最后的结果是让读者心烦意乱，不停抱怨，那文章的排版亟待提高。 推荐微信公众号的字体采用15px或16px，如果太小，会显得文章密密麻麻，很是糟糕，而字体太大文章第一感觉会让人觉得不好看呢。 很多人都了解，阅读的眼睛看起来最舒服的并不是纯黑，而是深灰色，而这个在公众号排版颜色中大概是 #585858。 相关配图 文章的配图也会显得极其重要，没有人会钟意于被一张占据整个页面的文章。
1.7K20发布于 2018-07-25 - 来自专栏sktj
Layui 排版 布局
> 移动：6/12 | 平板：6/12 | 桌面：4/12
移动：6 /12 | 平板：6/12 | 桌面：4/12移动：4/12 | 平板：12/12 | 桌面：4/12移动：4/12 | 平板：7/12 | 桌面：8/12移动：4/12 | 平板：5/12 | 桌面：4 lay-col-md-offset4偏移4 ? 让IE8 9兼容5.1K10发布于 2019-10-23 Python|图形排版
例如在 M=10 的纸张上依次打印 3x4, 2x2, 3x3 三张图片，则效果如下图所示，这一行高度为4。 例如再放入一张4x9的图片，由于剩余宽度是2，这张图片会被压缩到2x5，再被放入第一行的末尾。 如果当前行剩余宽度为0，该工具会从下一行开始继续对剩余的图片进行排版，直到所有图片都处理完毕。此时所有行的总高度和就是这 N 张图片的排版高度。 【样例输入】 4 3 2 2 2 3 2 2 【样例输出】 2 【样例解释】 纸张宽度是4，要排版3张图片，其规格（宽*高）分别是“2*2”、“2*3”、“2*2”；在删除第二张“2*3”图片后，效果如下所示 ，高度为2： 1122 1122 另一个示例， 【样例输入】 2 10 4 4 4 3 1 3 4 5 2 1 2 3 5 4 5 3 1 5 2 4 【样例输出】 17 解决方案 思路很简单：要找到最低的高度
2.5K20发布于 2020-07-02标书排版实战：AI排版标准从落地到交付
面对四份文件加起来接近300页的排版任务，逼得我们不得不找工具来提效。二、AI排版标准的核心要素经过多轮迭代，最终确立的排版标准分为以下几个层面。 这一步的关键是在技能配置中定义好排版标准模板——Heading1-4的字体字号、表格的三线表参数、页边距统一锁定——让AI在生成过程中直接应用样式，而不是生成后再手动逐段调格式。 有没有人手动加粗冒充标题（4）表格：每张表都是三线表吗？表头蓝底还是默认白色？ 五、效果对比度手动排版WorkBuddy+AI标准一份文件排版耗时4-6小时约40分钟四份文件一致性难以保证模板统一暗标检查通过率需反复核对一次性通过跨页表格处理手动调每张表一键设置六、经验总结（1）标准先行 从最开始一份文件要手动调4-6小时，到后来四个标段一起半天搞定——最耗时的反而不是生成，而是前期把排版标准琢磨透、写进技能配置的那段磨合期。
63310编辑于 2026-06-01- 来自专栏伪君子的梦呓
用 Markdown 排版
前言 说实在话，微信公众号自带的排版还是不能满足我的需求，这个真的没有办法，只能借助外部的东西来实现了。 好在微信公众号是支持 Markdown 排版的，所以直接就可以使用 Markdown 来排版。 Markdown Here非常好用，下载并安装 Markdown Here 插件，然后单击一下或者快捷键 ctrl+alt+M，一键排版不是梦。 如果不喜欢自带的样式，可以点击一键排版，然后自己修改或者套入合适的 CSS 样式。 最让我喜欢的就是支持代码主题，多种主题，多种享受。
2.2K90发布于 2018-04-04 - 来自专栏BioIT爱好者
ggplot2 图形排版：patchwork 包复杂排版
p1 + p2 + p3 + p4 + plot_layout(heights = c(1, 2)) 除了使用 ncol、nrow、widths、heights 等参数来调整排版外，还可以使用 9宫格布局，图1为在第1和4格，图2在第2和3格，图3在第6和9格，图4在7和8格，第5格是空的，用#号表示。 除了设置排版布局外，还可以使用 guides 参数来设置图形的图例。 在4个示例数据集中，图3是有图例的，那就用图3来演示图例的设置。 p1 + plot_spacer() + p2 + plot_spacer() + p3 + plot_spacer() 4. 调整图形主题 除了设置排版布局外，还可以设置图形主题。 p1 + p2 + p3 + p4 & theme_bw() 好的，patchwork 包就学到这里，应该基本够用了。 对这个包有兴趣的读者可以点击阅读原文查看更复杂的自定义排版。
7.6K60发布于 2021-10-15 好物周刊#159：排版神器，章鱼排版
它基于 Next.js 16、Tailwind CSS v4 和 Bun 构建，强调 Markdown 优先、文本优先，保障作者对内容的长期所有权，在不损失功能和性能的前提下追求极致简洁与优雅。 二、软件 1. res-downloader[4] 一款基于 Go + Wails 的跨平台资源下载工具，简洁易用，支持多种资源嗅探与下载。 2. 章鱼排版 [7] 支持将一篇长文，自动排成小红书、公众号、X / Twitter 支持的格式及图片，排版后一键复制即可。 2.
21200编辑于 2026-06-29- 来自专栏阮一峰的网络日志
排版六原则
秋叶老师对它进行了简单的排版，还是一张表格，还是黑白配色，没有使用任何图形元素，效果却完全不一样了。 ? 真是令人眼前一亮，不由自主地想多看几眼。这就是优秀设计的作用：它让你脱颖而出。 ==================================== 秋叶老师把他的排版心得，总结为六个原则：对齐，聚拢，重复，对比，强调，留白。 五、重复原则 多页面排版时，注意各个页面设计上的一致性和连贯性。另外，在内容上，重要信息值得重复出现。 六、对比原则 加大不同元素的视觉差异。 ==================================== 下面用一个PPT的例子，演示排版六原则。 ? 上面这张ppt有两个毛病。
1.4K20发布于 2018-09-21 - 来自专栏资源整理
Adobe InDesign2020：专业排版设计软件，轻松打造印刷品质！
该软件具有强大的排版设计和制作能力，可以帮助用户轻松打造各种印刷品质。下面我将从不同的角度为大家介绍这款优秀的软件。 软件全版本安装包获取指南：zyku666.com首先，Adobe InDesign2020 提供了高效的排版设计工具，用户可以使用该软件快速创建、编辑和排版各种复杂的文档和出版物。 该软件支持多种文本和图像处理工具，包括字体、颜色、大小、对齐、间距等，同时还提供了多种样式和模板选项，使得用户可以按照自己的需求进行排版设计。 该软件支持多种输出格式和标准，可以方便地满足用户不同的需求。总之，Adobe InDesign2020 是一款非常优秀的排版设计软件，它具有强大的排版设计和制作能力，可以帮助用户轻松打造各种印刷品质。 如果您是一名排版设计师或者出版从业者，那么 Adobe InDesign2020 一定是您专业排版设计软件，轻松打造印刷品质的理想选择！
81600编辑于 2023-04-21 - 来自专栏MelonTeam专栏
多端排版杂谈
Web端的应用场景越发广阔，内容排版越发复杂；这让排版技术在web端扮演着更加举足轻重的角色。 ，div+css的引入又是web排版技术的一个新起点，这是第一次提到了流体排版的概念；这种排版技术提倡是：所有的元素都可以当成流的一部分，遵循默认的从左到右、从上到下排版，从而减少开发者一些不必要的排版计算 Layout（弹性盒子排版），弹性布局更多的注重是在对排版流的控制上；为常用的排版场景提供更加优雅的解决方案。 使用Grid Layout排版的表单 这似乎跟table排版有些相似，起码网格式的排版思想是一样的，不过我想下面的意图应该才是定制该标准的意图： 1、页面扁平化，开发者以后的排版尽可能要从全局化考虑 相对布局) (3) TableLayout(表格布局) (4) FrameLayout(框架布局) (5) AbsoluteLayout(绝对布局) 我们逐个来看一看 LinearLayout（线性布局
1.8K70发布于 2018-01-04 - 来自专栏Don的成长史
HBUOJ 回音排版
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1.2K20发布于 2019-11-08 - 来自专栏数据结构与算法
17:文字排版
17:文字排版 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB描述 给一段英文短文，单词之间以空格分隔（每个单词包括其前后紧邻的标点符号）。 请将短文重新排版，要求如下： 每行不超过80个字符；每个单词居于同一行上；在同一行的单词之间以一个空格分隔；行首和行尾都没有空格。 输入第一行是一个整数n，表示英文短文中单词的数目. 输出排版后的多行文本，每行文本字符数最多80个字符，单词之间以一个空格分隔，每行文本首尾都没有空格。 的编译环境不一样， 在dev里格式错误但到了noi里满分，，，， 这就比较尴尬了，， 1 #include<iostream> 2 using namespace std; 3 string kong; 4
2.1K70发布于 2018-04-11 - 来自专栏落影的专栏
文字排版入门—— 排版基础、CoreText和图文混排
如下，4个点代表4个字符，一个红色的线段表示一个(0, 3)的属性，蓝色的线段表示(1, 3)的属性； 当我们获取第2个点的属性时，因为红色和蓝色线段都经过第2个点，所以会返回两个属性； 当我们获取第 restore identity CGContextSetTextMatrix(context, CGAffineTransformIdentity); } }; 4、 4、图文混排 图文混排是CTFrame、CTLine、CTRun的综合运用，原理是通过给NSAttributeString中添加一个空白字符，同时设置这个字符宽高为图片的size，最终排版的时候会预留出来一个与图片大小一致的空白区域 NSString *str = @"测试名字"; NSLog(@"len:%d", str.length); 结果：len:4。 (lldb) p [str characterAtIndex:0] (unichar) $0 = U+6d4b u'测' 为什么会有这些不同的长度和字符读取结果？
9.2K32发布于 2020-02-25 - 来自专栏用户1880875的专栏
排版 | Linux 中国
页边距与指定的纸张类型有关，例如 A4、letter 和 documentclass（article、book、report） 等等。 该软件包设置页面的主体，可以使主体几乎占满整个页面。 —— FULLPAGE PACKAGE DOCUMENTATION 另一个选择是使用 geometry 包。 captionsenglish{ \renewcommand{\contentsname} {\bfseries{Table of Contents}}} 要操纵目录与图、小节和章节列表之间的虚拟间距，请使用 tocloft 软件包 tocloft 包提供了控制目录、图表列表和表格列表的排版方法。 \end{document} 添加水印 要在 LaTeX 文档中启用水印，请使用 draftwatermark 软件包。下面的代码段和图像演示了如何在文档中添加水印。
3K30发布于 2021-09-09 - 来自专栏啄木鸟软件测试
软件性能测试（连载4）
（4）如果m测试通过，说明拐点比m大，对n进行并发/容量测试。 （5）如果n测试通过，说明拐点比m大比n小，选择新的n值a，a=(m+n)/2，返回第（1）步。 （4）选择新的m=(1000+3000)/2=2000，此时n-m=3000-2000=1000>50，对2000进行并发测试，持续10分钟，没有发现异常，测试通过，说明拐点比2000大但比3000小。
1.4K20发布于 2020-02-19 - 来自专栏前端之旅
译文排版规范
前言： 这是之前还在论坛当版主的时候，给自己定下的汉化规矩： 1.按照固定格式来排版； 2.能力有限不是机翻和偷工减料的借口； 3.尽量得到原作者的转载授权 虽然不再参与汉化工作了，但是有一些好的习惯值得继续保持 ---- 统一中文文案、排版的相关用法，降低沟通成本，增强译文的规范性和气质，使其更加易读。 我们的客户有 gｲんĤЦ8、ｷouЯƧquﾑгє、๓เςг๏ร๏Ŧt ς๏гק๏гคtเ๏ภn、900913、ƒ4ᄃëв๏๏к, IПᄃ.。 排版 斜体文字使用加粗样式代替 正确： 斜体本身是为西文文字所设计，为了保持良好的阅读效果，在中文排版时不应出现斜体，因此统一使用加粗样式代替。 错误： 斜体本身是为西文文字所设计，为了保持良好的阅读效果，在中文排版时不应出现斜体，因此统一使用加粗样式代替。
1.4K10发布于 2019-11-07 - 来自专栏MeowRain的博客
MDUI CSS框架 -排版
排版 ? 对应代码
Display 4Display 3</div 内容排版 MDUI 除了使用 Normalize.css 和设置 body 元素的字体和颜色外，没有直接对其他 HTML 元素的样式做出修改。 要使元素拥有排版优化后的样式，需要在这些元素的父元素上添加类 .mdui-typo 副标题 在标题内还可以包含 small 标签来标记副标题。 ? h4 标题 heading 副标题 Secondary text</h4>h5 标题 heading 副标题 Secondary text</small
1.7K20发布于 2021-04-22来自专栏前端小作坊中文排版二三事
中文排版二三事 前段时间一直在折腾中文排版相关的事情，自认为结果还算不错。故开源之，即是Entry.css。 在这篇博文中会介绍下在做这个库过程中学到的一些中文排版知识，以及它的特色。 排版中的空间就想音乐中的时间一样。他是无限整除的，但是按比例的间隔比起毫无限制的使用任意大小要有用很多。 在做web开发和设计中经常会用到网格。 它即解决了统一性，也避免了我们在排版时纠结那一两个像素的位置摆放。可惜网格只能解决水平方向的排版布局，在垂直方向上一直没有这样的技术，全仰仗设计师大大的美感了。 它是基于“vertical rhythm”原则设计的库，解决了垂直方向上的排版布局。 Vertical Rhythm可译成垂直的旋律。
1.3K10发布于 2018-08-06
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号